React プロジェクトを始める

React だけで新しいアプリやウェブサイトを作りたい場合は、コミュニティで人気のある React フレームワークから、ひとつを選ぶことをおすすめします。

フレームワークなしで React を使うことも可能ですが、ほとんどのアプリやサイトにおいては、コード分割、ルーティング、データ取得、HTML 生成といった問題に対処するための開発が必要であることが分かっています。これらは React に限らずあらゆる UI ライブラリに共通の問題です。

フレームワークを使ってスタートすることで React での開発を素早く立ち上げ、後で実質的に独自フレームワークのようなものを作ってしまわずに済むようになるでしょう。

さらに深く知る

フレームワークなしで React を使うことは可能?

React をフレームワークなしで使うことも確かに可能です。既存のページに React を追加する場合はそのようにします。しかし、新しいアプリやサイトをフルで React を使って構築する場合は、フレームワークを使用することをお勧めします。

理由は次のとおりです。

もし最初にルーティングやデータ取得が必要ない場合でも、後になってそれらのためにライブラリを追加する必要が出てくる可能性が高いでしょう。新しい機能が増えるたびに JavaScript バンドルは大きくなっていき、個々のルートごとにコードを分割する方法を考える必要があります。データ取得の要件が複雑になるにつれて、サーバ・クライアント間のネットワークウォーターフォールが原因となり、アプリは非常に遅く感じるようになるでしょう。低速なネットワーク環境やロースペックなデバイスのユーザが増えると、コンテンツをできるだけ早く表示するため、サーバ上であるいはビルド時に、コンポーネントから HTML を生成する必要が生じることがあるでしょう。後になってセットアップを変更し、サーバ上であるいはビルド時にあなたのコードの一部が実行されるようにすることは、非常に複雑な作業です。

これらの問題は React に固有のものではありません。まさにこれが、Svelte には SvelteKit、Vue には Nuxt といったフレームワークが存在する理由です。これらの問題を自力で解決するには、ルータやデータ取得ライブラリをバンドラに結合する作業を自分で行う必要があります。最初のセットアップをひとまず動作させることは難しくありませんが、時間が経ってアプリが成長してもなお素早く読み込めるサイトを作るためには、数々の細々とした問題に対処する必要が出てきます。アプリに必要な最小限のコードを 1 回のクライアント・サーバ間の往復で送信しつつ、並行してページ表示に必要なデータも送信したい、と思い始めるでしょう。ページが段階的に読み込まれ、JavaScript コードが実行すらされないうちから操作可能になるプログレッシブ・エンハンスメントのサポートが欲しくなるでしょう。どこにでもホストでき JavaScript が無効になっていても動作する、マーケティングページのための完全に静的な HTML ファイルが入ったフォルダを生成したい、と考え始めるでしょう。これらの機能を自分で構築するには、大変な労力が必要です。

このページで紹介する React フレームワークは、これらの問題をデフォルトで解決しているため、あなたが余計な作業をする必要はありません。これらのフレームワークを使用することで、非常にスリムに始めて、ニーズに応じてアプリをスケーリングできます。各 React フレームワークにはコミュニティがあるため、質問に対する回答を見つけたり、ツールのアップグレードをしたりすることもより簡単に行えます。フレームワークはあなたのコードに構造を与えるので、あなたや他の人が複数のプロジェクト間でコンテクストやスキルを保持するのにも役立ちます。逆に、カスタムセットアップを行った場合、サポートされなくなった依存関係バージョンにハマる可能性が高まり、いずれ実質的には独自フレームワークのようなものを作成する羽目に陥ります。ただしそのようなフレームワークにはコミュニティもアップグレードパスもなく、仮に過去に作成されていたものに近かったとしても、行き当たりばったりで設計されたものに過ぎないわけですが。

以下のフレームワークではうまく対処できない特殊な制約がある場合や、これらの問題に自分自身で対処したいという場合は、React で自分独自のカスタムセットアップを行うことも可能です。npm から reactreact-dom を入手し、ViteParcel のようなバンドラを使ってカスタムビルドプロセスをセットアップし、ルーティング、静的ファイル生成、サーバーサイドレンダリングなどのための各種ツールを必要に応じて追加していってください。

本番環境対応の React フレームワーク

以下に挙げるフレームワークは、アプリを本番環境でデプロイしスケールさせるために必要なすべての機能を備えており、我々のフルスタックアーキテクチャの実現に向けて開発されています。ここでお勧めするフレームワークはすべてオープンソースであり、助けになる活発なコミュニティがあり、自分自身のサーバにもホスティングプロバイダにもデプロイできます。このリストに掲載を希望するフレームワークの作者はお知らせください

Next.js

Next.js の Pages Router はフルスタックの React フレームワークです。ほぼ静的なブログサイトから複雑でダイナミックなアプリまで、どんな規模の React アプリでも作成できる万能フレームワークです。Next.js プロジェクトを新規に作るには、ターミナルで次のコマンドを実行してください。

Terminal
npx create-next-app@latest

Next.js を初めて使う場合は、Next.js の学習コースを参照してください。

