Vue vs React vs Angular vs Svelte Part.9

**デフォルトの名無しさん** · 2022/01/16(日) 16:06:14.27

Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/
Svelte
https://svelte.dev/

※前スレ
Vue vs React vs Svelte Part.7
https://mevius.5ch.net/test/read.cgi/tech/1610901677/
Vue vs React vs Angular vs Svelte Part.8
https://mevius.5ch.net/test/read.cgi/tech/1621744952/

★ここではjQuery, Ruby, C#, Blazorの話題は禁止です
★jQuery, Ruby, C#, Blazorｷﾁｶﾞｲが書き込んでも無視してください
Next, Nuxt, Sapper, Gatsby, VuePress, RedWoodなどはおｋ。

**デフォルトの名無しさん** · 2022/02/10(木) 19:31:43.55

状態管理ライブラリ揃ってるのになんでバケツリレーを選ぶんだよ…

**デフォルトの名無しさん** · 2022/02/10(木) 19:39:32.63

reactって本当に流行っているのか疑問な気がする
みんなが分かってるならいいけど、日本だとそういうのよっぽど恵まれた会社だけという気がする
そういう意味では日本のエンジニアってトータルで見るとレベルが相当低いんだなと思う
何でコイツが開発やってるの？みたいなの結構いるしフリーランスにもいるからなぁｗ

**デフォルトの名無しさん** · 2022/02/10(木) 19:42:35.97

Reactはうちでもやったけど、結局使わなくなったよ
たぶん他の企業でも結構一回使ってみてあーこれ別にいらんわってなったとこ多いはず

**デフォルトの名無しさん** · 2022/02/10(木) 19:46:05.36

Rustおじさん「自演効かなくなってきたな」

**デフォルトの名無しさん** · 2022/02/10(木) 19:50:59.39

ロートルおじさん具体的なこと言わずに煽るだけだからすぐわかる。しかも短気だし。

**デフォルトの名無しさん** · 2022/02/10(木) 19:52:23.42

Rustおじだけどこんな中身のないスレなら俺のrust演説再開してもいい？
前までは不快な書き方しちゃって反省してる
今回はちゃんと書き溜めようかと思ってる

**デフォルトの名無しさん** · 2022/02/10(木) 19:55:43.32

だから何でここでやるんだよ
他所の砂場を荒らす前に関連スレを盛り上げろよ

**デフォルトの名無しさん** · 2022/02/10(木) 19:57:19.25

ここでやっていいわけ無いだろ。自分の言ったことぐらい守れ

**デフォルトの名無しさん** · 2022/02/10(木) 20:10:16.76

>>542
副作用が気持ち悪い
純粋関数で書けるって聞いてワクワクして始めたreactなのにこれじゃあねぇ？

**デフォルトの名無しさん** · 2022/02/10(木) 20:13:54.32

>>547
個人的には面白いからいいけど
ここはreactのスレだから完全なスレ違はよくないみたいだね
だからreactと比較した場合は…といったふうにreactの話題を織り交ぜればいいと思うな

**デフォルトの名無しさん** · 2022/02/10(木) 20:26:13.90

Reactで数千人が使う業務システム開発したが業務システムにはかなりいいぞ
Reactじゃないとここまでの規模と複雑なシステムは作れなかった

**デフォルトの名無しさん** · 2022/02/10(木) 20:27:47.26

Rustおじさん「そろそろID変えるか」

**デフォルトの名無しさん** · 2022/02/10(木) 20:34:07.61

ロートルじいじがここで暴れてる間、他のスレは平和

**デフォルトの名無しさん** · 2022/02/10(木) 20:39:12.61

よりによってなんでこのスレが狙われたんだろな
気持ち悪い

**デフォルトの名無しさん** · 2022/02/10(木) 20:50:41.27

ここまで具体的な解決策無し

**デフォルトの名無しさん** · 2022/02/10(木) 21:15:32.53

>>547
おｋ

