どのWebフロントエンドフレームワークから始めるべきか？（考察編） #React

それでは前回の『どのWebフロントエンドフレームワークから始めるべきか？（歴史編）』に引き続き、Web アプリ開発を始めたばかりの人がどのフレームワークから始めるべきか考察を行います。

結論から言えば、単なる学習目的でReact、Vue.js、Svelteの三つの中から選ぶのであればどれから始めても大きな違いは無いと思われます。主な理由は以下の通りです。

DOM操作を効率的に行うフレームワークであるという点は共通しているから
手続き型と宣言型を組み合わせたパラダイムが共通しているため、後々転向するとしても順応しやすいから
どれも日本語のドキュメントが充実しているから
どれもTypeScriptに対応しているから

ですが、どれを選んでも変わらないと言って終わらせてしまうと元も子もないため、この記事ではこの条件ならこのフレームワークという提案を行いたいと思います。

比較表

まずは各フレームワークの比較表をご覧ください。

カテゴリ	項目	React	Vue 3	Svelte
ドキュメント	公式	〇	〇	〇
	公式(ja)	〇	〇	〇
	チュートリアル	〇	〇	〇
	チュートリアル(ja)	〇		〇
	ビデオ学習		〇
	その他	Next.js Redux	Nuxt.js Nuxt.js	SvelteKit
コミュニティ	Qiita 記事	12,675	12,012	236
	note 記事	1,197	949	43
	Zenn 記事	2,545	885	100
基本仕様	パラダイム	手続き+宣言型	手続き+宣言型	手続き+宣言型
	主な宣言型言語	JSX	Vue Template	Svelte Template
	レンダリング	React Fiber	Virtual DOM	非Virtual DOM
	TypeScript 対応	〇	〇	〇
	ロジック再利用	React Hooks	Composition API	store reactivity
ライブラリ	プロジェクト作成	create-react-app	create-vue	create-svelte
	状態管理	Redux Recoil	Vuex
	UI コンポーネント	MUI	Vuetify	Flowbite Svelte
	拡張フレームワーク	Next.js	Nuxt.js	SvelteKit
その他	統合開発環境	VSCode	VSCode	VSCode
	デバッガー	Chrome拡張	Chrome拡張	Chrome拡張
	StackBlitz	〇	〇	〇
	CodeSandbox	〇	〇	〇
	Vercel	〇	〇	〇

※非公式ドキュメントの記事数は 2022 年 8 月時点の情報です。

なおGitHubのスターや貢献者数で比較することも可能ですが、バージョン違いやフレームワーク内の各機能でリポジトリが分かれおり客観的な指標として扱いづらいと判断したため上記の表には掲載していません。

各項目比較

以降は、主にこの比較表に書かれている情報に基づいて考察します。比較項目は以下の通りです。

ドキュメント
学習曲線
需要
機能
UI コンポーネント
エコシステム

ドキュメント比較

フレームワーク選びにおいて、ドキュメントがどれだけ充実しているかは重要なポイントになると思われます。
各フレームワークのドキュメントを比較した評価を表に整理しました。★が多いほど高評価となっています。

	React	Vue.js	Svelte
公式ガイド	★★★	★★★	★★☆
公式ビデオ	☆☆☆	★★★	☆☆☆
公式チュートリアル	★★☆	★★☆	★★★
リファレンス	★★★	★★★	★★★
コミュニティ情報	★★★	★★☆	★☆☆

※筆者による主観的な評価であること、2022年8月時点の評価であり今度変動する可能性が高いことについてご注意ください。
※コミュニティ情報とはQiitaやStackOverflowなどに掲載されている非公式情報を指しています。

どのフレームワークも基本的な公式ガイド、公式チュートリアル、リファレンスは充実しています。初歩的なWebアプリを作る分には困ることは無いと思われます。
各フレームワークのドキュメントの特徴について補足説明します。

React:
コミュニティ情報が非常に多いです。フレームワーク自体の需要が多い（後述）こともあり、コミュニティが最も活発です。Qiita、note、Zennのどの媒体でも最も多くの記事が掲載されています。そのためフレームワーク利用の研究が最も進んでおり、フレームワークに踏み込んだ内容であればあるほど優位にあると思われます。

Vue.js:
大きな特徴としてVue Masteryという公式ビデオガイドが挙げられます。どのビデオも図・アニメーション・資料が凝っており、理解しやすいように整備されています。公式がワンストップで豊富な学習コンテンツを提供している点についてはとても安心感を覚えます。ただしVue Masteryの言語は英語であり、日本人の方にとっては少し難しいかもしれません。

Svelte:
他の二つとは異なりREPLによるチュートリアルがメインコンテンツとなっています。REPLによるチュートリアルが網羅的に揃えられているため、Vue.jsとは異なるベクトルで安心感があります。
ただし、他の二つと異なりTypeScriptによるコーディングのガイドが整備されていません。現在はIssueとして登録されています。また、後発のフレームワークのためコミュニティ情報はまだまだ少ないのが現状です。

