Vue vs React vs Svelte Part.6

**デフォルトの名無しさん** · 2020/10/27(火) 13:09:05.31

実際どうなん？
※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などはおｋ。

**デフォルトの名無しさん** · 2020/12/30(水) 03:37:46.36

C#おじさんの自演ここまでくると怖い
本当に年内に病院に行くべき

**デフォルトの名無しさん** · 2020/12/30(水) 05:45:50.88

>>816
Next.jsなら今はSSG推奨

**デフォルトの名無しさん** · 2020/12/30(水) 06:08:39.70

時代はISR

**デフォルトの名無しさん** · 2020/12/30(水) 06:38:08.28

>>813
C#おじさんいっつも最後にはそれ言い出すな。荒らしが荒らして伸びるより過疎スレの方がどう考えたって健全じゃん。
スレが伸びることが何の免罪符になると思ってんだか

**デフォルトの名無しさん** · 2020/12/30(水) 10:00:04.98

まあアホみたいにC#に反論して悪かった。
そりゃそうでそもそもスレチだわな。

React今更やり直してんだけど、スタイルってどうやってる？
Vueみたいにコンポーネントごとに書いといたらcssが一本ドーンとできるみたいな仕組みが欲しいんだが、見た感じなさそう。
css in jsでインラインスタイルみたいな感じで当てまくるのが王道なの？

**デフォルトの名無しさん** · 2020/12/30(水) 11:50:39.35

react というかNext.jsってpagesの中でscssをimport する時って
各エレメントにclassName={hoge.kage} って手動でクラス名を紐付けないと駄目なの？

比較して申し訳ないけど、vueだとcss側に*{color:red}とか.main{border:1px;}、html側に<div class="main">と書くだけで
コンポーネント単位でdata-v-xxxx ってスコープ切って紐付けてくれるんだが、そういうのは無し？

前の人と多分同じネタかなこれ

**デフォルトの名無しさん** · 2020/12/30(水) 12:16:17.47

>>822
同じネタだと思う。
かつ、俺less使ってて、共通色とか基本サイズ数とかの定数値を、importしてるんだけど、これをきれいに解決する方法がわからん。

**デフォルトの名無しさん** · 2020/12/30(水) 12:34:12.03

横からだけど自分もそれ気になるなあ。
コンポーネントごとcssを別出しするとか色々あるみたいだけど、やり方が複数あって迷うなぁ。

Tailwind使ってるからスタイル自体そんなに充てないけども

**デフォルトの名無しさん** · 2020/12/30(水) 12:54:00.12

>>823
うーむ、Next.jsのgetServerSidePropsに惹かれて試してみたけど、こっちはVueと比べてCSSの考える事は多い感じかな

適当に書くけど、.main > * {color:red}とかやって、子コンポーネントに突き抜けたりしないだろうか・・・。

**デフォルトの名無しさん** · 2020/12/30(水) 14:36:06.25

>>820
他人に過疎を味あわせたいというのは異常だし
おまえがこのスレに来なくて過疎を味わい他人がこのスレで雑談して楽しむのはwin-win
スレのテーマを話したい人がいるときに雑談で邪魔しないというマナーはある

**デフォルトの名無しさん** · 2020/12/30(水) 17:44:12.92

>>822
Reactだと、上記と同じことをするのはstyled-componentsかな。
エディタの補完が追いつくのかは気になるけど

https://qiita.com/taneba/items/4547830b461d11a69a20

**デフォルトの名無しさん** · 2020/12/30(水) 18:55:12.14

>>826
とにかくお前はC#スレに籠ってろ
他の勢いがあるスレに関係ないことを書き込みに来てるのはわかってるんだ

**デフォルトの名無しさん** · 2020/12/30(水) 20:27:31.52

「過疎スレだから」がスレ違い宣伝荒らしの言い訳ならprologスレとforthスレを盛り上げてこい。これは命令だ。

**デフォルトの名無しさん** · 2020/12/31(木) 00:25:02.74

Next.jsってアップデートされたけどVercel使わないとまともに使えん的になってきてそこそこの規模でも有料だし
少し大きくなったら年間数万ドルもかかるとかやばくねえっすか？