**デフォルトの名無しさん** · 2022/02/10(木) 21:18:16.94

厚顔無恥にも程がある

**デフォルトの名無しさん** · 2022/02/10(木) 21:21:11.25

逆にweb業務システムでのフロントエンドって、スレタイ以外で何使うん
素のjs、html、jquery以外もうほとんどなくね？
wasmとかはマイナーな部類になるやろ

**デフォルトの名無しさん** · 2022/02/10(木) 22:52:53.71

SSRを含めてよければ色々あるだろうけど、多分そういう意味じゃ無いよね

**デフォルトの名無しさん** · 2022/02/11(金) 08:56:01.83

Rustネタは>>461の次世代スレでやれよ
そっちもとりあえず巡回はしてるからさ

**デフォルトの名無しさん** · 2022/02/11(金) 09:03:04.24

自演おじさんをあぶり出すべく次スレはワッチョイ必須ですね

**デフォルトの名無しさん** · 2022/02/11(金) 10:50:08.71

それで結局のところ課題>>534に対する解決策って存在しないの？
ここまでのところ人格攻撃レスしか返ってきてないんだけど

**デフォルトの名無しさん** · 2022/02/11(金) 11:11:45.78

レス周辺に書いてあるのに見えないのか。いや、理解が足りないからわからんのか

**デフォルトの名無しさん** · 2022/02/11(金) 11:18:36.14

>>564
どれ？
副作用を持ち込んでバケツリレーを解消するといった類のレスは幾つかあるが>>534はバケツリレーも副作用も気持ち悪いって主張だからそれでは全く解決策にはなってないぞ？

**デフォルトの名無しさん** · 2022/02/11(金) 11:44:19.91

>>565
そういう意味なら、状態を完全に消せる銀の弾丸は無いよ。そこは反論する必要がないから反論がないだけでしょ。

**デフォルトの名無しさん** · 2022/02/11(金) 12:21:02.96

副作用馬鹿が湧いて出てる

笑

**デフォルトの名無しさん** · 2022/02/11(金) 12:38:22.93

>>566
え？では「レス周辺に書いてある」ってどういうことなの？

**デフォルトの名無しさん** · 2022/02/11(金) 12:55:51.45

>>568
バケツリレーの件でしょ。揚げ足取りおじさん。

**デフォルトの名無しさん** · 2022/02/11(金) 12:57:18.85

なんで核心に触れないようにしてんの？w
結局よく知らんのでしょ？

**デフォルトの名無しさん** · 2022/02/11(金) 12:58:20.03

>>569
つまり俺のレス読めてないのに見当違いなレス返した挙句に人格攻撃までした奴がこのスレに居るってことなの？

**デフォルトの名無しさん** · 2022/02/11(金) 13:21:47.23

>>565
何でもかんでも和訳するのやめれ

**デフォルトの名無しさん** · 2022/02/11(金) 14:05:34.08

女の娘が一人で始めた食べチョクは、Ruby on Rails, React。
コロナで、漁業農産物などの取引量が30倍になったらしい

YouTube で有名な、雑食系エンジニア・KENTA のサロンでは、
Rails初心者用コースに、Docker, Heroku, CircleCI, Github Actions,
Reactではなく、Vue.js が入っているけど、

米国では、こんなにすごいポートフォリオを誰も作っていないと言ってる。
日本人の初心者は、10年以上のプロよりも上

それでも、Railsの年収は最高峰の1,300万円。
Node.js は900万円

ただし、米国はサラリーマンも全員がフリーランスで、いつでも解雇できる。
一方、日本は解雇できないから、滅多に雇わないので、
事前にすごいポートフォリオを作る必要がある

**デフォルトの名無しさん** · 2022/02/11(金) 14:56:51.31

でもKENTAってJavaScriptオフにするだけで突破されるような
セキュリティのセの字も知らんレベルの人間じゃん

**デフォルトの名無しさん** · 2022/02/11(金) 15:02:00.82

