【React VS Vue.js】Todoアプリを通じて見えてきたReactとVue.jsの違いとは？

今までVue.jsは少し触ったことがあったのですが、Reactについてはほとんど知見がなかったため、両者の違いを比較するため、Todoアプリを作ってみました。

この記事では、ReactとVue.jsを用いてTodoアプリ作成した上で気づいた様々な違いについて紹介します！

アプリ紹介

こちら今回作成したTodoアプリです。どっからどうみてもTodoアプリ。

React版

Vue.js版

基本的なCRUD処理に加え、ページを切り替えることで任意のステータスのタスクを一覧で見られるようになっています。

今回、実装したコードの紹介については割愛します。
興味のある方は下記のソースコードをご覧ください。

React版のソースコード
https://github.com/aki-nafu/react_todo
Vue.js版のソースコード
https://github.com/aki-nafu/vue_todo

作る上で感じた違い

コンポーネントの構造

まずはじめにそれぞれのフレームワークにおいて、典型的なコンポーネントを見ていきます。
上記の画像ではなんとなく構造が違うことがわかりますが、この中でざっくり要素を分けてみる以下のようになります。

Reactでは、要素としてマークアップとロジックしか持っていない一方で、Vue.jsではマークアップとロジックに加えスタイルも要素も備えています。

この違いは両フレームワークで使用されるファイル形式の違いによるものです。

Reactの場合

Reactでは、ファイル形式にJSX（JavaScript XML）が採用されています。

JSXはHTMLのようなタグ記法でコンポーネントを定義することができ、JavaScriptのコードとマークアップが混在することで、コンポーネントを直感的に理解しやすく、開発効率が向上するというメリットがあります。

JSXには、スタイルの記述は含めることができないため、Reactではスタイルを別ファイルで管理しています。

Vue.jsの場合

一方、Vue.jsでは、SFC（単一ファイルコンポーネント）が採用されています。

SFCは、HTML、JavaScript、CSSのコードを1つのファイルにまとめた形式で、Vue.jsのコンポーネントを定義することができます。

変数の状態管理方法

変数の状態管理方法も、両者で大きく異なっているため、紹介します。

Reactの場合

import { useState } from 'react';

function MessageInput() {
  // `message`という名前のstate変数を宣言し、初期値を空文字列にセット
  const [message, setMessage] = useState('');  //これ

  function handleChange(event) {
    // フォームの入力値が変更されたときに呼ばれる関数
    setMessage(event.target.value);
  }

  return (
    <div>
      <input type="text" value={message} onChange={handleChange} />
      <p>Message: {message}</p>
    </div>
  );
}

上記はReactで書かれたコードの一例です。

Reactでは変数の状態管理を行うために、useStateを用いています。

useStateフックで定義された状態変数は、Reactによって配列で管理され、その配列の要素が変更されると、Reactは自動的にコンポーネントを再レンダリングします。

上記の例では、変数messageの入力値が変更されると、handleChangeが呼ばれます。

その後、setMessageが実行され、messageの値が更新される仕組みです。

Vue.jsの場合

<template>
  <div>
    <input v-model="message" type="text" />
    <p>入力されたメッセージ: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() { //これ
    return {
      message: "", // フォームの初期値
    };
  },
};
</script>

一方Vue.jsでは変数の状態管理には、dataオプションが用いられています。

dataオプションで定義したデータは、テンプレート内で直接参照することができ、v-modelを使用することで、変数の状態を同期できます。

上記の例では、<input>要素のv-modelディレクティブを使用して、message変数とフォームの入力値をバインドしています。フォームの入力値が変更されるたびに、message変数の値が更新されます。その後、{{ message }}という式でmessage変数の値を表示しています。

調べてみた違い

ここまで、両フレームワークを使ってみて分かった違いについて述べてきましたが、調べる中で他にも興味深い違いを見つけました。

思想

一つ目は思想です。どんな言語やフレームワークもそれぞれに固有の思想によって設計されています。

React

Reactは「部分的な視点」（modular）と呼ばれる思想に基づいています。「部分的な視点」とは、アプリケーション全体を一つの大きな塊ではなく、独立した小さなコンポーネントに分割して構築する考え方を指しています。

コンポーネント内に HTML、JavaScript、CSS を分離し、それぞれ別々に設計しているのは、この思想によるものだと思われます。

Vue.js

一方、Vue.jsは「全体的な視点」（holistic）と呼ばれる思想に基づいています。

単一ファイルコンポーネント (SFC) という形式で、コンポーネント内にHTML、JavaScript、CSSを全て含めた一つの単位としてコンポーネントを捉えてるのはこのためです。

コミュニティ

二つ目はコミュニティの特徴です。

React

Reactのコミュニティは非常に大規模です。

というのも、ReactはFacebookが開発し、メンテナンスを行っているためです。

このため、Reactには多数の強力なライブラリやツールがあり、大規模で複雑なアプリケーションの開発に向いていると言えます。

Vue.js

Vue.jsのコミュニティは比較的小規模です。

Vue.jsはEvan Youによって開発され、オープンソースコミュニティによって主に支えられているため、企業主導のReactに比べると規模の小ささは否めません。

しかし、Vue.jsは開発者が作成したプラグインやライブラリなどのエコシステムが密接に結びついています。

これにより、すでに解決された問題の解決策を見つけやすいという利点があります。

使ってみた感想

いかがでしたでしょうか。今回はVue.jsとReactで同じWebアプリを作り、違いを比較してみました。

散々両フレームワークの違いを紹介した手前あれですが、実際に使用してみた感想としては、正直どちらもそれほど変わらないという印象でした。

もちろん、今回作成したWebアプリはそれほど複雑な構造はしていないため、それぞれのフレームワークの特性が全て表現されていないだけかもしれません。

しかし、多少の記述の違いはあれど、機能の実現プロセスはそれほど変わらないように感じました。

それぞれのフレームワークには、その得意分野や特性があり、それによってどちらを選択するべきかが変わってくると思います。今回のように、実際に手を動かして比較してみることは、どちらのフレームワークが自分にとって適しているかを見極める上でとても有益だと感じました。