**デフォルトの名無しさん** · 2020/12/31(木) 00:48:49.82

ちょっと調べたけどnextって今そんなことになってたんだ。面白ー。
まぁまだゆとり向けフレームワークのnuxtちゃんがいますし...

**デフォルトの名無しさん** · 2020/12/31(木) 07:16:28.08

画像最適化やISR等の一部機能がVercel依存なだけじゃないの？
Vercelも自分とこのプラットフォームを使ってほしいだろうけど、客寄せになるNext.jsの人気は必要だから無茶はできないし

**デフォルトの名無しさん** · 2020/12/31(木) 17:56:20.15

ReactのNext.jsのgetServerSideProps() に相当する機能ってVueのNuxt.js には無い？
DBアクセスとか、必ずサーバー側で実行して欲しい処理を書きたい

**デフォルトの名無しさん** · 2020/12/31(木) 20:12:22.49

ある
が基本的すぎてドキュメント読んでないのがバレるぞ

**デフォルトの名無しさん** · 2020/12/31(木) 23:11:57.32

asyncDataやfetchだとrouter-link、nuxt-linkでページ遷移するとクライアント側で実行されちゃう認識だけど
それ以外にも必ずサーバサイドで実行される(ロジックの中でfs.readFileSyncが使える)方法あるの？

**デフォルトの名無しさん** · 2021/01/01(金) 01:01:38.63

getServerSidePropsの意味するところを俺が誤認してたみたい失礼。

asyncDataをサーバ側に限定する方法はない
ServerMiddlewareを使えばサーバ側で動くAPIを作れるから、それをクライアント側から呼ぶ形が一般的

**デフォルトの名無しさん** · 2021/01/01(金) 01:11:21.91

やっぱりページごとにAPI作るのがNuxtの流儀か

管理サイト的なものを作っていて、9割のページがDBのデータを表示してるから
1ページごとにAPIを個別に作るのはしんどいんだよね
それか、router-link禁止で全部<a>タグでのみページ遷移するルールにするかって感じか

**デフォルトの名無しさん** · 2021/01/01(金) 10:22:39.74

>>822
普通にscssで書いてる
一般的なサイトと書き方変わらん

**デフォルトの名無しさん** · 2021/01/01(金) 11:09:03.93

>>838
コンポーネントにではなくて、サイト全体に書いてる感じ？
グローバルに効いちゃうって事？

**デフォルトの名無しさん** · 2021/01/01(金) 12:13:22.88

>>839
index.jsでsassをimportしてるからそんな感じ
といってもscssファイルはページ用とか変数用とかに分けてる

**デフォルトの名無しさん** · 2021/01/01(金) 13:10:38.63

>>840
なるほど。ありがとう。
となると、ちょっと設計方針変えないといかんな。

**デフォルトの名無しさん** · 2021/01/01(金) 13:44:12.20

>>841
あとビルドするときにscssをcssとして出力（package.jsonに記載）したほうがChromeのDeveloperで開発しやすいんでないかな
俺はそうした

jsにスタイル書くのって俺的には無理だったしscssの変数とかmixinどうすんのって感じだったから使ってない

**デフォルトの名無しさん** · 2021/01/01(金) 20:12:23.69

せっかくコンポーネントごとに分けてるのにグローバルな巨大cssを作るのもちょっとなぁ
scssだと入れ子が出来るだろうから素のcssよりゃマシだろうけど

**デフォルトの名無しさん** · 2021/01/01(金) 22:01:26.56

>>842
package.jsonに記載って何を記載するんですか？

**デフォルトの名無しさん** · 2021/01/01(金) 22:03:44.11

いいからガタガタ抜かさずemotion使ってみろってｗ

**デフォルトの名無しさん** · 2021/01/01(金) 22:05:08.76

emotion は絶対にない。

linaria は許容できるけど

**デフォルトの名無しさん** · 2021/01/01(金) 22:30:42.44

SPAで特定のページにnoindex付けたいんですがどうやるのが正解ですか？
今考えてるのは特定のページに入ったらjqueryでheadにnoindexをぶち込む方法です