※REPLはRead-Eval-Print Loopの略で、Webブラウザで即時実行できる環境の事です。

フレームワークごとに異なる長所を持つため、どのフレームワークのドキュメントが一番優れているという評価は難しいです。

学習曲線比較

どれだけ時間をかけて学習すれば、どれだけ習得できるのか描いたチャートのことを「学習曲線」と呼んでいます。学習曲線の形状によってモチベーションやスキル習得の時間に影響するためフレームワーク選びの重要な指標となります。

まずは、学習のステージを以下の項目に分解します。

小さなアプリをインターネットに公開できる
TypeScriptとフレームワークの機能をある程度理解し本格的なアプリ開発に貢献できる
フレームワークのベストプラクティスやエコシステムを理解している

また、前提条件は以下の通りです。

MDNのJavaScript中級編のレベルを理解している
初めてWebフロントエンドフレームワークを使う
初めてTypeScriptを使う

これらを踏まえた上で各フレームワークの学習曲線のイメージを描いてみました。
Reactは初期段階の進みが遅く後期段階は早い、Svelteは初期段階の進みが早く後期段階は遅い、Vue.jsはその中間という曲線を描いています。

※この学習曲線の根拠は、客観的かつ定量的な指標に基づいたものではありません。各フレームワークの定性的な指標から描いたものです。また、たった二つの指標にのみ基づいています。定量的な評価はかなり時間がかかるため単純な評価になってしまった点についてはご了承いただければ幸いです。

以下、このような学習曲線を描いた理由を説明します。次の水平線まではフレームワークの内容に踏み込んだ内容になります。概要は後ほど整理していますので、未経験者の方は読み飛ばしてください。

React:
React 16.8以降React Hooksが追加されコンポーネントの分離とロジックの再利用が加速しました。現在はReact Hooksを使ったコーディングが主流ですが、この機能の分かりづらさが理解の進みに影響すると思われます。
React Hooksを使ったプログラミングでは主にuseStateやuseEffectを使うことになりますが、この挙動があまり直感的ではありません。
以下のコードはReactによるレンダリング（≒DOM操作）が終わった後に、ページのタイトルを更新するコードです。useEffect関数にパラメータとして指定した関数内にページのタイトルを更新するコードが書かれているわけですが、useEffectという名前からは想像しづらいのではないでしょうか？また、タイトルを変更する処理をuseEffectなど使わず直接書かないのか？という疑問が浮かぶかもしれません。

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

※このコードは https://ja.reactjs.org/docs/hooks-effect.html から引用しました。

他にもuseEffectの呼び出されるタイミング、useEffectが無限ループしないための制御、useStateに指定するパラメータのスコープの配慮等、注意すべきポイントが多数あります。直感的ではない、注意点が多い等の要素は、初心者のモチベーションの低下に影響すると思われます。

反面、コミュニティの情報が多いためReact Hooksの注意点やパフォーマンス改善のベストプラクティスの情報には困らないと思われます。

これらの状況を踏まえて、前半は進みが遅く、後半は進みが早いという曲線を書きました。

Vue.js:
Vue.jsはReact Hooksと同じ目的を持つComposition APIが追加されたため、潜在的にはReactと同じような課題を抱えています。ただしComposition APIの方が読みやすさという観点について改善されているように思います。Vue.jsの開発者であるEvan You氏はTwitterでReact Hooksを好意的に捉えていること、ただしいくつか改善できる点があることを2018年に発言しています。
以下のコードはComposition APIを使ったロジックコンポーネントのサンプルコードです。ReactのuseEffectはコンポーネントがマウントされた時も、変数が更新された時も同様に使用されますが、Vue.jsはonMountedやwatchのように直感的な命名になっています。

// src/composables/useUserRepositories.js

import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch } from 'vue'

export default function useUserRepositories(user) {
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(user.value)
  }

  onMounted(getUserRepositories)
  watch(user, getUserRepositories)

  return {
    repositories,
    getUserRepositories
  }
}

※このコードは https://v3.ja.vuejs.org/guide/composition-api-introduction.html から引用しました。

また公式ドキュメントにおいて、従来の書き方 (Options) とComposition APIの書き方をスイッチ一つで切り替えられるようにするなどの配慮も見られます。
対してコミュニティ情報についてはReactに一歩譲る状況です。例えば2022年8月時点のQiita記事においてReact Hooksは約2,000件、Composition APIは約600件でした。

Svelte:
Svelteは最もシンプルに書くことができます。例えば変数の値が変化した時にログを出力するロジックを書く場合Svelteが最もシンプルです。例えばcount変数が変化したらログ出力を行う場合、以下のコードのように書きます。ReactやVue.jsの場合はuseEffectやwatchなどの関数を使う必要があります。

