React公式チュートリアルをVueでも書いて比較してみた

はじめに

ReactとVueはどちらも人気のJavaScriptライブラ/リフレームワークです。
それぞれメリット・デメリットがあり、フロントエンドの技術選定の際にどちらを採用するか悩むことも多いと思います。

この記事では、Reactの公式チュートリアルである「三目並べ」をVueでも書いてみて、ReactとVueのコードを比較してみます。

Reactの公式チュートリアルはこちらです。

チュートリアル：三目並べ – React

The library for web and native user interfaces

https://ja.react.dev/learn/tutorial-tic-tac-toe

Reactの公式チュートリアル 三目並べ

作成したコードについて

チュートリアル内ではJavaScriptは単一ファイルになっていますが、今回は比較しやすくするためにReactもVueもコンポーネントごとにファイルを分けます。

ReactはCodeSandbox、VueはVue SFC Playgroundにコードを置いているので、すぐに動作確認できます。

バージョン

コーディング時のバージョンは以下の通りです。

Reactのコード

CodeSandbox

Vueのコード

Vue SFC Playground

コード比較

コンポーネントごとにコードを比較してみます。

App.js/App.vue

App.js/App.vueは、エントリーファイルとなるコンポーネントです。
ゲーム全体で使用する変数もここで定義しています。

Reactコード

Vueコード

ReactでuseStateを使用している変数は、Vueではrefを使用して定義しています。
また、計算して算出される値はVueではcomputedを使用して定義しています。

HTMLの記述はReactではJSX、VueではHTMLベースのテンプレート構文になっています。

Board.js/Board.vue

Board.js/Board.vueは、三目並べの盤面を定義するコンポーネントです。

Reactコード

Vueコード

コンポーネントの引数は、ReactではJavaScriptの関数と同じように記載できますが、VueはdefinePropsとdefineEmitsという構文で記載する必要があります。

Square.js/Square.vue

Square.js/Square.vueは、三目並べの盤面内のそれぞれのマスを定義するコンポーネントです。

Reactコード

Vueコード

こちらもコンポーネントの引数の定義方法に差があります。

Moves.js/Moves.vue

Moves.js/Moves.vueは、ゲーム履歴の表示と履歴へ遷移するためのボタンを表示するコンポーネントです。

Reactコード

Vueコード

Reactは任意の位置でJSXを記載できるため、簡潔なコードになっています。

Moves.js/Moves.vue内のボタンをクリックすると、App.js/App.vueのcurrentMoveの値が変更されて、過去の手番に戻ります。
上記のコードではどちらも親コンポーネントの関数を子コンポーネントで実行することによって親コンポーネントの変数を変更しています。

Vueの双方向バインディングについて

Vueの場合は双方向バインディングが可能なため、別の記載方法も考えられます。
v-modelとdefineModelを使用すると子コンポーネント側で親コンポーネント側の変数を直接変更できます。

以下がコードの例です。

双方向バインディングはメリット・デメリットがあるため、実際に使うかは検討が必要です。

React/Vueのコードの違いを考察

ReactとVueのコードを比較して分かった両者の特徴を記載してみます。

React

Vue

コードを比較してみると、ReactはJavaScriptが軸となっており、VueはHTMLを軸としている印象を受けました。
プロジェクトやメンバーの技術スタックが、JavaScriptとHTMLどちらに寄っているかも選定の基準の一つとするのもありかもしれません。

まとめ

この記事では、Reactの公式チュートリアルである「三目並べ」をVueでも書いてみて、ReactとVueのコードを比較しました。
ReactもVueもメリットがあるため、プロジェクトやメンバーに応じて選定を行うのが良さそうです。

参考になれば幸いです。