Next.js は Vercel によってメンテナンスされています。Next.js アプリは Node.js やサーバレスホスティングサービス、または自分自身のサーバーにデプロイすることができます。Next.js はサーバを必要としない静的なエクスポートもサポートしています。

Remix

Remix は、ネスト状のルーティングを備えたフルスタック React フレームワークです。複雑なアプリを階層的に分割し、並列に読み込み、ユーザアクションに応じてリフレッシュすることができます。Remix プロジェクトを新規に作成するには、次のコマンドを実行します。

Terminal
npx create-remix

Remix を初めて使う場合は、Remix のブログ作成チュートリアル(短い)や アプリ作成チュートリアル(長い)を参照してください。

Remix は Shopify によってメンテナンスされています。Remix アプリをデプロイするには、デプロイ先を選択する必要があります。Remix アプリは、アダプタを使用するか自分で書くことで、あらゆる Node.js またはサーバーレスホスティングにデプロイできます。

Gatsby

Gatsby は、CMS ベースで高速なサイトを作成するための React フレームワークです。豊富なプラグインのエコシステムと GraphQL データレイヤーにより、コンテンツ、API、サービスの統合が簡素化されます。Gatsby プロジェクトを新規に作成するには、次のコマンドを実行します。

Terminal
npx create-gatsby

Gatsby を初めて使う場合は、Gatsby チュートリアルを参照してください。

Gatsby は Netlify によってメンテナンスされています。完全に静的な Gatsby サイト は、どんな静的なホスティングにもデプロイ可能です。サーバーサイド専用の機能を使用する場合は、ホスティングプロバイダが Gatsby に対応しているかどうか確認してください。

Expo(ネイティブアプリ向け)

Expo は、Android、iOS、およびウェブ向けに、真にネイティブな UI を持ったユニバーサルアプリを作成できる React フレームワークですReact Native 用の SDK を提供し、ネイティブなパーツの使用を簡素化します。Expo プロジェクトを新規に作成するには、次のコマンドを実行します。

Terminal
npx create-expo-app

Expo を初めて使う場合は、Expo チュートリアルを参照してください。

Expo は Expo(社名) によってメンテナンスされています。Expo を使用してアプリをビルドすることは無料であり、Google や Apple のアプリストアに制限なくアップロードすることができます。また Expo では有料のクラウドサービスも提供しています。

超最先端の React フレームワーク

我々が React の進化について探求する中で、React をフレームワークと(特にルーティング、バンドル作成、サーバテクノロジーと)より密接に統合することが、React ユーザがよりよいアプリを構築する手助けをするための最大の機会となるということに気づきました。Next.js チームは、React Server Components のようなフレームワークに依存しない最先端の React 機能に関して、私たちと共同で研究、開発、統合、テストを行うことに同意しました。

これらの機能は、本番環境で使える段階へと日々近づいており、他のバンドラやフレームワーク開発者とも統合について話し合っています。私たちの希望は、このページにリストされているすべてのフレームワークが、1 年か 2 年のうちにこれらの機能を完全にサポートするようになることです。(あなたがフレームワーク作者で、これらの機能を実験するため我々と協力することに興味がある場合、ぜひご連絡ください!)

Next.js (App Router)

Next.js の App Router は、React チームのフルスタックアーキテクチャビジョンを実現するために再設計された Next.js の API です。サーバ上で、あるいはビルド時に非同期コンポーネントからデータのフェッチが行えるようになります。

Next.js は Vercel によってメンテナンスされています。Next.js アプリのデプロイはあらゆる Next.js やサーバレスホスティングサービス上で行えます。Next.js は、サーバ不要の静的エクスポートもサポートしています。

さらに深く知る

React チームのフルスタックアーキテクチャビジョンに含まれる機能

Next.js の App Router バンドラは、公式の React Server Components 仕様を完全に実装しています。これにより単一の React ツリー内で、バンドル時専用コンポーネント、サーバ専用コンポーネント、インタラクティブなコンポーネントを混在させることができます。

例えば、データベースやファイルから読み込みを行う React コンポーネントを非同期 (async) 関数として記述できます。そしてそのデータをインタラクティブなコンポーネントに渡すこともできます:

// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
// 1. You're on the server, so you can talk to your data layer. API endpoint not required.
const talks = await db.Talks.findAll({ confId });

// 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
const videos = talks.map(talk => talk.video);

// 3. Pass the data down to the components that will run in the browser.
return <SearchableVideoList videos={videos} />;
}

Next.js の App Router は、サスペンス (suspense) を使用したデータフェッチを統合しています。これにより、React ツリー内で直接、UI の様々な場所に表示されるロード中状態(スケルトンプレースホルダなど)を指定できるようになります:

<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>

サーバコンポーネントとサスペンスは、Next.js の機能ではなく React の機能です。しかしフレームワークレベルでこれらを採用するには、合意形成とかなりの実装の手間が必要です。現時点では、Next.js の App Router が最も完全な実装です。React チームはバンドラの開発者と協力して、次世代のフレームワークでこれらの機能を実装しやすくすることを目指しています。