<script>
let count = 0;
$: console.log('the count is ' + count);
</script>
<button on:click={() => count++}>button</button>

$:で始まる文はReactive Statementと呼ばれています。Svelteでこのコードをコンパイルすると、countを監視して値が変化したらconsole.logを実行するコードを生成します。上記のコードはSvelteのREPLでお試しください。コンパイル後のコードを確認することもできます。

高度に抽象化されており、簡単なWebアプリを作るだけなら非常に書きやすいのですが、細かい挙動に気を配らなければならない場合は踏み込んだ調査が必要になると思われます。しかし、コミュニティの情報は他の二つと比べるとまだまだ少なく、既存の情報からすぐに解決に結びつかないケースがあるかもしれません。

学習曲線について評価を整理すると以下の様になります。

React

頻繁に使用するReact Hooks機能が直感的ではなく、正しい使い方を把握する必要があり、理解が進みづらい
コミュニティが大きく情報が豊富なためベストプラクティス等の調査に困らない

Vue

Composition APIというReact Hooksに類似したものがあるが、直感的な命名がされている
公式ドキュメントにComposition APIへの配慮が見られる
コミュニティの規模はReactより小さくSvelteより大きい

Svelte

React Hooksと同じようなことをReactやVue.jsよりもシンプルに書くことができる
コミュニティの規模が最も小さいため、踏み込んだ調査が難航する可能性がある

今回は主要機能の一つとコミュニティの規模のみに着目して学習曲線を評価しました。実際にはドキュメントの充実度合いやエコシステム等様々な要素が影響するため、学習曲線を客観的に評価するのは難しいと思われます。そのため、上記の評価は一つの仮説程度に捉えていただければと思います。

需要比較

フレームワークを選択するにあたり、世の中でどれだけ使われているのかという点は非常に重要な指標だと思われます。

Sacha Greif氏が実施されたThe State of JS 2021の調査結果によると各フレームワークの利用率の回答結果は以下の通りでした。Reactの利用率が多数となっています。

フレームワーク	利用率
React	80%
Vue.js	51%
Svelte	20%

また npm trends にて各フレームワークのダウンロード数の推移を確認したところ、
以下のチャートを得られました。こちらもReactのダウンロード数が多数となっています。

※ 上記の画像は https://npmtrends.com/react-vs-svelte-vs-vue から引用しました。

ここまでの結果から、全世界的に見ると React が圧倒的な需要を占めていると思われます。

より多くの実態を把握するために、私の周囲の状況を確認するアンケートを実施しました。アンケートの対象者は、職場にて私が所属する部門の方々です。回答結果は以下の通りです。

Q. 以下の項目から見聞きしたものがあるものを選んでください (複数回答可)

項目	回答数	割合
jQuery	24	24%
Angular	23	23%
React	23	23%
Vue.js	25	25%
Svelte	7	7%

Q. 以下の項目から業務で使用したことがあるものを選んでください (複数回答可)

項目	回答数	割合
jQuery	12	34%
Angular	8	23%
React	5	14%
Vue.js	10	29%
Svelte	0	0%

私の周囲の実態としては Vue.js の方が多いという結果になりました。組織全員から回答を得られたわけではないので実態を正確に反映している訳ではありません。しかし、肌感覚としても Vue.js の方が多いとは感じています。
私の周囲では Svelte の採用事例を見つけることができませんでした。Svelte の採用例が挙がり始めるのは恐らく SvelteKit が正式リリースされ、品質が安定していることが確認されてからになると思われます。

これらの結果から、各フレームワークの直近の需要は以下のような状況だと思われます。

フレームワーク	需要
React	全世界的に見ると最も高い。
Vue.js	日本国内で見ると React に迫る可能性がある。
Svelte	他二つに比べれば需要は微々たるもの。

機能比較

「状態を監視してDOM操作を自動的に行う」という観点については、どのフレームワークも同じような機能が備わっており水準としては十分近いレベルにあると思われます。

ただし、機能が導入される時系列としてはReact が先行する流れになっています。
例えばsuspenseという非同期処理の制御を少ないコードで実現する機能がReactとVue.jsの両方に実装されていますが、この機能はReactが先行しています。Vue.js のsuspenseは 2022 年 8 月の時点では正式版ではなく実験的機能という扱いになっています。SvelteについてはGitHubのIssuesに機能リクエストが投稿されている状態です。
状態管理ライブラリのRedux・Vuexや、拡張フレームワークのNext.js・Nuxt.jsもReactが数ヵ月から一年程度の差で先行しています。

TypeScriptの対応状況に関する説得力のある定量的なデータはありませんが、Vue.jsは型推論に関するバグや機能リクエストが、Svelteは型推論の実験的機能が出されている等、まだまだ改善の余地が残されているように思われます。