ケンタって人本当に元GREEなの？
知り合いに聞いてみようかな

**デフォルトの名無しさん** · 2022/02/11(金) 16:01:04.93

Rustおじさん「今日も爆釣りだぜ」

**デフォルトの名無しさん** · 2022/02/11(金) 16:17:02.90

おじさんは議論じゃなくてレスバトルしてるだけだからなぁ

**デフォルトの名無しさん** · 2022/02/11(金) 16:36:17.11

ケンタはバックエンドで日本一の凄腕エンジニアだからな
フロントみたいなゴミは一切やらないと明言している
だからフロントのセキュリティなどケンタのスキルには関係ない

**デフォルトの名無しさん** · 2022/02/11(金) 17:03:54.73

色々勘違いしてるみたいだけど、
ケンタってただの派遣だぞ

**デフォルトの名無しさん** · 2022/02/11(金) 17:33:56.67

>>579
まじ？

**デフォルトの名無しさん** · 2022/02/11(金) 17:38:20.83

ケンタは時給2万円以上
いまは会員数が多くて今年年収1億目指すといっていたからおそらく5000万はすでに稼いでいる

いま業界で活躍しているのはほとんどケンタのサロン卒だよ

**デフォルトの名無しさん** · 2022/02/11(金) 18:13:59.79

rustスレが完全に壊れたので助けてくれ
やはりここに逃げるしか俺の生きる道はないか

**デフォルトの名無しさん** · 2022/02/11(金) 18:34:43.29

敗走ですねわかります

**デフォルトの名無しさん** · 2022/02/11(金) 19:04:36.79

ちょっと覗いたけど全部自演でしょ

**デフォルトの名無しさん** · 2022/02/11(金) 19:57:12.67

あっちでもおじさんが荒らしてるのはわかった

**デフォルトの名無しさん** · 2022/02/11(金) 23:31:12.73

>>578
中身のない話してないのに肩書きだけで判断か？

**デフォルトの名無しさん** · 2022/02/12(土) 10:57:52.43

>>586
中身の話はサロンで話している
日本でケンタを超える技術を持っているのはおそらく3名ほどしかいないぞ
そもそも時給3万を超えるようなエンジニアが日本にはほぼ存在しないからな

**デフォルトの名無しさん** · 2022/02/12(土) 11:09:10.81

>>587
その3人は誰だよw

**デフォルトの名無しさん** · 2022/02/12(土) 12:12:32.50

堀江とひろゆき

**デフォルトの名無しさん** · 2022/02/12(土) 15:57:51.53

KENTA のサロンは、初心者から時給1万円を目指す人の話。
だからキャリアパスも、Ruby on Rails → Go のみ

米国年収が高いのは、Rails, AWS Solution Architect の1,300万円

Rust, Elixir も、普及のキャズムを越えなかった。
バックエンド言語で唯一越えたのが、Rails, Go だけ。
他のフレームワークは、シェアが少ない

KENTAが終わらせた言語が、PHP, Scala。
KENTAがオワコン認定したから、新規プロジェクトが無くなった

**デフォルトの名無しさん** · 2022/02/12(土) 16:29:09.49

今や大企業もケンタの動画を参考にIT投資を決めるようになってきているからな
すごい影響力だぞ

**デフォルトの名無しさん** · 2022/02/12(土) 16:35:59.50

おいおいKENTAキッズがおじさんからIDコロコロをラーニングしちまったぞ

**デフォルトの名無しさん** · 2022/02/12(土) 21:39:28.73

エンジニアに数学力が必要かってトピックでなんか言ってるけど
そうじゃないだろ感

**デフォルトの名無しさん** · 2022/02/12(土) 21:41:00.54

KENTAの動画みたことあるけど、
ほっぺに汚いシミのある作文読んでるだけおじさんって印象しかないわ

**デフォルトの名無しさん** · 2022/02/12(土) 22:04:47.06

