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などはおｋ。

**デフォルトの名無しさん** · 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 はウェブ制作板って事だろ。

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

jQueryはDOMラッパーとしてしか使ってないわ

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

ここはム板だからjQueryはあまり流行らない。
しかし世界は依然としてjQueryで出来てるのだろう。

そもそも論としてウェブサイトはアプリじゃないので。

**デフォルトの名無しさん** · 2021/01/14(木) 08:39:14.28

いい加減ウェブアプリではjQueryは適さないって言えばいいのに
なぜかjQueryを目の敵にしてるｗ
自分が使わないからって、みんなも使わないと思うんじゃねーよ

**デフォルトの名無しさん** · 2021/01/14(木) 08:45:47.25

正直jQueryの話をされても、EVの話をしてる時に馬車の話を始められるような気分

**デフォルトの名無しさん** · 2021/01/14(木) 09:05:51.42

ここはウェブサイトについて語る場所ではないので

**デフォルトの名無しさん** · 2021/01/14(木) 12:43:00.94

なんでこのスレタイ見て単なるウェブサイトの話題だと思うのか

**デフォルトの名無しさん** · 2021/01/14(木) 16:42:19.64

jQuery使ってる連中って、そもそもSPA用の開発環境構築出来るだけのスキルがないだろ
npmコマンド叩けるかも怪しい

**デフォルトの名無しさん** · 2021/01/14(木) 17:33:50.48

SPA用の開発環境構築するのが目的となってるなｗ
必要ならやるだけだろ

**デフォルトの名無しさん** · 2021/01/14(木) 18:40:14.24

SPA開発が流行らない理由は明白で、保守出来るやつが少なすぎるのよな
開発環境構築するのが目的のエンジニアがいると思うやつとか、
世間は頭が悪いやつが多すぎるのよ

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

jQueryが使われてるというよりリプレイスできないから
シェアがそのままなんだろう
巨大サービスを作り直すとかGAFA以外無理だろう

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

javaパーシステム屋と業務システム開発してるんだが俺のSPAフロントにビビっててこいつらいつの時代の連中なんだって感じ
誰一人理解してない

**デフォルトの名無しさん** · 2021/01/14(木) 20:02:57.14

一時期jQuery+handlebars+railsで無双してたな
フルスタックのフリーランスだったからマジで稼げた
最近は要素技術が多くなり過ぎて
全部1人でやるのが難しくなってきた

**デフォルトの名無しさん** · 2021/01/14(木) 20:15:26.01

QiitaとかDev.toとか見てるとNext.jsが破竹の勢いに見える

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

少なくとも日本でreactやvueを採用するって10%も無い気がする
それくらい何というか使える人も案外少ないし概念もややこしいのかなと
誰かが構築している上で構築した人の説明があって単にプログラム書くだけなら
案外簡単とは思うけど、一から構築するとなるとある程度知らないと出来ないだろうし

世界ではこの辺の技術の最先端が前に行き過ぎという感じがするなぁ
かといって今更jQueryで書く気はしないけど現実は中々そうは行かないという感じか

**デフォルトの名無しさん** · 2021/01/14(木) 20:36:48.04

一番需要があると一番最高な技術なんだそうだｗ

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

一番需要があるからといって、一番最高な技術なわけじゃない
一番需要があるのは、一番バランスがいい技術なんだ

何が一番なんなのか、そこを間違えてはいけない

**デフォルトの名無しさん** · 2021/01/14(木) 21:30:12.38

react圧倒的だな

https://trends.google.co.jp/trends/explore?cat=13&;date=today%205-y,today%205-y,today%205-y,today%205-y&geo=,,,&q=%2Fm%2F012l1vxv,%2Fm%2F0j45p7w,%2Fg%2F11c0vmgx5d,Svelte#TIMESERIES

**デフォルトの名無しさん** · 2021/01/14(木) 21:36:43.32

>>933
調べなきゃ使い方がわからないとも言えるんだよな

**デフォルトの名無しさん** · 2021/01/14(木) 22:54:19.75

Reactそんなに難しいかな？
DOMとJSさえ把握してれば、わりとすぐ使えようになる気がするけど

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

>>930
Wappalyzer入れながら自分の知ってるサービス見てみたら？
知らんつもりで使ってるかもしれんよ。
ユーザ企業だけど、割とベンダーはReactかVue使ってくるし、
俺が作ってるのはVue使ってる。

**デフォルトの名無しさん** · 2021/01/14(木) 23:24:32.61

>>933
なんで急落してるんだ？

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

DOM扱いは明らかにreactのがjqueryより楽だけど、非同期処理に関してはjqueryのが楽だわ。

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

非同期処理はasync awaitで決着ついてる