**デフォルトの名無しさん** · 2021/01/01(金) 22:34:56.11

>>843
そうなんだけどさ、styled-componentの無理やり感が無理なのとjsがスタイルの記述ばかりになって見通し悪くなるし
あと使ったことないけどstyled-componentだとChromeのDeveloperToolでどうやって調整するんだろ

開発がWebアプリ系なら全体的にほとんど同じスタイルだからそれほど増えなくないかな

>>844
開発用パッケージにcss-loaderとsass-loaderとstyle-loaderをインストール
だったかな

**デフォルトの名無しさん** · 2021/01/01(金) 22:40:09.79

css in js だと goober が軽くてええな

**デフォルトの名無しさん** · 2021/01/01(金) 22:43:08.73

styled component と emotion は全く同じ位置付けなんだけど。
styled componentが無理矢理でemotionが無理矢理じゃないのが理解できない。

dev toolpの問題は結構前に解消されてるでしょ。

css in js を使用する人は何を実現したくて使用するのか聞きたい

**デフォルトの名無しさん** · 2021/01/01(金) 23:02:42.71

emotionはstyled component形式でも書けるけどメインはcss prop形式だよ。
css prop形式使わないならstyled component使えばいい。
わざわざemotion使うからにはcss prop形式使うでしょ。
styled component形式は移行のためのサポートと思っとけばいい。

**デフォルトの名無しさん** · 2021/01/01(金) 23:05:06.53

https://emotion.sh/docs/styled

インターフェイスは　styled componentと変わらないと思うけど

**デフォルトの名無しさん** · 2021/01/01(金) 23:10:00.98

ちゃんと読まないでレスしてた

css prop形式だと余計に　css in js 使う意味ないでしょ。
それだと　classNameをconditionで操作してるのと変わらないでしょ

**デフォルトの名無しさん** · 2021/01/01(金) 23:19:20.92

あのねえ、styled componentより後発でたったそれだけのことで人気追い抜くわけないでしょ…
知らないならドキュメント読んで使ってみなさいよ

**デフォルトの名無しさん** · 2021/01/02(土) 00:13:03.58

時代はtailwindCSS

**デフォルトの名無しさん** · 2021/01/02(土) 15:35:58.93

tailwindかtacyonsどっちか迷ってる俺に推しの一言をどうぞ

**デフォルトの名無しさん** · 2021/01/02(土) 17:42:37.50

https://i.imgur.com/vOB4XJi.jpg
もはや比較の必要あるか？というレベルで大差付けてるけども

最近の人気で言うとTailwindCSSかChakra UIかという感じやな、chakraはreact専用だけども。

**デフォルトの名無しさん** · 2021/01/02(土) 20:18:33.44

tailwindとchakra uiはスコープだいぶ違うと思うが。
前者はCSSフレームワーク、後者はreact用uiツールキットでしょ

**デフォルトの名無しさん** · 2021/01/02(土) 22:31:31.83

>>858
立ち位置は完全には同じでないけど、被ってる部分は結構あってサイト内にも比較ページがあるくらい意識されてるよ。
https://chakra-ui.com/docs/comparison
背景も使い所も全く別物なら公式がわざわざ用意しないからね

**デフォルトの名無しさん** · 2021/01/03(日) 00:49:54.47

うんそれoverview読むだけでまったく別物だって分かるね

**デフォルトの名無しさん** · 2021/01/03(日) 01:01:48.04

全く別物ではないな中身見てないだろ
もちろん範囲外のものもカバーしてるけども

**デフォルトの名無しさん** · 2021/01/03(日) 01:12:57.13

例えば
Tailwindなら
<div className="w-full mx-4 my-2"></div>
Chakraなら
<Box w="full" mx={4} my={2}></Box>
で同じ結果になる。
colorもレスポンシブも同様にあるしな。

まぁ全く同じもので厳密に比較しないと死ぬ病気だったらすまんな、忘れてくれ。

**デフォルトの名無しさん** · 2021/01/03(日) 01:16:24.80