ケンタが常々言ってるのはフロントみたいなどうでもいいことにエンジニア人生を掛けるなと言うこと
フロントはWebデザイナーと何も変わらない
エンジニアの中で最も底辺で能力がない奴がやることで金にはならない

時給1万を超えるにはバックエンドでRubyをやるべき
ケンタのサロンに入れば駆け出しエンジニアでも3ヶ月で60万はすぐに行くし80万へも最短の道で習得できる

**デフォルトの名無しさん** · 2022/02/12(土) 22:09:30.13

じゃあバックエンドでrubyやればいいじゃん
スレタイとなんの関係も無いよね

**デフォルトの名無しさん** · 2022/02/12(土) 22:11:03.92

わかったからスレチをやめろ

**デフォルトの名無しさん** · 2022/02/12(土) 23:15:03.33

無駄にクソ複雑と言われたり、クソ簡単と言われたりする、いまいち実態を把握されてない感のあるフロントエンドの世界。
理解する気のない外野がグダグダ言ってるだけなのかな。ピンキリ激しいのは事実だと思うけど。

**デフォルトの名無しさん** · 2022/02/13(日) 00:05:28.67

フロントエンドの皆さんはjavascriptのクラス設計はどうしてるの？
typescriptが2012年、ECMAScript6が2015年なので比較的新しい技術のはず。

このスレで「状態管理」という言葉が出てきて、あれ？と疑問が沸いたので…

**デフォルトの名無しさん** · 2022/02/13(日) 01:05:29.08

SPAだと状態管理というかある程度全体的に使えるデータが使えたらいいなと思うけど
結局画面ごとにAPI呼んでデータ取ってくるしそこまで巨大なアプリじゃなければ
状態管理するほどのデータは無さそうな気がするんだけどね
画面遷移でデータ渡せるし、グローバル的な管理って何か時代と逆行してるというか
トークンみたいなのぐらいしか使ってなかったわ

**デフォルトの名無しさん** · 2022/02/13(日) 07:27:08.24

>>599
このスレで状態管理と出てきたらほぼReactHookの事でクラスは関係無いと思って良いかと。
クラスについては、そこそこ便利なオブジェクトリテラルが有るからあんまり使い道がない。状態を持つオブジェクトを（何回も）生成する時と、組み込み型を継承して拡張するときくらいじゃなかろか。

**デフォルトの名無しさん** · 2022/02/13(日) 10:04:52.70

なんというか数学できないヤツってコードが汚いよね

**デフォルトの名無しさん** · 2022/02/13(日) 13:07:50.24

複雑なデータを表現する時はやっぱクラス便利よ
reactには直接関係ないけど

**デフォルトの名無しさん** · 2022/02/13(日) 13:09:23.18

たかがJavascriptごときがクラス扱うとか
正直なまいきだよな

**デフォルトの名無しさん** · 2022/02/13(日) 13:10:04.38

Reactの関数コンポーネントはどこで値を保持してるの？
グローバル変数？

**デフォルトの名無しさん** · 2022/02/13(日) 13:11:08.65

>>605
this内のクラスじゃねーのあれ

**デフォルトの名無しさん** · 2022/02/13(日) 14:27:27.69

>>601
私はjavascriptのオブジェクトリテラルは、任意の関数で弄れてしまうので構造体に過ぎないと感じるが…
連想配列でswtich文を代替できたので、構造体と等価ではないけど。

いつ、何が状態を変化させたのか追跡するのが面倒なので、規定のインターフェース(プロパティ・メソッド)で内部変数を操作し
内部変数の状態に応じて処理を変えたい時にインスタンス内で問い合わる…これがクラスの使い方の王道と解釈している。
交換する変数の型を明記したインターフェースを事前に規定するので、確実に状態が管理される。
クラス設計=状態管理　じゃないかな、と。

**デフォルトの名無しさん** · 2022/02/13(日) 14:47:03.56

