Reactフレームワークはどれを選ぶべきか?

Reactが自分の今の仕事の主戦場となっています。そこで2年ほどやってきた自分がフレームワークの選び方を提案してみます。

Create React App

create-react-app

公式がサポートしている。Reactのスターターパッケージ。
ESLintやJestなんかも最初から内包しているので、環境構築の手間が省ける。サクッとReactでアプリを作りたいときなんかに便利。
CSRでサイト構築が可能。CSRであるが故にSEOは弱い。
ブラウザベースのWEBアプリケーション向きで、逆にコーポレートサイトやLPには不向き。APIのレスポンスを待ってからDOMを描画する。そのため描画するのに待ち時間が発生してしまうのがネック。
また、Create React Appは自由度がかなり高いのが特長。CSRではなくSSRに変更することも可能。ディレクトリ構成も自分で決めることが可能。
他に比べて自由度が高いのがCreate React Appの良さ。反面、チームでの開発をするときは設計をちゃんとしなければいけない。(そうしないと、俺様ルールになりがち)
個人的な意見としてCSRでなければいけないという理由がなければ、Next.jsかGatsbyをお勧めしたい。

Next.js

Next.js 公式サイト

SSRでReactサイトが作れる。
SEOに関しては、APIのレスポンス結果も含めSSRするのでSEOは強い。
データ更新が多いサイトに向いている。例えば、APIレスポンスが頻繁に更新されるケースなど。
SSR時の挙動を踏まえ、ライフサイクルなどを意識して書く必要があるが、Reactを使い慣れて入ればすぐに手が出せるフレームワーク。
最初からディレクトリ構成が決まっており、Next.jsが対象ディレクトリを監視してくれている。そのためディレクトリ構成が決まってる分、自由度の高いReactに比べてチームでの開発に向いている。また、近年JAMStackの勢いもありSSGに対応している。その点でもNext.jsがかなり強い立ち位置にある印象。

GatsbyJS

GatsbyJS 公式サイト

ビルド時点で静的なHTMLを生成する。頻繁なデータ更新には向いていない。
SEO部分は強いのでブログやポートフォリオサイトを構築するときなんかに最適、静的サイトな分描画や遷移が他のフレームワークに比べて爆速。
都度ビルドとデプロイが必要になってくるが、netlifyなどのクラウドサービスを使用して自動化させてしまえば、あまり気にするような問題ではない。
JAMStackということもあり、サーバーなどクラウドを使用すればよい、なのでサーバー周りの深い知識を必要としないので、フロントエンド初学者でもすぐに扱える。比較的簡単。
GraphQLがAPI通信時に必要になるのでGraphQLも学習する必要があるが、こちらも比較的に学習コストが低いためすぐに扱える。

まとめ

案件によってどのフレームワークを選択するかが決まってくると思います。個人的な意見としては、Next.js一択です。SSGにも対応できるという部分からしてGatsbyを選択する必要もないですし、何よりもチームでの開発向きなところがよいでしょう。

関連記事