ReactJSとVueJSの比較
ラウンド１： create-react-app vs create-vue

あるReactJSの案件とVueJSの案件を経験したきっかけで、ReactJSとVueJSの差異について、いくつかの懸念点がある為、アウトプットで共有したいと思います。
今回はcreate-react-appとcreate-vueを比較していきましょう。
参照のソースコード^[1]は下記の参考記事に書いてあります。

1.インストールについて： 差異だけを比較してみます。

ReactJS	VueJS
インストールのコマンド: `npx create-react-app react-app --template typescript`	インストールのコマンド: `npm create vue@3`
内部に、react-scriptsを使用しています。	内部に、Viteを使用しています。
ルートのライブラリーをインストールするオプションがなくて、npmで後でインストールします。	ルートのライブラリーをインストールするオプションがあります。
ステート管理のライブラリー（reduxなど）をインストールするオプションがなくて、npmで後でインストールします。	ステート管理のライブラリー（Pinia）をインストールするオプションがあります。
E2Eのライブラリー（Cypress）をインストールするオプションがなくて、npmで後でインストールします。	インストールするオプションがあります。
一般的には、CSS-in-JSを使用します。npmでstyled-componentsをインストールします。styled-componentsはクラス衝突の現象がありません。	一般的には、CSS scoped、又は、CSS moduleを使用します。CSS scopedとmoduleはクラス衝突の現象があります[2]。
PostCSSはすでにサポートされています	サポートされますが、使用したい場合、PostCSSのconfigを追加する必要があります。

2.記法について：　差異だけを比較してみます。

ReactJS	VueJS
コンポーネントをクラスとファンクションで定義します。クラスのコンポーネントとファンクションのコンポーネントは一緒に使用できます。クラスのコンポーネントの中にはファンションのコンポーネントのフックは使用できせん。	コンポーネントをOptions APIとComposition APIで定義します。OptionsのコンポーネントとCompositionのコンポーネントは一緒に使用できません。現行のViteはCompositionしかサポートしていません。Optionsのコンポーネントのsetup()の関数の中に、Compositionの一部のフックが使用できます。
クラスのコンポーネントはクラスのextend、又は、HOC[3]の形で継続できます。クラスは継続できるから、バリデーションの処理などを共通した複雑なコンポーネントが作りやすいです。	コンポーネントはHOCの形だけで継続します。
.jsx/tsxファイルの中に、複数のコンポーネントを定義できます。プライベートのコンポーネント（export・共有したくないコンポーネント）は作れます。	.vueのファイルの中に、コンポーネントは１つしか定義できません。１つのコンポーネントに対した１つのファイルなので、プライベートのコンポーネントは作れません。 ※コンポーネントは全てファイル化にしないといけない為、チームの開発には共通のルールが必要です。
dynamic的なコンポーネントはサポートしていませんが、Javascriptでコンポーネントを切り替えられます。dynamicにコンポーネントは作成できます。コンポーネントの中に、別のコンポーネントが作成できます[4]。	dynamicなコンポーネントはサポートしています[5]。dynamicにコンポーネントは作りにくいです。Optionsのコンポーネントの中に、getCurrentInstanceの関数で、別のOptionsのコンポーネントが作れそうですが、Compositionのコンポーネントの中に、getCurrectInstanceが使えません。[6]
テンプレートの中に、Javascriptの関数を使用します。例：for, ifなどはJavascriptで操作します。	テンプレートの中に、ディレクティブを使用します。例：for, ifなどはv-for, v-ifのディレクティブで操作します。ディクレティブを使いこなせる為に、ディクレティブのAPIを習得する必要があります。
	Typescript使用の場合、コンポーネントを作成する為に、Optionsなら、defineComponentの関数が必須で、Compositionなら、definePropsの関数が必須です。

3.パーフォマンスについて：

• DOM描画の速度を測定した小さめな試験を行ってみました。
• 測定するタイミングはブラウザーのナビゲーションの開始からDOMロードの完了まで（アプリのマウントが完了した）です。ソースコードをビルドしてから、測定しました。
• 同じブラウザー（Chrome）のプライペートモードで、毎回キャッシュ削除してから実行しました。
• 測定した３つのコンポーネントはリスト(ul)です。
  • List1: 1階層のリストで１０アイテム（li）です。
  • List2: 2階層のリストで１００アイテム（li）です。
  • List3: 3階層のリストで１０００アイテム（li）です。
• 測定した結果は下記です。値は毎回の試験は変わることがありますが、イメージの為、平均の値を取りました。

	ReactJS	VueJS
List1 (1階層)	317 ms	279 ms
List1 (2階層)	340 ms	393 ms
List1 (3階層)	344 ms	1724 ms

• 上記の結果から見ると、DOM描画について、いくつかのイメージがつきました。
  • コンポーネントの階層の数が少ないの場合は、ReactJSよりVueJSの方が少し早いことです。
  • コンポーネントの階層の数が多ければ多いほど、VueJSよりReactJSの方が早いことです。

4.ステート管理について:

