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

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

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

JWT使うなら有効期限短くしてちゃんと使い捨ててくれよ！

データ抜かれても良いならまぁわりと雑でも良いと思うけど、パスワードとか個人情報みたいなデリケートなもの出てきたらさじ投げてAuthサービスとか信用できるライブラリ使うなぁ。生兵法危ないし。

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

reactの野良OSS、品質どうにかならんもんかねぇ
公式がもう少ししっかり整備してくれんとダメだな

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

つうかね
野良の分際でreact-*だとかreact-native-*って名前はダメでしょ
企業か個人の制作ですってわかるようなワード入れようよ
ウェッブの連中は何もかもが無責任で適当すぎて頭にくるぜ

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

名前なんかつけたもんがちだからな
名前で管理すること自体が間違い

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

OSSなんだから信用出来るものを選定したりちゃんと機能するように環境を整えるのも技術者の腕の見せどころ。
それにRustだろうがGoだろうがPythonだろうがJavaだろうがライブラリやフレームワークの命名規則なんてけっこうガバガバだゾ

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

それが当たり前と考えてる時点でもうダメなんだろうな
エコシステムが洗練されなくなる
多くの開発者が興味とは全く異なる部分で苦しむことになる

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

自分で作れば？

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

Forkすれば？

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

>>651
React は海外に多い。JSX も便利

一方、Vue.js は、下のスレに書いたように、
YouTube で有名な、雑食系エンジニア・KENTA のRuby on Rails サロンで、
初心者の転職用に、React よりも、Vue.js を勧めている

日本では、Vue.js の方が、転職に有利

スレ立てるまでもない質問はここで 159匹目
https://mevius.5ch.net/test/read.cgi/tech/1644673480/73

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

OSSを利用していないものだけが石を投げよ

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

>>685
ケンタそれは悪手だぞ
いまからReactに変えろ

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

>>682
名前が早い者勝ちになる問題は解決策がないんよな

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

そこでangularですよ
何も考えなくて良かろう

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

>>673
これ言葉足りずだった。
railsとvueでspa作成しててそのログイン認証と状態保持にjwtをcookieに保管する方法してるんだけど、この形ってspa開発ではスタンダード？

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

なんでjwtを採用してるのかをちゃんと説明できるならいいんじゃない

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

べつにjwtでなくても良いし

**デフォルトの名無しさん** · 2022/02/19(土) 00:05:01.72

>>689
angularってもうGoogleの社員しか使ってるの見たことねえ

**デフォルトの名無しさん** · 2022/02/19(土) 00:08:54.14

Googleの社員なんて見たことない

**デフォルトの名無しさん** · 2022/02/19(土) 00:46:49.77

>>689
Angularいいよな

**デフォルトの名無しさん** · 2022/02/19(土) 00:49:53.85

angularの良い点を教えてくれよ
なんかもう終わったものとして扱われてるけど

**デフォルトの名無しさん** · 2022/02/19(土) 00:53:52.91

オリジナルの開発者が逃げた時に
もう終わってたでしょ

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

>>696
良く言えば破壊的変更が少なく安定してる
学習曲線が、、と言われるがちゃんと調べれば最適解がありほぼ悩まない安心感
ただもちろん世間じゃreact優勢だし無理に薦めない

**デフォルトの名無しさん** · 2022/02/19(土) 10:51:06.25

Better angularを目指したのがvue
だったはずなんだけどだけどなんでこうなった