React と Vue どっちが好きか
リーディングリスト消化
React と Vue、どっちが書いていて楽しいか検証してみた – KRAY Inc.
ここ最近体調のせいなのか分からないが頭が回らないので今日も比較的軽めに読めるものを読む。
React と Vue、個人的には React のほうが好きなんだけど、なぜ好きなのがが結構曖昧だったのでこの記事を読んで少しでも理由を言語化したいと思って読んだ。
この記事ではどちらかが好きでどちらかが嫌いというわけではないという結論だったが、実際自分も Vue がめちゃくちゃ嫌いというわけではなく、なんとなく React のほうが好きという感じなだけです。
記事内で挙げられていた比較は、
- 未定義の変数やコンポーネントを検出してくれない
- props の型定義/デフォルト値指定にクセがある
- 型定義/推論がうまく効かない場合がある
- ESLint との相性
- 子要素に要素を渡す難易度
とあったけど、全部 Vue の不満点なので、言われてみたらやっぱり Vue そんな好きじゃない感じがする。
JSX が宣言的に書けて良いぞ！という話はもちろんそのとおりだけど、とはいえ Vue の SFC に書く template も宣言的だと思うなあ。
ただ型定義などは同意で、Vue(というか Nuxt)を JSX で書けるのも知ってはいるんだけど、JSX 以外でも React のほうがいいな〜というところがいくつかある。
今は Vue を(新しくファイルやコンポーネントを追加する際は)Composition API で書いているのだけど、まず「setup の戻り値が template 内で使える」というのがちょっと個人的には好きではない。
template で使う変数や関数を Object に詰め込んで return するのだけど、それよりは JSX で宣言した React.Element を return するほうが直感的だなと感じる。これはコンポーネントが関数で、props などの引数を受け取り React.Element を返すというのが分かりやすいからだと思う。
それからこれは個人やチームによると思うんだけど、「setup 内部で定義して setup 内部の別の箇所から呼ばれない変数/関数」の書き方が自由にできてしまい return する Object の視認性が悪くなるのがあまり好きではないかも。
わかりにくいので例を書くと、
setup() {
const hoge = ref('')
return {
fuga: () => {
...
},
piyo: (hoge) => {
...
},
aaa: () => {
...
}
}
}
みたいな感じで、return する Object に直接関数を書いてしまうことができてなんかごちゃごちゃしてよく分からなくなる。これは本当に個人的な話なので同意してもらえない場合も結構ありそう。
別の意見として、「return の外で定義されていれば別の箇所から呼ばれていて、return 内で定義されていれば template の中でしか使わないことが明白になる」という意見があり、なるほどな〜と思う(理屈は分かる)
あと state に関して、useState で定義できる React に比べて、reactive や ref、toRefs などのなんで存在しているかよく分からない複数の定義方法で悩むみたいなのがあんまり好きじゃない。
同様に props も Vue の独特の書き方が煩わしいと感じることが多い。TypeScript で Props の型定義をしたほうが見やすいし分かりやすいのに、独自の定義方法があり、それがあまり分かりやすい感じもしないし書くときによく迷う。
React のほうは、エコシステムが成熟しているものの、公式が管理しているものというのが Vue のほうが多い気はする。特にスタイリングに関してはベストプラクティスが定まっていないけれど、Vue は SFC ファイルの style タグに書くことがほとんどだと思うので、その選定などは Vue のほうが楽かもしれない。
そしてこれは Nuxt になるんだけど、Nuxt は plugins という形で便利機能を提供してくれるんだけど、正直プロダクトがすでに存在する状態でチームにジョインするとどんな plugins があるかを頭に入れないとコンポーネントの中で「これどこで定義されてるの？」みたいな変数がいきなり出てきて探すのに時間がかかるのがつらかった(まあ宣言箇所が見つからない = plugins を探す、みたいなことがぱっと思いつけばいいんだけど)
Vue をサゲるだけになったので React をアゲる方向の記事を読んだ。
- シンプルであり、JS を JS のまま書ける
- hooks という API の存在
- React コアチームの先見性
この記事は大きく 3 つの理由が書いてある。
シンプルで「JS を JS のまま書ける」というのには強く同意で、Vue は「Vue のカスタマイズされた舞台上で Vue の作法を覚えてやる」感が強いんだけど、React は JS/TS の素材を最大限活かすみたいな感じの書き方なのが良い(伝われ)
コンポーネントが関数で、props などの引数を受け取り React.Element を返すというのをさっき書いたけど、そういう感じのこと。
あと hooks はたしかにめちゃくちゃすごいなと思う。超基礎的なことしか書いてないし知らないけど、それでも HoC とかでがんばってたときに比べたら大幅に分かりやすくなったなと感じる。まあ HoC を理解する必要があって高階関数やカリー化みたいな概念を理解できたというのもあるにはあるけど。
そしてさっき僕が書いた「スタイリングのベストプラクティスが決まってない」というのも、裏を返せば「各々の状況に応じて最適な手法を選択できる」ということで、これは React のシンプルさが為せることだなあと思った。
なんか話が色んな方向に進んだけど、結論としては僕は React のほうが好きということです。仕事でも React 書きたいなあ。