あほくさ。
上は単なるcssクラス
下はreactコンポーネントじゃん。
下はJSXで書いてるから似て見えるだけ。
実態はJS関数じゃん。
いったいどこが同じなのかｗ
cssなんて基本要素も甚だしいんだからそれで似てる言ってたらWeb用のありとあらゆるライブラリが似てるｗ

**デフォルトの名無しさん** · 2021/01/03(日) 01:21:20.90

知らんけど使用感のことを言ってるんでしょ？
内部構造が別だからってギャーギャーつっかかってもしゃあないやん...

**デフォルトの名無しさん** · 2021/01/03(日) 01:27:19.26

このフレームワーク流行ってるのか
使ってみようかな
趣味プロダクトのデザインマジで面倒だ

**デフォルトの名無しさん** · 2021/01/03(日) 07:17:12.46

まあ>>859が正しいわな
どちらを使うかで迷う人が多いから、わざわざ比較ページでピンポイント比較しているわけで

ただChakraは、使うのを止めるってなった時に地獄を見そうだな
react-bootstrapで地獄を見た私はそう思うぜ

**デフォルトの名無しさん** · 2021/01/03(日) 16:18:33.59

materializecssってオワコンなの？

**デフォルトの名無しさん** · 2021/01/03(日) 19:55:53.47

https://i.imgur.com/2YClP8H.png
そーす
https://2020.stateofcss.com/ja-JP/

これ見るとまだオワコンではないと思う、他が大きく下げたものが多いから順位は上げてる。
TailwindCSSが断トツではあるけどね。

**デフォルトの名無しさん** · 2021/01/03(日) 20:16:55.01

でもお前らのゴミみたいなセンスじゃ何使ってもどうにもならないじゃん？

**デフォルトの名無しさん** · 2021/01/03(日) 22:03:10.41

はいはい

**デフォルトの名無しさん** · 2021/01/04(月) 00:31:45.14

>>869
ゴミみたいなセンスだから優秀なライブラリを使うんだろうが
OSSタダ乗りおじさん舐めんな

**デフォルトの名無しさん** · 2021/01/04(月) 09:41:29.84

AWSのことかな？ｗ
批判にあわてて援助し出したんだっけ？ｗ

**デフォルトの名無しさん** · 2021/01/04(月) 16:45:28.03

ちょっと何言ってるか分からない

**デフォルトの名無しさん** · 2021/01/04(月) 17:33:54.18

意味不明だな

**デフォルトの名無しさん** · 2021/01/05(火) 17:59:59.74

スライムというワイルドカード

**デフォルトの名無しさん** · 2021/01/06(水) 19:42:43.06

jqueryUIたいなライブラリー
なにか知りませんか？

Reactで使いますが、
React用じゃなくても良いですので。

**デフォルトの名無しさん** · 2021/01/07(木) 00:03:32.99

JQuery UIでいいじゃんそれ

**デフォルトの名無しさん** · 2021/01/07(木) 00:36:41.77

BootstrapとかMaterial-UIの事言ってる？

**デフォルトの名無しさん** · 2021/01/07(木) 12:47:58.31

bootsrtapは？

**デフォルトの名無しさん** · 2021/01/07(木) 15:12:43.36

bootstrapよりどちらかというとvelocityとかじゃね

**デフォルトの名無しさん** · 2021/01/07(木) 19:07:40.82

JQuery UIの主にインタラクションのような機能です。
Draggable
Droppable
Resizable
Selectable
Sortable

自前のコントロールを作ろうとすると必ずこの壁にぶち当たります。

**デフォルトの名無しさん** · 2021/01/07(木) 20:50:34.46

React に、そういう機能のコンポーネントは無いの？

**デフォルトの名無しさん** · 2021/01/07(木) 22:24:29.72

ないと思う
俺もjQueryUIのコンポーネント使いまくってるやつは移行が不可能
全部作らないといけないし
新規でやるときは使うんだが

**デフォルトの名無しさん** · 2021/01/07(木) 23:16:04.95

いや少なくともReact DnDでuseDragとuseDropはあるけど…？
そういうことじゃなく？？

