Vue vs React vs Svelte Part.6
レス数が900を超えています。1000を超えると表示できなくなるよ。
実際どうなん？
※Angularは残念ながら全く話題にならなかったのでSvelteに差し替えました
Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Svelte
https://svelte.dev/
※前スレ
Vue vs React vs Angular Part.5
https://mevius.5ch.net/test/read.cgi/tech/1596029929/
★ここではjQuery, Ruby, C#, Blazorの話題は禁止です
★jQuery, Ruby, C#, Blazorｷﾁｶﾞｲが書き込んでも無視してください
Angular, Next, Nuxt, Sapper, Gatsby, VuePress, RedWoodなどはおｋ。 >>813
C#おじさんいっつも最後にはそれ言い出すな。荒らしが荒らして伸びるより過疎スレの方がどう考えたって健全じゃん。
スレが伸びることが何の免罪符になると思ってんだか まあアホみたいにC#に反論して悪かった。
そりゃそうでそもそもスレチだわな。
React今更やり直してんだけど、スタイルってどうやってる？
Vueみたいにコンポーネントごとに書いといたらcssが一本ドーンとできるみたいな仕組みが欲しいんだが、見た感じなさそう。
css in jsでインラインスタイルみたいな感じで当てまくるのが王道なの？ react というかNext.jsってpagesの中でscssをimport する時って
各エレメントにclassName={hoge.kage} って手動でクラス名を紐付けないと駄目なの？
比較して申し訳ないけど、vueだとcss側に*{color:red}とか.main{border:1px;}、html側に<div class="main">と書くだけで
コンポーネント単位でdata-v-xxxx ってスコープ切って紐付けてくれるんだが、そういうのは無し？
前の人と多分同じネタかなこれ >>822
同じネタだと思う。
かつ、俺less使ってて、共通色とか基本サイズ数とかの定数値を、importしてるんだけど、これをきれいに解決する方法がわからん。 横からだけど自分もそれ気になるなあ。
コンポーネントごとcssを別出しするとか色々あるみたいだけど、やり方が複数あって迷うなぁ。
Tailwind使ってるからスタイル自体そんなに充てないけども >>823
うーむ、Next.jsのgetServerSidePropsに惹かれて試してみたけど、こっちはVueと比べてCSSの考える事は多い感じかな
適当に書くけど、.main > * {color:red}とかやって、子コンポーネントに突き抜けたりしないだろうか・・・。 >>820
他人に過疎を味あわせたいというのは異常だし
おまえがこのスレに来なくて過疎を味わい他人がこのスレで雑談して楽しむのはwin-win
スレのテーマを話したい人がいるときに雑談で邪魔しないというマナーはある >>822
Reactだと、上記と同じことをするのはstyled-componentsかな。
エディタの補完が追いつくのかは気になるけど
https://qiita.com/taneba/items/4547830b461d11a69a20 >>826
とにかくお前はC#スレに籠ってろ
他の勢いがあるスレに関係ないことを書き込みに来てるのはわかってるんだ 「過疎スレだから」がスレ違い宣伝荒らしの言い訳ならprologスレとforthスレを盛り上げてこい。これは命令だ。 Next.jsってアップデートされたけどVercel使わないとまともに使えん的になってきてそこそこの規模でも有料だし
少し大きくなったら年間数万ドルもかかるとかやばくねえっすか？ ちょっと調べたけどnextって今そんなことになってたんだ。面白ー。
まぁまだゆとり向けフレームワークのnuxtちゃんがいますし... 画像最適化やISR等の一部機能がVercel依存なだけじゃないの？
Vercelも自分とこのプラットフォームを使ってほしいだろうけど、客寄せになるNext.jsの人気は必要だから無茶はできないし ReactのNext.jsのgetServerSideProps() に相当する機能ってVueのNuxt.js には無い？
DBアクセスとか、必ずサーバー側で実行して欲しい処理を書きたい ある
が基本的すぎてドキュメント読んでないのがバレるぞ asyncDataやfetchだとrouter-link、nuxt-linkでページ遷移するとクライアント側で実行されちゃう認識だけど
それ以外にも必ずサーバサイドで実行される(ロジックの中でfs.readFileSyncが使える)方法あるの？ getServerSidePropsの意味するところを俺が誤認してたみたい失礼。
asyncDataをサーバ側に限定する方法はない
ServerMiddlewareを使えばサーバ側で動くAPIを作れるから、それをクライアント側から呼ぶ形が一般的 やっぱりページごとにAPI作るのがNuxtの流儀か
管理サイト的なものを作っていて、9割のページがDBのデータを表示してるから
1ページごとにAPIを個別に作るのはしんどいんだよね
それか、router-link禁止で全部<a>タグでのみページ遷移するルールにするかって感じか >>822
普通にscssで書いてる
一般的なサイトと書き方変わらん >>838
コンポーネントにではなくて、サイト全体に書いてる感じ？
グローバルに効いちゃうって事？ >>839
index.jsでsassをimportしてるからそんな感じ
といってもscssファイルはページ用とか変数用とかに分けてる >>840
なるほど。ありがとう。
となると、ちょっと設計方針変えないといかんな。 >>841
あとビルドするときにscssをcssとして出力（package.jsonに記載）したほうがChromeのDeveloperで開発しやすいんでないかな
俺はそうした
jsにスタイル書くのって俺的には無理だったしscssの変数とかmixinどうすんのって感じだったから使ってない せっかくコンポーネントごとに分けてるのにグローバルな巨大cssを作るのもちょっとなぁ
scssだと入れ子が出来るだろうから素のcssよりゃマシだろうけど >>842
package.jsonに記載って何を記載するんですか？ いいからガタガタ抜かさずemotion使ってみろってｗ emotion は絶対にない。
linaria は許容できるけど SPAで特定のページにnoindex付けたいんですがどうやるのが正解ですか？
今考えてるのは特定のページに入ったらjqueryでheadにnoindexをぶち込む方法です >>843
そうなんだけどさ、styled-componentの無理やり感が無理なのとjsがスタイルの記述ばかりになって見通し悪くなるし
あと使ったことないけどstyled-componentだとChromeのDeveloperToolでどうやって調整するんだろ
開発がWebアプリ系なら全体的にほとんど同じスタイルだからそれほど増えなくないかな
>>844
開発用パッケージにcss-loaderとsass-loaderとstyle-loaderをインストール
だったかな css in js だと goober が軽くてええな styled component と emotion は全く同じ位置付けなんだけど。
styled componentが無理矢理でemotionが無理矢理じゃないのが理解できない。
dev toolpの問題は結構前に解消されてるでしょ。
css in js を使用する人は何を実現したくて使用するのか聞きたい emotionはstyled component形式でも書けるけどメインはcss prop形式だよ。
css prop形式使わないならstyled component使えばいい。
わざわざemotion使うからにはcss prop形式使うでしょ。
styled component形式は移行のためのサポートと思っとけばいい。 https://emotion.sh/docs/styled
インターフェイスは styled componentと変わらないと思うけど ちゃんと読まないでレスしてた
css prop形式だと余計に css in js 使う意味ないでしょ。
それだと classNameをconditionで操作してるのと変わらないでしょ あのねえ、styled componentより後発でたったそれだけのことで人気追い抜くわけないでしょ…
知らないならドキュメント読んで使ってみなさいよ tailwindかtacyonsどっちか迷ってる俺に推しの一言をどうぞ https://i.imgur.com/vOB4XJi.jpg
もはや比較の必要あるか？というレベルで大差付けてるけども
最近の人気で言うとTailwindCSSかChakra UIかという感じやな、chakraはreact専用だけども。 tailwindとchakra uiはスコープだいぶ違うと思うが。
前者はCSSフレームワーク、後者はreact用uiツールキットでしょ >>858
立ち位置は完全には同じでないけど、被ってる部分は結構あってサイト内にも比較ページがあるくらい意識されてるよ。
https://chakra-ui.com/docs/comparison
背景も使い所も全く別物なら公式がわざわざ用意しないからね うんそれoverview読むだけでまったく別物だって分かるね 全く別物ではないな中身見てないだろ
もちろん範囲外のものもカバーしてるけども 例えば
Tailwindなら
<div className="w-full mx-4 my-2"></div>
Chakraなら
<Box w="full" mx={4} my={2}></Box>
で同じ結果になる。
colorもレスポンシブも同様にあるしな。
まぁ全く同じもので厳密に比較しないと死ぬ病気だったらすまんな、忘れてくれ。 あほくさ。
上は単なるcssクラス
下はreactコンポーネントじゃん。
下はJSXで書いてるから似て見えるだけ。
実態はJS関数じゃん。
いったいどこが同じなのかｗ
cssなんて基本要素も甚だしいんだからそれで似てる言ってたらWeb用のありとあらゆるライブラリが似てるｗ 知らんけど使用感のことを言ってるんでしょ？
内部構造が別だからってギャーギャーつっかかってもしゃあないやん... このフレームワーク流行ってるのか
使ってみようかな
趣味プロダクトのデザインマジで面倒だ まあ>>859が正しいわな
どちらを使うかで迷う人が多いから、わざわざ比較ページでピンポイント比較しているわけで
ただChakraは、使うのを止めるってなった時に地獄を見そうだな
react-bootstrapで地獄を見た私はそう思うぜ https://i.imgur.com/2YClP8H.png
そーす
https://2020.stateofcss.com/ja-JP/
これ見るとまだオワコンではないと思う、他が大きく下げたものが多いから順位は上げてる。
TailwindCSSが断トツではあるけどね。 でもお前らのゴミみたいなセンスじゃ何使ってもどうにもならないじゃん？ >>869
ゴミみたいなセンスだから優秀なライブラリを使うんだろうが
OSSタダ乗りおじさん舐めんな AWSのことかな？ｗ
批判にあわてて援助し出したんだっけ？ｗ jqueryUIたいなライブラリー
なにか知りませんか？
Reactで使いますが、
React用じゃなくても良いですので。 BootstrapとかMaterial-UIの事言ってる？ bootstrapよりどちらかというとvelocityとかじゃね JQuery UIの主にインタラクションのような機能です。
Draggable
Droppable
Resizable
Selectable
Sortable
自前のコントロールを作ろうとすると必ずこの壁にぶち当たります。 React に、そういう機能のコンポーネントは無いの？ ないと思う
俺もjQueryUIのコンポーネント使いまくってるやつは移行が不可能
全部作らないといけないし
新規でやるときは使うんだが いや少なくともReact DnDでuseDragとuseDropはあるけど…？
そういうことじゃなく？？ ReactでjQueryUIを使う場合、
なのか問題とかあるのかな？ 仮想DOM のReact と、実DOMを更新するjQuery の更新タイミングを、
React のタイミングに合わせる必要がある
合っていないと、jQueryで更新しても、
その後、Reactでは更新していないと思われて、元の状態に戻ってしまう >>886
それはなんとか大丈夫かな？
それよりもjqueryUIのベストなロードの方法はなんだろうか？ いやだからjQueryUI互換のReactのコンポーネントライブラリが欲しいんだよ
なんやかんやいってjQueryUIの出来はめちゃくちゃいい なんでUIライブラリ二重に使おうとするわけ？
野球帽の上にシルクハット被っても問題ないかな？と言ってるに等しいのでは？
これは問題あるともないとも言える。
可能不可能で言えば問題ないとも言えるが、バカに見えるという点では問題あると言える。 >>889
バカはお前だろ
jQueryUIはコンポーネントライブラリだぞ 俺はangular使ってるがmaterialUIがまんまそれに相当する
React にもあるはず。ちゃんと探そう あちこちで言われてるんだからいい加減理解してほしいもんだけど
ReactとかはjQueryの代替にはならないの
ウェブサイト全体をウェブアプリに作り変える場合に使うもので
インターフェースはほぼ全部作り変えでUIを自分で作るためのものなの
jQueryだけじゃなくてブラウザ標準のDOM APIとも相性が悪い
全てをReactのやり方に置き換えるレベルじゃないと単に開発しづらくなるだけ
jQueryのシェアは去年一年で3%増えました。主に今までなにも使ってないところが
採用するのがjQueryです。まだ増え続けています。
その他のフレームワークは0.1%増えるか増えないかだよ
https://w3techs.com/technologies/history_overview/javascript_library/all/y
殆どのところは開発効率が上がらないか逆に下がってしまって却下されてるんだろう Webサイトは改修しやすくないといけないからな
Reactでガチガチに作っても運用の人たちが困る Webサイト → バニラ or jQuery
Webアプリ → Reactとか
これで結論出てる Ruby on Rails では、Bootstrap を使うから、
その依存関係で、jQuery も自動的に入る
React は、コンポーネントとして使う 意味も分からないバカが大量に沸いて出た。
あるいは、また自演坊の出現か？ JQuery UIをぐぐってみた感じ、完全な代替品はreactには無いんじゃないの？
自分がスクラッチしたUIに後からjsの振る舞いを付けてくれるライブラリ群って事だよね。
react、vueの場合、uiとjsの振る舞いをセットでコンポーネント化してあるものがメジャーだから、それらを採用してcssハックで見た目をカスタマイズするしかないと思う。
(コンポーネントによってはslotとかで後から自由にuiを付けられるものもあるので、ぜひドキュメントを見てもらえれば) あの、いまvueで実装してみたくてテストしていたんですが、
https://i.imgur.com/tRZJ97x.jpg
イメージとしては{{message}}のところにデフォで表示される1というメッセージがコンポーネントで作ったボタンを押したらqqqqしたいんです
で、画像のように書いたところalertは表示されるんですが、内容が変わりません
これはおそらくコンポーネントの中に{{message}}とdataも入れてあげれば変わるようにはなるとおもうのですが、
やりたいことはコンポーネントで作ったカスタムボタンを押したらそのコンポーネント外に書いてある{{message}}に値をセットさせたいのです
これってどのように実装すればいいんでしょうか？ const element = <div id="A" />;
：
element.props.id = "B"; //--- TypeError: Cannot assign to read only property 'props' of object '#<Object>'
上記でエラーになるんですが、一度設定したプロパティを変更する事は可能？
もしかして出来なかったのだろうか... Emitを使えばいける。
vueのドキュメントのemitかstoreパターンの項を一度読んだ方が効率がいいと思う。
もしくはハンズオンの書籍で体系的に学ぶか。
またエディタはvscodeとか使った方が時短になります。 プロパティは親からしか、変更できない。
dataとコンポーネントを紐付けている場合は、プロパティをwatchして変更を検知し、dataに反映する必要あり。 vue3、vue-cliのデフォルト設定だとローカルサーバーでtsファイルに定義したtypeの再コンパイルが走らなくてきっつー。
解決してる人いたら設定教えてくださいっす。 >>906
serveでってことだよね。何もせずとも普通にやってくれるが？ jotaiっていうReact用の状態管理ライブラリめちゃくちゃ良いじゃない
なんでこれ話題になってないの？ いいのはたくさんある。
だが結局は多くの人が使っているものが普及する >>909
前スレでとっくに既出。
449 デフォルトの名無しさん 2020/08/31 02:31:14
Reactのrecoilいいな
useContextの欠点を補完してる
もうReduxなんか必要ねえは
460 デフォルトの名無しさん 2020/09/11 22:12:09
>>449
これも面白そう
Jotai, a New Granular State Management Library for React
https://www.infoq.com/news/2020/09/jotai-react-state-management/
たぶん日本語の「状態」からｗ >>911
おー出てたか
recoilよりはかなり使いやすい
とりあえず趣味プロダクトで使ってみる またみずちが変なこと言ってんなｗ
jQueryを求めてないって考えが間違いなんだってば
2021年1月時点のシェア 77.2%
https://w3techs.com/technologies/history_overview/javascript_library/all/y
2020年の1月から一年で +3.0%
今日の時点でシェア + 0.1%
需要は未だにjQueryが一番あるというのに
それを理解できないおじさん すなわち jQuery はウェブ制作板って事だろ。 jQueryはDOMラッパーとしてしか使ってないわ ここはム板だからjQueryはあまり流行らない。
しかし世界は依然としてjQueryで出来てるのだろう。
そもそも論としてウェブサイトはアプリじゃないので。 いい加減ウェブアプリではjQueryは適さないって言えばいいのに
なぜかjQueryを目の敵にしてるｗ
自分が使わないからって、みんなも使わないと思うんじゃねーよ 正直jQueryの話をされても、EVの話をしてる時に馬車の話を始められるような気分 レス数が900を超えています。1000を超えると表示できなくなるよ。