ReactJS	VueJS
Reactのstateは既存にはオブジェクトの第一階層のプロパティだけ比較して（浅い比較）、PureComponentを適用すれば、"==="で比較します。Reduxのstateの比較は"==="で比較しているから、stateを更新する時に、新規のオブジェクトを作る必要があります。 ※子コンポーネントが複数に再描画される現象があるので、パーフォマンスに著しく影響したら、useMemo [8] などのReactのフック、又は、Reduxのreselectを使用する必要があります。	Vueでも、Vuex/Piniaでも、既存にはstateのプロパティがネストのオブジェクトだったら、すべてのネストのオブジェクトを比較する為、stateを更新する時に、 直接にstateのプロパティを更新します。 ※stateの構造はシンプルの場合は問題がありませんが、stateの構造がとても複雑な場合（例：APIのレスポンスの大量のリスト、階層の多すぎるデータなど）、パーフォマンスに影響がある為、shallowReactiveなどの使用は必要になります。[7]
クラスなら、stateのプロパティで、ファンクションなら、useStateのフックで、コンポーネントのステートを管理します。	Optionsなら、dataのプロパティで、Compositionなら、変数の定義で、コンポーネントのステートを管理します。
Reduxはよく使用されています。最近はRecoilがあります。RecoilはReactの最新の機能に密結合があり、非同期の処理（非同期のリクエスト送信など）に重視しているライブラリーです。ReduxからRecoilに移行する必要がありません。Reduxはクラスとファンクションの両方をサポートしていますが、Recoilはクラスのコンポーネントをサポートしません。	Vuexはよく使用されています。最近はPiniaがあります。PiniaはVuexの次のバージョンの為、VuexからPiniaに移行する必要があります。Vuex/PiniaはOptionsとCompositionの両方をサポートしています。
Reduxはreact-reduxと一緒に使用します。	Vuex/Piniaは独立で使用します。
Reduxのstateを更新するのはactionを通る（dispatch)しかありません。	Vuexはmutationとactionでstateを更新しますが、Piniaはmutationを廃止して、actionだけでstateを更新します。
Reduxのミドルウェアの中に、stateを直接に更新できないし、次のstateの更新を停止できます。	Vuex/Piniaのプラグインの中に、stateを直接に更新できるし、次のstateの更新を停止させることができません。
流行っているredux-saga、redux-observableなどのライブラリーで、データフロー（actionの発信）が制御できます。	現在流行っているライブラリーがまだないようです。
流行っているredux-persistなどのライブラリーで、ローカルストレージのデータ移行が管理できます。	現在流行っているライブラリーがまだないようです。

5.ChatGPTによる比較:

• ChatGPTに質問した回答をそのまま書いておきます。

React JSとVue JSを比較してください。

React JSとVue JSは両方とも人気のあるフロントエンドJavaScriptフレームワークです。以下は両者の比較です。

・コミュニティと生態系
React JSはFacebookによって開発され、大規模でアクティブなコミュニティを持っています。Reactには、様々なライブラリやツール、さまざまなチュートリアルが存在します。一方Vue JSはEvan Youによって開発された比較的新しいフレームワークであり、Reactよりも小規模なコミュニティを持ちます。ただし、Vueには便利なプラグインやツールが多く存在しています。

・コンポーネントの作成方法
Reactは、UIコンポーネントをJavaScriptの関数やクラスとして定義し、その中にHTML構造とスタイルを記述することができます。Vueは、UIコンポーネントをHTMLテンプレートとJavaScriptコードの組み合わせで定義し、コンポーネント内に含まれるスタイルをCSSで記述することができます。

・パフォーマンス
Reactは、仮想DOMの概念を導入しており、大量のデータを効率的にレンダリングできるようになっています。一方、Vueは、シンプルなテンプレート構文を持ち、高速なレンダリングを実現しています。

・学習曲線
Reactは、関数やクラスを使用してUIコンポーネントを定義するため、JavaScriptの理解が必要です。Vueは、より直感的なテンプレート構文を使用するため、より簡単に学習できる可能性があります。

・選択可能なツール
ReactとVueの両方には、豊富なライブラリやツールが存在します。ただし、Reactには多数のライブラリとツールがあり、コンポーネントの選択肢が広く、柔軟性が高いです。Vueは、生産性を向上させるための多数の便利なプラグインが用意されています。

総合的に見ると、Reactは大規模なアプリケーション開発に適しており、より高度なJavaScriptスキルが必要です。Vueはよりシンプルなアプリケーション開発に適しており、JavaScriptの知識が浅い場合でも学習が比較的容易です。

参考記事：

1. 参照のソースコード
2. VueJSのCSS scopedのクラス衝突
3. HOC
4. ReactJSでdynamicにコンポーネントを作成する例
5. VueJSのdynamicなコンポーネント
6. VueJSでdynamicにコンポーネント作成
7. VuesJSのshallowReactiveについて
8. ReactのuseMemo

※ 本記事は各ライブラリーの現在のバージョンのみを比較しています。未来は更新が必要になるかもしれません。