**デフォルトの名無しさん** · 2021/01/08(金) 00:07:17.50

ReactでjQueryUIを使う場合、
なのか問題とかあるのかな？

**デフォルトの名無しさん** · 2021/01/08(金) 00:48:37.80

仮想DOM のReact と、実DOMを更新するjQuery の更新タイミングを、
React のタイミングに合わせる必要がある

合っていないと、jQueryで更新しても、
その後、Reactでは更新していないと思われて、元の状態に戻ってしまう

**デフォルトの名無しさん** · 2021/01/08(金) 02:03:55.07

>>886
それはなんとか大丈夫かな？

それよりもjqueryUIのベストなロードの方法はなんだろうか？

**デフォルトの名無しさん** · 2021/01/08(金) 02:38:29.42

いやだからjQueryUI互換のReactのコンポーネントライブラリが欲しいんだよ
なんやかんやいってjQueryUIの出来はめちゃくちゃいい

**デフォルトの名無しさん** · 2021/01/08(金) 02:40:50.44

なんでUIライブラリ二重に使おうとするわけ？
野球帽の上にシルクハット被っても問題ないかな？と言ってるに等しいのでは？
これは問題あるともないとも言える。
可能不可能で言えば問題ないとも言えるが、バカに見えるという点では問題あると言える。

**デフォルトの名無しさん** · 2021/01/08(金) 02:44:47.94

>>889
jqueryUIよく知ってますか？

**デフォルトの名無しさん** · 2021/01/08(金) 02:44:56.99

>>889
バカはお前だろ
jQueryUIはコンポーネントライブラリだぞ

**デフォルトの名無しさん** · 2021/01/08(金) 07:47:08.14

俺はangular使ってるがmaterialUIがまんまそれに相当する
React にもあるはず。ちゃんと探そう

**デフォルトの名無しさん** · 2021/01/08(金) 08:02:05.71

あちこちで言われてるんだからいい加減理解してほしいもんだけど
ReactとかはjQueryの代替にはならないの

ウェブサイト全体をウェブアプリに作り変える場合に使うもので
インターフェースはほぼ全部作り変えでUIを自分で作るためのものなの

jQueryだけじゃなくてブラウザ標準のDOM APIとも相性が悪い
全てをReactのやり方に置き換えるレベルじゃないと単に開発しづらくなるだけ

jQueryのシェアは去年一年で3%増えました。主に今までなにも使ってないところが
採用するのがjQueryです。まだ増え続けています。
その他のフレームワークは0.1%増えるか増えないかだよ
https://w3techs.com/technologies/history_overview/javascript_library/all/y

殆どのところは開発効率が上がらないか逆に下がってしまって却下されてるんだろう

**デフォルトの名無しさん** · 2021/01/08(金) 08:08:57.80

Webサイトは改修しやすくないといけないからな
Reactでガチガチに作っても運用の人たちが困る

**デフォルトの名無しさん** · 2021/01/08(金) 08:12:22.84

Webサイト → バニラ or jQuery
Webアプリ → Reactとか

これで結論出てる

**デフォルトの名無しさん** · 2021/01/08(金) 08:13:08.49

Ruby on Rails では、Bootstrap を使うから、
その依存関係で、jQuery も自動的に入る

React は、コンポーネントとして使う

**デフォルトの名無しさん** · 2021/01/08(金) 08:50:47.46

意味も分からないバカが大量に沸いて出た。

あるいは、また自演坊の出現か？

**デフォルトの名無しさん** · 2021/01/08(金) 09:21:04.83

Kentaだなってすぐわかる

**デフォルトの名無しさん** · 2021/01/08(金) 09:44:49.72

UIくらい自分で解決しろよってことだなゴミカス

**デフォルトの名無しさん** · 2021/01/08(金) 10:35:18.69

う～んこの特徴的な文章

**デフォルトの名無しさん** · 2021/01/08(金) 12:05:31.74

JQuery UIをぐぐってみた感じ、完全な代替品はreactには無いんじゃないの？
自分がスクラッチしたUIに後からjsの振る舞いを付けてくれるライブラリ群って事だよね。

