2023 年におけるReactを使った開発の最適なライブラリ・フレームワークは何か

2023年時点でWebフロントエンド開発のためのライブラリやフレームワークは、ReactやVue、Angular、Svelteなど複数存在します。それに加えて、ReactというライブラリだけでもNext.jsやRemix、CRA、ViteなどのReactを元にしたライブラリが存在しています。（ここでは便宜上、すべてライブラリと呼ぶことにします。）

Webフロントエンドは使われている技術の遷移が比較的早い傾向があるため、数年前のテキストは今では古いということもよく起こります。

私は5年ほどWebフロントエンド開発やフルスタックなWeb及びモバイル端末向けのアプリ開発に携わっていますが、5年の中でも使うライブラリに色々と変化がありました。

この記事では、2023年終わりの時点でのReactを使った開発を始めるための最適なライブラリは何なのかについて自分の意見を書いていきます。

Create React App（CRA）

CRAは名前が示す通り、Reactを使ったアプリを作るためのビルドツールです。Reactの開発元が所有している所謂公式ツールです。

以前はよく使われていたツールであり、私もCRAを元にしたReact製のWebフロントエンド開発プロジェクトにはいくつか携わっていました。

しかし、2023年時点ではReactの開発元もこのツールを使うことを推奨していません。

それを示すように、Reactの開発を始めるためのドキュメントからCRAを使った初期設定のドキュメントは消えています。現在、React開発チームは、React製のアプリを作成するためにNext.jsやRemixなどのライブラリを使用することを推奨しています。

https://react.dev/learn/start-a-new-react-project

加えて、執筆時点でのCRAの最後のリリースは2022年であり、現在は活発にメンテナンスされていません。CRAは2023年時点では役割を終えたと見るのが正しいでしょう。

なぜCRAが役割を終えたのかについては以下に記載があります。

https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741

Next.js

Next.jsはVercelによって開発されたReactのライブラリで、フルスタックのウェブアプリケーションを構築するために設計されています。

結論から言うと、2023年時点ではNext.jsが最良の選択肢だと思っています。

理由は以下の通りです：

• メンテナンスと更新が定期的に行われている
• パフォーマンスなどの最適化が行われており扱いやすい
• 静的サイト生成やカスタムサーバーなど様々なパターンに対応可能
• 強力なコミュニティやユーザー数の多さ

Next.js以前は、ページルーティング、サーバーサイドレンダリング、画像サイズ、キャッシュ設定、ビルド設定、最適化など、多くの設定を行う必要があったことを覚えています。これらの設定や最適化の煩雑さはNext.jsを使うことで幾分か解消されています。

また、2016年以来、Next.jsは継続的にアップデートされており、長年にわたる継続的なアップデートにより、年々最適化やパフォーマンスの向上がなされています。

例えば、v9から静的サイト生成がサポートされ、v10から国際化（i18n）ルーティングがサポートされ、2023年にはレンダリングパフォーマンスを最適化するApp RouterとServer Componentsが導入されました。

さらに、サードパーティやコミュニティ開発者によって、Next.jsのためのさまざまなツールやライブラリがリリースされています。 例えば、監視プラットフォームのSentryは、Next.js専用に設計されたSDKを持っています。

また、ユーザー数や導入している企業の数も多いため、トラブルシューティングなども行いやすく、初学者にも勧めやすいです。

私は2019年からNext.jsを使っていますが、ライブラリ起因のトラブルなどは少なく、安定している印象を持っています。

2023年にはApp Router導入という大きなアップデートがありましたが、Pages Routerも引き続きサポートされています。自分は新規のプロジェクトやパフォーマンス最適が必要なプロジェクトではApp Routerを、既存のプロジェクトや他のReact製アプリからのNext.jsへの移行などの場合はPages Routerを使うという感じで使い分けています。

Remix

RemixはReactを元にしているフルスタックのウェブアプリケーションを構築するためのライブラリで、Shopifyチームによってメンテナンスされている、比較的新しいライブラリです。

フルスタックのウェブアプリケーションという点でNext.jsと近似していますが、主な差異としては以下が挙げられるでしょう。

• サーバサイドレンダリングに特化したライブラリ
• パフォーマンス最適により注力
• Webスタンダードに忠実な設計思想

昨今のReact開発チームはパフォーマンスを更に最適化するためReact Server Componentsのようにサーバーサイド側での最適化により力を入れています。Remixはサーバサイドでの機能に特化し、いち早くパフォーマンス向上に注力していたライブラリです。

