1. はじめに 
フロントエンドのJavaScriptフレームワークは，React, Vue, Angular, jQueryなど様々ありますが, 今現在(2023/07/18)においては, ReactとVueが人気を占めています．
しかし，Reactは学習コストが高く，フロントエンド初心者には挫折してしまう原因になりかねません(筆者も一度Reactで挫折しました
)．そのため，この記事では初心者になぜVueがおすすめかということを，Reactと比較しながら述べていきたいと思います！
1-1. 比較する対象について
==== React =====
React 17.0.1
==== Vue ====
Vue 3.3.4
今回比較していくのは以下2つです
- Reactは人気が上昇した大きな要因である，関数コンポーネント
- Vueは 一番書きやすいとされる，Options API
- (Composition APIは賛否両論あるので今回は無視します)
2. Vueがおすすめな理由 4選🐳
2-1. どこに書けばいいのかが決まっている
Vueの魅力はやはり，Object形式で書けるところでしょう.
Object形式で書けるということは，Keyを見ればそのValueが何のためにあるのかがわかるということです．
React
以下のコードをご覧ください
const App = () => {
//State管理，メソッドなどなんでもここに書ける
const [num, setNum] = useState(0);
const onClickButton = () => {
setNum(num + 1);
};
//ここでHTML形式を返り値で返す
return (
<div className="App">
<p>{ num }</p>
<button onClick={ onClickButton }>+1</button>
</div>
);
};
このように場所が決まっているのはHTMLを返り値で返すということだけで，その他は基本的には関数内ならどこに書いてもいいという風になっています．
どこに書いてもいいというのは上級者はうれしいかもしれませんが，初心者にとっては混乱してしまう要因になりえます
Vue
以下のコードをご覧ください
<template>
<div>{{ num }}</div>
<button v-on:click="onClickButton">+1</button>
</template>
<script>
export defualt {
data() {
return {
//ここにStateを記述
num: 0,
}
},
methods: {
//ここにメソッドを記述
onClickButton() {
this.num ++;
}
}
}
</script>
このようにどこに何を記述すればいいかが決まっています！
dataの中には状態を記述，methodsの中にはメソッドを記述などと，フレームワークがあらかじめ決めてくれているので，役割さえ知っていれば混乱しにくくなっています！
2-2. 再描画(再レンダリング)を気にしなくていい
フロントエンド開発において，一番意識しなければいけないことは再描画(レンダリング)のタイミングです！
つまり，画面が書き換わるタイミングがとても重要なのです！
ここに対しては，結構な違いがありますが，Vueの方が気にしなくていいような仕様になっています！
React
Reactが再レンダリングされるタイミングは大きく分けて以下の3つの時になります
- stateが更新
- propsが更新
- 親コンポーネントが再レンダリングされたとき
ここで注意していただきたいのは子孫コンポーネントすべて再レンダリングされてしまうという点です
つまり思わぬタイミングでの再描画が発生してしまい，重くなってしまう可能性があります...
この対策としてわざわざ，メモ化や副作用を調節していく必要があります．
(追記: 2023/07/18)
Reactも最新のver.18にて再描画方法に改善があったそうです．
少し差が縮まったのかもしれませんね
Vue
Vueが再レンダリングされるタイミングは
- 監視対象の変数が変更
-
dataやcomputedなど
-
- propsが更新
一見同じように見えますが，Vueは 変更が影響を及ぼす部分だけが再描画されるようになっており，再レンダリングの必要のない子コンポーネントなどは再レンダリングされないようになっています！
これはVueがコンポーネントの依存関係をトラッキングしてくれているからです！
紛らわしくなくていいと思いませんか？ 
2-3. ドキュメントが読みやすい
これは正直好みにはなりますが，個人的にはReactの公式ドキュメントはやや直訳チックに感じます．
それと比べると，Vueの公式ドキュメントは自然な日本語となっており，日本人にとってまだ読みやすいものになっています．
以下の項目において見比べてみても，少しReactが不自然になっています．(謎に高圧的ですよね
)
React
Vue
2-4. CSSが書きやすい
これは The Vue!! という感じの特徴になります！
比べてみましょう！
React
ReactでのCSSによるデザインは長年議論がなされており，最適解は見つかってない状況です．
ライブラリ等によって変わってきますが，デフォルトでは通常のHTMLファイルのように，CSSファイルを外部に書いてインポートする方法や，オブジェクト形式で記述する方式があります．
#外部ファイルとして記述する方法
.green {
background-color: green;
}
const App = () => {
const blue = {
backgroundColor: blue,
};
return (
<>
<div className="green">green</div>
<div style={blue}>blue</div>
</>
);
};
このように,外部ファイルから普通のCSSをインポートして使うか，JSファイル内に記述してオブジェクト形式にするかがデフォルトでは主流のやり方になっています．
方法がたくさんあって初心者は混乱しますし，JSファイル内に記述した場合，background-colorではなくbackgroundColorとキャメルケースしなければならないので，より混乱の要因になります．
Vue
まず，必ず1ファイルに収めることができます！
.vueファイルにそのまま<style></style>タグに 通常の書き方でCSSを記述することができます！
<template>
<div class="red">red</div>
</template>
<style>
.red {
background-color: red;
}
</style>
さらに，styleタグにscopedの属性を付けることで，子や親のコンポーネントに影響を及ぼさずにCSSもかけるため，書きやすさで言えばダントツでいいです！
3. まとめ
いかがだったでしょうか？
本記事では初心者にとってVueがおすすめな理由を述べてきました．
もちろん，フレームワークなので状況に応じて適切なものを利用していく必要があります．
フロントエンドに慣れたら，Vueの次にReactに挑戦してみてはいかがでしょうか？
最後までご覧いただきありがとうございました！🙌
参考
【React】再レンダリングの仕組みと最適化
Reactにおける「副作用」とは？
Vue.js公式ドキュメント: 他のフレームワークとの比較