react、vueの場合、uiとjsの振る舞いをセットでコンポーネント化してあるものがメジャーだから、それらを採用してcssハックで見た目をカスタマイズするしかないと思う。
(コンポーネントによってはslotとかで後から自由にuiを付けられるものもあるので、ぜひドキュメントを見てもらえれば)

**デフォルトの名無しさん** · 2021/01/08(金) 14:48:23.62

あの、いまvueで実装してみたくてテストしていたんですが、
https://i.imgur.com/tRZJ97x.jpg
イメージとしては{{message}}のところにデフォで表示される1というメッセージがコンポーネントで作ったボタンを押したらqqqqしたいんです
で、画像のように書いたところalertは表示されるんですが、内容が変わりません
これはおそらくコンポーネントの中に{{message}}とdataも入れてあげれば変わるようにはなるとおもうのですが、
やりたいことはコンポーネントで作ったカスタムボタンを押したらそのコンポーネント外に書いてある{{message}}に値をセットさせたいのです

これってどのように実装すればいいんでしょうか？

**デフォルトの名無しさん** · 2021/01/08(金) 15:45:58.45

const element = <div id="A" />;
：
element.props.id = "B"; //--- TypeError: Cannot assign to read only property 'props' of object '#<Object>'

上記でエラーになるんですが、一度設定したプロパティを変更する事は可能？
もしかして出来なかったのだろうか...

**デフォルトの名無しさん** · 2021/01/08(金) 19:38:17.54

Emitを使えばいける。
vueのドキュメントのemitかstoreパターンの項を一度読んだ方が効率がいいと思う。
もしくはハンズオンの書籍で体系的に学ぶか。
またエディタはvscodeとか使った方が時短になります。

**デフォルトの名無しさん** · 2021/01/08(金) 19:56:38.91

プロパティは親からしか、変更できない。

dataとコンポーネントを紐付けている場合は、プロパティをwatchして変更を検知し、dataに反映する必要あり。

**デフォルトの名無しさん** · 2021/01/10(日) 16:53:28.20

vue3、vue-cliのデフォルト設定だとローカルサーバーでtsファイルに定義したtypeの再コンパイルが走らなくてきっつー。
解決してる人いたら設定教えてくださいっす。

**デフォルトの名無しさん** · 2021/01/11(月) 01:16:33.18

>>902
そんなあなたにvuex

**デフォルトの名無しさん** · 2021/01/11(月) 08:18:12.32

>>906
serveでってことだよね。何もせずとも普通にやってくれるが？

**デフォルトの名無しさん** · 2021/01/13(水) 16:35:56.54

jotaiっていうReact用の状態管理ライブラリめちゃくちゃ良いじゃない
なんでこれ話題になってないの？

**デフォルトの名無しさん** · 2021/01/13(水) 16:45:17.31

いいのはたくさんある。
だが結局は多くの人が使っているものが普及する

**デフォルトの名無しさん** · 2021/01/13(水) 17:03:02.91

>>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/
たぶん日本語の「状態」からｗ

**デフォルトの名無しさん** · 2021/01/13(水) 17:28:20.42

>>911
おー出てたか
recoilよりはかなり使いやすい
とりあえず趣味プロダクトで使ってみる

**デフォルトの名無しさん** · 2021/01/13(水) 19:06:48.50

女体

**デフォルトの名無しさん** · 2021/01/13(水) 19:40:18.84

それはにょたいと読むから違うと思う

**デフォルトの名無しさん** · 2021/01/14(木) 06:26:51.19

またみずちが変なこと言ってんなｗ
jQueryを求めてないって考えが間違いなんだってば

2021年1月時点のシェア 77.2%
https://w3techs.com/technologies/history_overview/javascript_library/all/y

2020年の1月から一年で +3.0%
今日の時点でシェア + 0.1%

需要は未だにjQueryが一番あるというのに
それを理解できないおじさん

**デフォルトの名無しさん** · 2021/01/14(木) 06:47:13.36

すなわち jQuery はウェブ制作板って事だろ。