これらを踏まえると、Reactを知っていると他のフレームワークにも乗り換えやすいが、他のフレームワークからReactに乗り換える場合は最新機能をキャッチアップする必要がある、という状況が想像できます。

Svelteに関してはフレームワークのないフレームワークという特徴があり、単純に比較できない関係にあります。この特徴はビルド後のアプリサイズおよび動作速度の改善に大きく影響します。
ただし、あらゆるケースにおいてSvelteが優れているとは言えず、アプリの規模等の性質によってSvelteとそれ以外で住み分けがなされるかもしれません。Evan You氏の調査によると、ある程度の規模を超えるとSvelteとVue.jsのアプリサイズが逆転し、Vue.jsの方が軽くなるという結果を提示しています。

UIコンポーネントライブラリ

各フレームワークごとに、いくつもの UI コンポーネントライブラリがリリースされています。代表的なものは以下の通りです。

React	Vue 3	Svelte
MUI	Vuetify	Flowbite Svelte

それぞれ機能的な差異はあるものの、一般的な Web アプリであれば十分な機能を持つため甲乙つけがたい状態となっています。

ただし Vue.js の代表的な UI ライブラリである Vuetify には注意が必要です。Vuetify は非常に素晴らしいコンポーネントライブラリではあるのですが、2022年8月現在Vue3への対応が完了していないため、安定している Vue2 + Vuetify を採用するか、不具合を覚悟でVue3 + Vuetify ベータ版 を採用するという悩ましい状況が続いています。

エコシステム

統合開発環境、デバッガ、インスタント開発環境 (CodeSandbox, Stackblitz)、ホスティングサービス (Vercel) など、様々なエコシステムについて、どのフレームワークも充実しています。

ただし、Reactが先行している面としてデザインツールからコードの自動生成を行う仕組みが挙げられます。
例えばAWS AmplifyにはFigma to Codeという機能があり、Figmaというツールで作られたデザインデータを元にコードを生成し、Amplify プロジェクトに加えることができます。この機能は2022年8月時点でReactに対応しています。

この機能だけでエコシステム面の優位性が決定づけられるわけではありません。また時間がたてばReact以外のフレームワークも同様のエコシステムが整備される可能性は高いと思われます。ただし、今のところエコシステム面においてReactが先行する状況については判断材料として抑えておくべきかもしれません。

どのフレームワークから始めるべきか？

各フレームワークの特徴について現状をお伝えしたところで、どういう状況ならどれを選ぶべきか提案したいと思います。

まず、これまでの観点の評価を表にまとめてみました。

観点	React	Vue.js	Svelte
公式ガイド	★★★	★★★	★★☆
公式ビデオ	☆☆☆	★★★	☆☆☆
公式チュートリアル	★★☆	★★☆	★★★
コミュニティ	★★★	★★☆	★☆☆
学習曲線	急勾配	普通	緩やか
需要	★★★	★★☆	★☆☆
機能	★★★	★★☆	★★☆ (独自性あり)
UI コンポーネント	★★★	★★★	★★★
エコシステム	★★★	★★☆	★★☆

※上記の評価は主観的かつ相対的、また2022年8月時点での評価となります。ご了承ください。

ここまでの前提を踏まえた上で、モダンWebアプリ開発を始めたばかりの方がフレームワークを選ぶ条件を提案します。

Reactを選ぶ条件:

直近の採用率（需要）を重視したい
コミュニティの規模（情報やライブラリの量）を重視したい
最新の概念（2022年8月時点では Recoil や Suspense等）をいち早く取り入れたい

Vue.jsを選ぶ条件:

ワンストップの豊富な学習コンテンツを重視したい
周囲に Vue.js を経験した人が多い
Vue 3への過渡期であることを理解していて、一つ前のバージョンであるVue 2が採用されるとしても構わない

※Vue.jsの重要な機能として挙げたComposition APIはVue 2でも使用可能です。

Svelteを選ぶ条件:

とにかく短いコードでモダンWebアプリを試しに作ってみたい
フレームワークのないフレームワークに共感している

まとめ

今回は三つのフレームワークを比較して、どれを初心者が選ぶべきかという記事を書かせていただきました。

個人的には需要が大きいことや、需要を裏付けする機能、デザイン、エコシステムが先行している点からReactを推したいと思いますが、豊富なビデオコンテンツが揃うVue.js、とにかくシンプルに書けるSvelteと全てのフレームワークが魅力にあふれているためやはり悩ましい所です。
どのフレームワークもプログラミングパラダイムは似ているため、別のフレームワークへの乗り換えはさほど苦ではないと思います。ですので、直近で使うフレームワークが何か決まっていないのであれば、今回挙げた指標も参考に直感で選んでいただいても大きな問題は無いのではないかと思います。是非参考にしていただければ幸いです。