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/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;

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

React.createRefならループ中に使ってもok?
だとしたらforwardRefでどうにかいけるかも

const TempComponent = forwardRef((props, ref) => {
const { hoge } = useSuperComplexFooManager();
useImperativeHandle(ref, () => ({
hoge,
}));
return null;
});

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

サンガツ
なるほどuseRefを使うとサブコンポーネント内部状態を参照できるのか
こりゃ便利だ

**デフォルトの名無しさん** · 2022/02/15(火) 09:56:36.41

親子の参照はtree構造では良く使うのにいちいちrefを経由しないと使えないのめんどくさいね
この辺りは他のフレームワークでよくある継承でコンポーネントを拡張する&親子の参照はただのインスタンス参照って方式のほうが直感的でわかりやすいかな

**デフォルトの名無しさん** · 2022/02/15(火) 10:23:25.29

普通だと親が子のデータを管理するからここまで手間は増えないよ
親のuseStateとContextで賄える

**デフォルトの名無しさん** · 2022/02/15(火) 10:31:18.31

普通ならそうなんだけどフックのトップレベル制約の都合で状態やプレゼンテーションロジックを子コンポーネントに預けないといけなくて辛いねという話の流れではなくて？

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

ReactNativeのSSRってのは無いのかな

**デフォルトの名無しさん** · 2022/02/15(火) 15:08:44.00

どういうこと？

**デフォルトの名無しさん** · 2022/02/15(火) 15:32:59.86

ロジックもレンダリングもサーバーサイドで完結できないかなって思った
ブラウザは機能不足、WebViewは遅い、なのでネイティブがいい
でもネイティブの酷い開発者体験はどうにかして回避したい、というワガママ

**デフォルトの名無しさん** · 2022/02/15(火) 16:10:32.61

ExpoのOTAアップデートが限界だろうね

**デフォルトの名無しさん** · 2022/02/16(水) 02:37:57.40

フロントエンド改修するのにReactかVue3で迷ってる
世の流れ的にいくならReactにしない理由はないと思うんだけどなんか好きになれんのよな

Vueはテンプレートの構文がわかりやすくて好きなんだけど、結局typescriptとの親和性の観点でtsxで書く流れになってきてるから、tsx使うならReactでよくねとも思う
Reactだと依存配列書き忘れとかも以外とやりがちで、Vueはcomputedがその辺全部いい感じにやってくれるから自分的な差はそこくらいかなあ

なんかここで選べみたいなのあります？

**デフォルトの名無しさん** · 2022/02/16(水) 02:39:11.36

サイコロ

**デフォルトの名無しさん** · 2022/02/16(水) 09:42:10.90

XML文字列をパースしてReactNodeを生成したい
EVALで出来ないかな

**デフォルトの名無しさん** · 2022/02/16(水) 10:02:19.35

つ DOMParser

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

vueはとっかかりはホント楽だよなあ
でも流れとしてはReactのがよさげっての悩みどころ

**デフォルトの名無しさん** · 2022/02/16(水) 12:05:58.95

Reactは状態管理のライブラリが～みたいなややこしそうな話題が飛び交い、触ってみると実際ややこしく感じるけど、最初が混乱すること多いだけであとはわりとぬるい。
ペットボトルみたく入り口だけキツイ。という個人の感想です。

**デフォルトの名無しさん** · 2022/02/16(水) 12:56:27.25

reactは選択の幅が広いからそれを楽と捉えるか苦と捉えるかの違いだろな
使ってみて合わなければ他の選択肢が沢山あるってのはやっぱ魅力よ

**デフォルトの名無しさん** · 2022/02/16(水) 13:03:27.73

reactは従来のコーディング習慣と違いすぎるのが嫌い
JSXリテラルはキモいけどまあシンタックスシュガーと考えればギリギリ許容範囲
しかしフックはIF分やループ中で使っちゃダメってのが非常識すぎて耐えられない

**デフォルトの名無しさん** · 2022/02/16(水) 16:53:40.65

>>658
使えますよ

**デフォルトの名無しさん** · 2022/02/16(水) 20:05:01.77

>>658
気持ちはわかる
確かにハマりどころは多い

**デフォルトの名無しさん** · 2022/02/17(木) 12:01:42.35

よわよわエンジニアの俺は無事vueを選びました

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

Svelteこそ易しいと思うんだけど、そうでもないんです？情報が少ないとか？

**デフォルトの名無しさん** · 2022/02/17(木) 12:41:38.57

なんだかんだでMVVMの方が好きだな
UIの振る舞いを記述するならオブジェクト指向の方がメンタルモデルとも一致するし実装上の変な罠も少ないから簡単でメンテナンス性も高い
レンダリングは確かに関数の方が簡単だけどね

**デフォルトの名無しさん** · 2022/02/17(木) 12:56:35.11

俺は関数畑なのでReactがしっくり来たけど、そのへんは人に寄るよね

**デフォルトの名無しさん** · 2022/02/17(木) 13:36:09.37

>>663
どのmvvmの事？

angular？
knockout？

**デフォルトの名無しさん** · 2022/02/17(木) 16:12:10.27

アトミックデザインってSPAに合わなくない？
カタログは綺麗になるだろうけどディレクトリがごちゃごちゃになる
普通に機能目的別にコンポーネント分けた方がスッキリする

**デフォルトの名無しさん** · 2022/02/17(木) 19:13:53.80

>>662
情報が少ないってのはかなりネックだね
それだけでもゼロベースから導入するのにそこそこ高い能力が必要になるからな

**デフォルトの名無しさん** · 2022/02/17(木) 19:25:43.29

ゼロベースで大変なのはJS系はどれだって同じだ

**デフォルトの名無しさん** · 2022/02/17(木) 19:47:58.98

タスクランナーとか周辺ライブラリ選定して、設定とか全部書いてた頃に比べたらだいぶ良くなった

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

多様性とか要らねえんだわ
tscを集中的に強化して他のエコシステムをはやく駆逐してよ

**デフォルトの名無しさん** · 2022/02/17(木) 22:32:33.59

>>662
趣味なら良いけど仕事では使いにくいね

**デフォルトの名無しさん** · 2022/02/17(木) 22:47:31.25

>>667
>>671
なるほどね～。まだまだこれからって感じか

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

Vueでspaログイン認証作ってるんだけどjwtの知見って必須なの？

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

フロントでログイン認証とかそんな恐ろしいことできねえわ

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

jwtなんかべつにいらんよ
ログインなんか普通になんもせずにPOSTしてるのがほとんどだよ

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

なんちゅうアドバイス...