>>607
> 任意の関数で弄れてしまうので構造体に過ぎない
その理屈で言うと、クラスで作ったオブジェクトもほぼ構造体です。

**デフォルトの名無しさん** · 2022/02/13(日) 15:43:17.61

>>605
コンポーネント内のプロパティに覚えてる

**デフォルトの名無しさん** · 2022/02/13(日) 17:40:21.65

>>607
コンテキストによって状態管理が表すものって変わるでしょ
あなたが言ってるのはクラスでの状態管理だしこのスレで言ってるのはアプリ内での状態管理
全く別の話

**デフォルトの名無しさん** · 2022/02/13(日) 18:17:18.26

>>607
このスレでOOPなんて語っても、誰もOOPなんてやってないから意味ないと思うぞ

**デフォルトの名無しさん** · 2022/02/13(日) 18:26:03.45

クラスベースだけがOOPじゃないぞ

**デフォルトの名無しさん** · 2022/02/13(日) 18:46:46.47

>>608
それは違う。
内部変数へアクセスする文字ラベルがインターフェースにリスト化・共有化されるので、
どのインスタンスがいつ内部変数を操作したのか追跡できる。
構造体はインターフェースを持たない。

>>610
別になる理由が分からない。
状態管理とは、どのレジスタにどんな数値が格納されているかを追跡できるかどうかじゃないの？
それはインスタンスの連携で構成されるアプリなので、不変だと思うが…

コンテキストの意味が不明瞭なので、状態も不明瞭なんじゃないかなと感じてます。

**デフォルトの名無しさん** · 2022/02/13(日) 19:10:21.77

>>613
内部変数というのはプロパティの事？
（C等の）構造体は実装やメモリ的にはpaddingで表現できるとしても、コード的には文字ラベルがあなたの言うところのインターフェースだと思うけど。
何れにせよクラスで生成したオブジェクトも、オブジェクトリテラルで生成したオブジェクトも、JSにおいてはほぼ等価です。
あるいは、ひょっとしてプライベート変数の話です？

**デフォルトの名無しさん** · 2022/02/13(日) 19:20:23.40

あー
これRustおじさんか

**デフォルトの名無しさん** · 2022/02/13(日) 19:28:10.07

あー、そうかも

**デフォルトの名無しさん** · 2022/02/13(日) 19:40:53.06

>>609
どういう仕組みで？

**デフォルトの名無しさん** · 2022/02/13(日) 20:07:13.39

React HooksのuseStateがどういう原理で実現されてるのか
https://sbfl.net/blog/2019/02/09/react-hooks-usestate/

**デフォルトの名無しさん** · 2022/02/13(日) 20:10:44.93

Rustおじさんは全部主観で決めてかかってくるから分かりやすい

**デフォルトの名無しさん** · 2022/02/13(日) 20:18:28.79

>>618
なるほど…よく読まんとわからんね
しかしよく理解できるな

**デフォルトの名無しさん** · 2022/02/13(日) 20:24:42.86

Reactのソースコード読まなくてもPreactなら簡単に実装されてるから簡単に読める

**デフォルトの名無しさん** · 2022/02/13(日) 21:18:37.07

ほう
そもそもリアクティブってどうやって実現してるんだか

**デフォルトの名無しさん** · 2022/02/13(日) 21:25:54.90

アクティブっていうぐらいだから
ActiveXを使ってるんだろ

**デフォルトの名無しさん** · 2022/02/13(日) 21:41:33.67

ニキビにも効きそう

**デフォルトの名無しさん** · 2022/02/13(日) 21:49:25.72

最近web系やってみようとフロントは何にしようかと思ってたけどいっぱいあるし
もうさくっといけそうなvueでいいや
フレームワーク的なところは使わんし

**デフォルトの名無しさん** · 2022/02/13(日) 21:50:34.47

何かイベント起こるとrenderに食わせた関数が呼ばれ仮想DOMツリーを作る、古い仮想DOMツリーとの差分のDOMを更新する。一つの変更が仮想DOM更新中に全部に波及してリアクティブな操作になる（ちょうてきとうな説明）