また、Remix ではWeb標準の API や仕組みを積極的に活用し、ライブラリ固有の概念を最小限に抑えようとしているため、学習コストが比較的に低くなっています。

2023年に入ってから、私もRemixでWebサイトを構築するなど、実際に使用感を試してみました。ルーティングの書き方やルートの中でのコンポーネント分割などは分かりやすく、Next.jsと比べて優れている箇所も多いと思います。

しかし、結論からいうと、2023年の現時点ではRemixを本番環境に用いるのはまだ早いというのが私の意見です。

理由はいくつかあるのですが、端的にいうと開発チームやコミュニティ・サードパーティによるサポートがNext.jsと比べまだ弱く、長期的に使った場合にライブラリなどのサポートが不十分になる懸念を拭えなかったという理由になります。

例えば、Remix製のアプリにi18n（多言語化対応）を行う必要があったのですが、2023年時点では公式によるドキュメントはなく、Remix向けの多言語化対応のライブラリも１種類しか存在していませんでした。大規模サービスや長期運用を念頭に置く場合、コミュニティやライブラリサポートがまだ手薄と感じるため本番利用は慎重になるべきだと考えます。

Next.jsの場合はi18n（多言語化対応）向けの対応が公式にドキュメント化されており、ライブラリも複数の中から選ぶことができるため、長期的に使う際により安心できます。

また、Next.jsでも2023年中頃にリリースされたApp Routerという機能を使うことでReact Server Componentsによるパフォーマンス最適化が行えるようになりましたので、そちらを試す方が良いかなと思っています。

Vite

ViteはReactやVue、Svelteなどの複数のWebフロントエンド開発のライブラリをサポートするビルドツールです。

CRAが非推奨となった現在、Viteはフレームワークに依存しないでReactを始める方法の一つです。

結論から言うと、私はお勧めしません。理由は以下でも述べられていますが、煩雑な最適化を自分で行う必要が生じるためです。

https://nextjs.org/docs/app/building-your-application/upgrading/from-vite

昨今のReact開発チームはReact Server Componentsのようなサーバーサイド側での最適化により力を入れている訳ですが、2023年時点のViteは従来通りのクライアントサイドでのReactに焦点を当てており、サーバサイドレンダリング（SSR）などに対応する場合は設定が別途必要になります。

素直にNext.jsやRemixによる最適化に乗っておくのが今は良いと私は考えています。

Expo

ExpoはReact NativeをベースにしたSDKで、主にiOS/Android向けのアプリを開発する際に使用されます。

加えて、ExpoはWebサイトのビルドにも対応しており、Web/iOS/Androidのプラットフォーム向けのアプリをExpoだけで開発することが可能です。ただ、Web対応する場合はスタイリングなどに制約ができてしまう点には注意が必要です。

私はいくつかのiOS/Android向けのアプリをExpoで開発した経験がありますが、異なるプラットフォームでアプリの挙動やデザインを同じにすることに苦労させられました。

基本的には、iOS/Android向けのアプリを開発するという要件があり、Reactでの開発経験があれば勧めることができると言うのが私の意見です。

Gatsby

GatsbyはReactをベースにしたライブラリで、よりWordpressのようなCMSでの使用に特化している印象です。

また、以前は静的サイト生成（Static site generation:SSG）に重点を置いていましたが、現在はサーバサイドレンダリング（SSR）もサポートしているようです。

数年前までは私もGatsbyとその静的サイト生成機能を用いてブログやLPなどを構築していたのですが、Next.jsが静的サイト生成をサポートするようになってからは触る機会が激減しています。

また、静的サイト生成にはコンテンツの量が増えれば増えるだけビルド時間もまた増えるという問題点があり、今となってはあまり勧められないと考えています。

機能面でNext.jsに負けておりコミュニティやユーザー数もNext.jsの方が強いと感じているため、残念ですが今Gatsbyをあえて使う理由を私はあまり思いつきませんでした。

結論

• 安定性や長期的なサポートが必要: Next.js
• 大規模なプロジェクト: Next.js
• 小規模なプロジェクト: Next.js
• iOS/Android向けのアプリ: Expo
• 何が必要か分からない: Next.js

FYI: https://npmtrends.com/create-react-app-vs-expo-vs-gatsby-vs-next-vs-remix