この記事では内部向けシステムは、社内システム/業務システムなどある特定範囲内で目的をもって利用されるものを想定しています。
目的や会社の背景やポリシーによるため唯一の解がないのは大前提ですが、フロントエンド関連で調べたとき、toC 向けの記事は多く、SEO や性能が非常に重要というシーンが大半なのですが、そうではない場合には何がよいのか？と思う人もいるかと思います。
筆者もその一人で、この記事はその検討と見解です。
内部向けシステムの特性
外部/toC向けのシステムと大きく違うのは以下と思っています。
- SEO 対策は基本不要（使う人は決まっており、好き嫌いの問題ではなく利用される）。
- 初期読み込みも早いに越したことはないけど、シビアではない（常識的な範囲で応答が返ればOKなことが多い）。
- よほど機能強化が活発なシステムでもない限りライブラリのバージョンアップをする頻度は低い。
なので SSR や SSG、ISR といった仕組みがなくても正直問題にはなることはあまりないと思っています。ではそのときにどの プロジェクトをベース を使うのがよいか？個人的に特に悩ましいのが最後の観点です。
プロジェクトのベース
ここで考えたいのは主にビルドシステムでした。
Typescript の採用や、ルーター/状態管理などの必須ライブラリ、コンポーネント開発には必要な Storybook など、実開発では普通に利用すべきものは当然必要で、これら下回りがどうであろうと必要なものはここでは割愛。
プロジェクトベースの選択肢
上の特性から、CSR でも十分と思われるので、プロジェクトのベースとして選択肢にあげたのは以下4点。現時点でメジャーどころをピックアップしたつもり（Next.js は厳密には同じレイヤで並べられるものではないですが）。
- create-react-app
- Webpack + React
- Vite + React
- Next.js
1. は React 公式、2 は長年デファクトである Webpack、3 は高速な HMR で開発体験が Webpack 時よりも劇的に向上した Vite, 4 は React 界隈で非常に人気のあるフレームワーク。
create-react-app
React 公式が提供しているプロジェクト作成の方法。予め必要な Webpack などの設定がされており、すぐに React プロジェクトを起動することができる。ただ最新の公式のドキュメントには、以下の記述があり、React を学ぶ場合 となっています。
If you’re learning React, we recommend Create React App. It is the most popular way to try out React and build a new single-page, client-side application. It’s made for React but isn’t opinionated about routing or data fetching.
Getting started with a minimal toolchain
ドキュメントの続きにも本番向けには Next.js が良いとされています。
そのため、CSR で十分といえども create-react-app を利用するのは微妙と感じました。ただ、create-react-app 自体は無くならない or 無くなるにしても公式なので何らかの対応手段は提供されるだろうなと思います（eject も可能ですし）。
Webpack + React
依存度という意味では最もシンプルかつ実績はある組み合わせ。0 から始める場合は下回りの設定が色々必要になりそうだけど、Webpack に関しては調べればヒットするだろうし書籍もあるので情報には困らないと思われる。
ただ、Vite や TurboPack など登場しており、Webpack は今度は少しずつシェアが下がっていく可能性が高そう。あとは縛りがない分書き方/構成含めちゃんと決めないと好き勝手なものができる可能性が高いので注意が必要。別のシステムへも展開、みたいなことを想定するなら特に。
Vite + React
Vite の恩恵を受けられるので開発体験はよい。SSG したい場合には別のライブラリが必要にはなるが難しくはなさそう。
Webpack 同様、Vite 自体はフレームワークじゃないので、実際の開発時の自由度は高い。注意点も Webpack で書いたものと同じ傾向はあるはず。将来性はこちらのほうがある（と思っています）。
ただ、調査時点では Google 検索時のヒット件数/記事量は当然 Webpack には劣る。
Next.js
上の選択肢と違い、フレームワークなのでルーティングとかファイル分割とか機能が搭載済み、書き方もある程度決まっている。お作法があることの良し悪しは捉え方次第だが、自由度がありすぎるよりはよい。CSRだけじゃなく、SSG,SSR,ISR も用意に実現する機能をもつ。検討時点では内部では Webpack が動いている。
Next.js は非常に人気で 2021/2022 時点では React 開発時のデファクト的な位置づけに思われる。上で述べたように、React 公式でも Next.js が良い選択肢と言及されている。
ただ、フレームワークを使うことに対する懸念は継続性。寿命が長いシステムを作る場合は、その分 OSS としての活動も継続性があるものを選ぶことが望ましい。
が、ここ数年の流れをみるとフロントエンドの技術自体が10年20年後には全くの別物になっている可能性のほうが高いため、気にしてもしょうがない感覚もあり。
比較
調査時点（2022/11）のもの。
| 観点 | create-react-app | webpack + react | vite + react | Next.js |
|---|---|---|---|---|
| レンダリング | CSR | CSR SSG/SSR できるかもだけど、それを考えるなら選択肢はこれではない気が | CSR/SSG SSG は vite-ssg でできるとのこと | CSR/SSG/SSR/ISR が標準でいずれも実現可能 |
| 習得難易度 | ○ 仕組みの中で使うには簡単 | ▲ 0 から使いこなすのは大変だが、調べれば情報は多くある | ? パッと使うのはすぐできる。使いこなすほどは使ってないので学習コスト不明 | ▲ 専用のお作用を覚える。と言ってもそんな難しくない印象 |
| Github star | 98,067 (create-react-app) | 62,117 (webpack) | 49,847 (vite) | 96,931 (Next.js) |
| npm trend ※下図 | 4位 下降傾向 | 1位 断トツ | 3位 増加傾向 | 2位 増加傾向 |
| Google trend ※下図 | 4位 停滞 | 2位 少しずつ下降 | 3位 増加傾向 | 1位 増加傾向 |
| State of JavaScript 2021 Tier | ー | B | S | S |
| コミュニティ活性度 ※コミット数判断 | ✕ 更新は非常に少ない | ▲ 右肩下がり | ○ 活発 | ○ 非常に活発 |
| 依存度 | ○ | ○ | ○ | ▲ フレームワークという意味で他よりは。 |
| その他 | 公式が本番開発で推奨してない | フレームワークの作法である程度、書き方が統一できる | ||
まとめ
調べておいて元も子もないですが、結局何を大事にするかなので状況によりそうです。
上の結果を見る限りでは、今新しく作るなら Next.js や Vite がよさそうです。が、数年前には全く予想できない結果です。なので、数年後も予想できないと思った方がよいのかなと思います。
そういう意味では当たり前のことですが、何を選ぶかも重要ですが、継続的に変化に対応できる/させてもらえる状況を作ることがより重要ですね（一度作ったあとに塩漬けにするという選択肢もありますが）。
