なぜVueを始めるべきか:結論（まとめ）
前置き
前回の記事までVueとReactをアーキテクチャー、データバインディング、文法と言う面で比較して見ました。
最後に三つの内容を簡単にまとめて
なぜVueを使うべきかと言う記事の結論を出したいと思っています。
完璧な記事ではないと思いますが、
少しでもVueについて理解ができたらこの記事を作成した価値は十分あると思います。
まとめ：アーキテクチャー
まずはアーキテクチャーからです。
Vueの場合はMVVC(Model-View-ViewMode) と言うアーキテクチャーを採用しています。
おそらくReactがフレームワークではなくライブラリーのため、
Reactの公式ドキュメントではどんなアーキテクチャーを採用しているか確認できませんが、
過去のアーカイブを確認すると最初はMVCを、
その後何かの問題によりFlexと言うパターンを採用していると確認できます。
VueとReactのアーキテクチャーの違いはViewとModelの間のデータ交換を
単方向データバインディング(One-way Data Binding) でするか
双方向データバインディング(Two-way Data Binding) でするかのソリューションの違いがあります。
バインディングした前提で
両方Modelのデータが更新されたら自動でViewに反映されますが、
逆にView側の動作によってデータ更新が必要な場合のソリューションが違います。
詳細な内容は過去の記事で説明したので、以下の記事をご覧ください。
まとめ：データバインディング
二つのデータバインディングについては
ModelからViewまでは自動でデータが反映されますが、
ViewからModelまで、
つまりブラウザーの上で操作がありデータが変わった場合、
データ交換を単方向データバインディング(One-way Data Binding) を採用している
Reactは明示的にModelで伝える必要があり
Vueはフレームワークの側で自動で更新してくれます。
結論的にはReactはModelに伝えるための、別のコード作成が必要です。
詳細な内容は過去の記事で説明したので、以下の記事をご覧ください。
まとめ：文法
・・・
export default function App() {
・・・
return (
<div className="App">
<input value={input} onChange={(e) => setInput(e.target.value)} />
<!-- React IF文：表示・非表示変数がTrueなら表示、Falseなら非表示する -->
{isShowBlock && (
<div className="Wapper">
<!-- React For文：map関数-->
{componentName.map((value, index) => (
<SimpleArea input={input} name={value} key={index} />
))}
</div>
)}
</div>
);
}
みなさんがご存知している通りHTMLはプログラミング言語ではないため、
If文とFor文が存在しません。
そのため、If文が必要である場合JavaScriptの文法である
条件 (三項) 演算子、For文が必要場合Map関数を使う必要があります。
<template>
<div>
<input v-model="input" />
<!-- Vue If文：表示・非表示変数がTrueなら表示、Falseなら非表示する -->
<div class="Wapper" v-if="isShowBlock">
<SimpleArea v-for="(item, i) in componentName" :key="i" :input="input" :name="item" />
</div>
</div>
</template>
・・・
Vueの場合、If文はv-if,For文はv-forがあります。
さらにタグ内に使えるのでコードの可読性も高めれます。
結論的にはReactの場合は基本JavaScriptに慣れてないと
ラーニングコストが増加する可能性が高いです。
詳細な内容は過去の記事で説明したので、以下の記事をご覧ください。
なぜVueを始めるべきか：結論
プロジェクトを始まる前にどんなプログラミング言語を使うか悩んでいると仮定して見ましょう。
バックエンドとは違って、フロントエンドはJavaScriptしか選択肢がないので
どんなJavaScriptフレームワーク を使うか選択しなければなりません。
その中で一般的にはReactを選択する場合が多いです。
それはReactが圧倒的にReactがいいものって言うことではなく、
Reactが先に先占したので、その分コミュニティーが多き
Google内記事数も多いし、React関連の色んなライブラリーも多いからです。
このせいで一般的にはReactを選択するほうがリスクを減らせます。
開発内で現れる問題・バグなどの解決方法は検索すれば出ますし
場合によってはもう誰かが作ったライブラリーが存在して
プロジェクトにインストールし使うことだけで解決できる場合もあります。
ただ、Reactの場合はライブラリーって言うものなので
基本的にJavaScriptに慣れてないとコードの理解が難しいです。
そのため、どっちを選択するほうが良いかについては
以下のことを考える必要があります。
- JavaScriptに慣れているメンバーが少ないか
- 早めにプロダクトを作りたいか
- コードの可読性が大事か
JavaScriptに慣れている人がいないほど、早めにプロダクトを作りたいほど、
コードの可読性が大事なほど、Vueを利用するほうがメリットがあると考えられます。
Discussion