**デフォルトの名無しさん** · 2022/02/13(日) 22:38:35.53

>>626
なるほど
しかし仮想DOMツリーって複雑で膨大なのに速度的に問題なさそうですごいな
どこか階層の一部だけ更新されるとjsオブジェクトとしては全体を更新してるのかねえ
どうやって階層の一部だけ更新してるのかさっぱりわからんわ

**デフォルトの名無しさん** · 2022/02/14(月) 00:25:16.59

>>617
render時に対象のVNodeに保存されてるComponentオブジェクトを取り出し、useStateが呼び出された時はそのComponentのプロパティであるhooksという配列に値を設定される
配列なんだから呼び出された順番でインクリメントされる
これがHooks

**デフォルトの名無しさん** · 2022/02/14(月) 06:36:57.18

>>627
仮想DOMツリーが巨大かどうかは組み方に寄るし、（仮想DOM操作のような）実DOMに触れないJSで完結する処理はかなり高速。遅い処理はuseMemoとか使おう。

**デフォルトの名無しさん** · 2022/02/14(月) 11:16:31.13

kami.map((a, i) => (
<Kaminoke {...a} onNukege={() => handleNukege(i)} />
)

コンポーネントの再計算のたびにラムダが生成されてDOMの更新がかかってる？
回避方法がわからない

**デフォルトの名無しさん** · 2022/02/14(月) 11:25:46.39

>>630
useCallback

**デフォルトの名無しさん** · 2022/02/14(月) 11:29:37.10

>>631
ループ中はhook使えないのでわ？

**デフォルトの名無しさん** · 2022/02/14(月) 12:00:34.48

単体要素向けに作ったフックを配列向けに組み直すテクニックはありますか？

const foo = useSuperComplexFooManager()
↓
const foos = []
for (let i = 0; i < n; i++) foos.push(useSuperComplexFooManager()) // opps!!

useSuperComplexFooManagerは前任者が作ったものですがあまりにも難しくメンテナンスできません
この中身には手を入れずそのまま再利用して配列向けにしたいです

**デフォルトの名無しさん** · 2022/02/14(月) 12:40:27.43

俺だったら難しいこと考えずフックをコンポーネントでラップしループの中でコンポーネントを生成する

**デフォルトの名無しさん** · 2022/02/14(月) 13:05:27.03

それだと親から各hookのメンバにアクセスしたい時に困りますね

**デフォルトの名無しさん** · 2022/02/14(月) 14:03:26.14

const foos = [1...n].map(i => useSuperComplexFooManager())

でいけんじゃね？
useRefでこんなコード書いてるけど

**デフォルトの名無しさん** · 2022/02/14(月) 14:46:58.32

それはループと同じだと思うけど…いいの？

**デフォルトの名無しさん** · 2022/02/14(月) 15:19:06.67

ループNGルールは何が要求してるのかい？

**デフォルトの名無しさん** · 2022/02/14(月) 15:24:13.92

>>638
hooksは関数のトップレベルでないと正常な実行が保証されない

**デフォルトの名無しさん** · 2022/02/14(月) 15:24:34.35

https://reactjs.org/docs/hooks-rules.html
Don’t call Hooks inside loops, conditions, or nested functions.

ってことかと

**デフォルトの名無しさん** · 2022/02/14(月) 15:38:01.12

正直俺のレベルだとこんなくらいしか思いつかない

コンポーネント作ってpropsにタイムスタンプ用意して
変更されたらメソッド呼び出しみたいな……

type Props = {
timestamp: number;
}
const TempComponent: React.FC<Props> = (props) => {
const foo = useSuperComplexFooManager();
const { timestamp } = props;
useEffect(() => {
if (timestamp === 0) return;
foo.hoge();
}, [foo, timestamp]);
return null;
}
export default TempComponent;