2分でわかるVueとReactの比較
ずっとNuxt (Vue) を使ってきて最近Next (React) に乗り換えたので、
現時点で感じているVueとReactの違いをとっても簡単にまとめてみました
迷っている人は参考にしてみてください
見た目
詳しくはリンク先をご覧ください
ここでは雰囲気だけ
Vueは単一ファイルコンポーネント、
<template>
<div>
Hello, {{ name }}!
</div>
</template>
<script>
export default {
data() {
name: 'John'
}
}
</script>
<style scoped>
</style>
ReactはJSX
const Hello = () => {
const [name, setName] = useState('John')
return (
<div>
Hello, {name}!
</div>
)
}
export default Hello
CSS
VueのCSSはコンポーネントの<style>内に書くか、<template>内のDOMに直接style属性をつけるしかない
Reactのスタイルの書き方はたくさんあって、宗教戦争が起こっている(てきとう)
大きく分けると CSS in JS と CSS Modules で、この CSS in JS のライブラリがたくさん…
少し余談でした
学習コスト
どちらもコンポーネント単位で書いていくのでそれなりの設計を学ばねばならないのは同じですが、
Vueはpluginという概念があったり、ライフサイクルメソッドも多め
NuxtはVueの概念に加えてさらにディレクトリ構造の縛りもたくさんあるので、触ろうとしている方は覚悟してください
当然ながら、機能が多いと便利になるのと引き換えに学習コストは上がる
ReactはDOMを返す関数 (Functional Component) を書いてexportするだけでコンポーネントになって、モジュールの構成も普通にJSを書く気分で良い印象です
JSさえ知っていれば気の向くままに開発できそう
ドキュメント
Vueは公式ドキュメントが親切な印象
v3にはまだなさそうですが、v2は日本語にも対応しています
v3も日本語対応したようです
Reactは使ってる人がVueの4倍くらいいそう (npmのWeekly Downloads数比) なので、検索すれば大抵の問題に答えがありそう
でもGitHub star数で言えばVueの方が少し多いくらいなので、Vueの方がメンテが弱いとかはそんなにないと思います
状態管理
Vuexの方が簡単に理解できるのではないかと思いますが、どうでしょう？
そのせいもあってか、Reduxは学習コストが高い！とか言って敬遠されたりもするらしいですが、
言うほどでもないので将来に負債を残すことになるくらいならこれくらいの勉強していいと思います
「Reduxはわかったけど複雑で嫌だ」とか「どうしてもReduxが難しくてつらい」という方には
Redux Toolkitというものもあって、とっっっても便利なので是非見てみてください
TypeScript対応
描画の部分は結局ほとんどDOM操作なのでどちらもTS対応的には変わらないと思います
なので、ほとんど状態管理フレームワークの比較です
actionの指定が文字列になってしまっている状態管理フレームワークって割と多いんじゃないかと思っていて、Vuexもその例外でないのですが、Reduxは違います
actionがオブジェクトで、その生成をAction Creatorという関数が担っています (詳しくは上項)
ReduxがとてもTSと親和性が良いのでTSならReactかな、って感じ
Vueも悪いわけではないけど、Vuexをいじる度にasが出てくるのかぁって感じ
ひとことで言うと？
Vueはなんでもお膳立てしてくれる、Reactは自由度が高い
…裏を返すとVueはおせっかい、Reactは全部自分でやらなきゃいけない
まとめ
個人的にはプログラミング初中級者がVueで仮想DOMデビューをして、
飽きてきた頃にReactに入門するのがちょうど良いのではないかと思います
例えば、今までNodeでサーバー書いててフロントにも手を出してみようかな〜みたいな人はReactをおすすめします
サーバーで書いてたのがTSなら圧倒的にReactをおすすめします
Discussion