次の方法で共有

ASP.NET Core で React を使用する

  • [アーティクル]

Note

これは、この記事の最新バージョンではありません。 現在のリリースについては、この記事の .NET 8 バージョンを参照してください。

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。 詳細については、「.NET および .NET Core サポート ポリシー」を参照してください。 現在のリリースについては、この記事の .NET 8 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 8 バージョンを参照してください。

Visual Studio には、ASP.NET Core バックエンドを持つ Angular、React、Vue などの JavaScript フレームワークに基づいてシングルページ アプリ (SPA) を作成するためのプロジェクト テンプレートが用意されています。 これらのテンプレートでは、次のことを行います。

  • フロントエンド プロジェクトとバックエンド プロジェクトを含む Visual Studio ソリューションを作成します。
  • JavaScript には Visual Studio プロジェクトの種類を使用し、フロントエンドには TypeScript (.esproj) を使用します。
  • バックエンドには ASP.NET Core プロジェクトを使用します。

Visual Studio テンプレートを使って作成されたプロジェクトは、Windows、Linux、macOS のコマンド ラインから実行できます。 アプリを実行するには、dotnet run --launch-profile https を使用してサーバー プロジェクトを実行します。 サーバー プロジェクトを実行すると、フロントエンドの JavaScript 開発サーバーが自動的に起動します。 現在、https 起動プロファイルが必要です。

Visual Studio チュートリアル

初めて使う場合は、Visual Studio ドキュメントの React を使った ASP.NET Core アプリの作成に関するチュートリアルに従ってください。

詳細については、「Visual Studio の JavaScript および TypeScript」を参照してください

ASP.NET Core SPA テンプレート

Visual Studio には、JavaScript または TypeScript フロントエンドを使用して ASP.NET Core アプリを構築するためのテンプレートが含まれています。 これらのテンプレートは、ASP.NET と Web 開発ワークロードがインストールされている Visual Studio 2022 バージョン 17.8 以降で使用できます。

JavaScript または TypeScript フロントエンドを使用して ASP.NET Core アプリを構築するための Visual Studio テンプレートには、次の利点があります。

  • フロントエンドとバックエンドのプロジェクト分離をクリーンにする。
  • 最新のフロントエンド フレームワーク バージョンを最新の状態に保つ。
  • Vite など、最新のフロントエンド フレームワーク コマンドライン ツールと統合する。
  • JavaScript と TypeScript の両方のテンプレート (Angular に対しては TypeScript のみ)。
  • 豊富な JavaScript と TypeScript コードの編集エクスペリエンス。
  • JavaScript ビルド ツールを .NET ビルドと統合する。
  • npm 依存関係管理 UI。
  • Visual Studio Code のデバッグと起動の構成と互換性がある。
  • JavaScript テスト フレームワークを使用して、テスト エクスプローラーでフロントエンド単体テストを実行する。

レガシ ASP.NET Core SPA テンプレート

以前のバージョンの .NET SDK には、ASP.NET Core を使用して SPA アプリを構築するためのレガシ テンプレートが含まれていました。 これらの以前のテンプレートに関するドキュメントについては、ASP.NET Core 7.0 バージョンの SPA の概要と Angular および React に関する記事を参照してください。

React を使用した ASP.NET Core プロジェクト テンプレートは、React および Create React App (CRA) を使用してリッチなクライアント側ユーザー インターフェイス (UI) を実装する ASP.NET Core アプリを開発する場合に、便利な開始点として利用できます。

このプロジェクト テンプレートは、Web API として機能する ASP.NET Core プロジェクトと、UI として機能する CRA React プロジェクトを両方作成することに相当します。 このプロジェクトの組み合わせにより、単一の ASP.NET Core プロジェクトで両方のプロジェクトをホストし、1 つの単位としてビルドして発行できるようになります。

このプロジェクト テンプレートは、サーバー側のレンダリング (SSR) 用ではありません。 React および Node.js を使用して SSR を行うには、Next.js または Razzle を検討してください。

新しいアプリを作成する

コマンド プロンプトで dotnet new react コマンドを使用して、空のディレクトリの中に新しいプロジェクトを作成します。 たとえば、次のコマンドは、my-new-app ディレクトリにアプリを作成し、そのディレクトリに切り替えます。

dotnet new react -o my-new-app
cd my-new-app

以下のように Visual Studio または .NET CLI からアプリを実行します。

生成された .csproj ファイルを開き、そこから通常の方法でアプリを実行します。

ビルド プロセスは、初回の実行で npm の依存関係を復元します。これには数分かかる可能性があります。 以降のビルドは非常に高速になります。

プロジェクト テンプレートは、ASP.NET Core アプリと React アプリを作成します。 ASP.NET Core アプリは、データ アクセス、承認、およびその他のサーバー側の操作で使用することを目的としています。 ClientApp サブディレクトリ内の React アプリは、UI に関するすべての 操作で使用することを目的としています。

ページ、画像、スタイル、モジュールなどを追加する

ClientApp ディレクトリは標準の CRA React アプリです。 詳細については、公式の CRA ドキュメントを参照してください。

このテンプレートによって作成される React アプリと CRA 自体によって作成されるアプリにはわずかな違いがありますが、アプリの機能は変わりません。 テンプレートによって作成されるアプリには、ブートストラップベースのレイアウトと基本的なルーティングの例が含まれます。

npm パッケージをインストールする

サードパーティ製の npm パッケージをインストールするには、ClientApp サブディレクトリでコマンド プロンプトを使用します。 次に例を示します。

cd ClientApp
npm install <package_name>

発行と配置

開発中、アプリは、開発者に便利なように最適化されたモードで実行されます。 たとえば、JavaScript バンドルには、ソース マップが含まれます (デバッグ時に元のソース コードを確認できるようにするためです)。 アプリは、ディスク上の JavaScript、HTML および CSS ファイルの変更を監視し、これらのファイルの変更が発生した場合は、再コンパイルと再読み込みを自動的に実行します。

運用時は、パフォーマンスが最適化されたバージョンのアプリが提供されます。 これは、自動的に実行されるように構成されています。 発行すると、ビルド構成によって、クライアント側コードの縮小され、トランスパイルされたビルドが生成されます。 開発ビルドとは異なり、運用ビルドは、サーバーへの Node.js のインストールを必要としません。

標準的な ASP.NET Core のホストと展開方法を使用できます。

CRA サーバーを個別に実行する

ASP.NET Core アプリが開発モードで起動された場合、プロジェクトは、CRA 開発サーバーの独自のインスタンスをバックグラウンドで開始するように構成されます。 これが便利なのは、別のサーバーを手動で実行する必要がないためです。

この既定の設定には欠点があります。 C# コードを変更し、ASP.NET Core アプリを再起動する必要がある場合、CRA サーバーが毎回再起動します。 再起動には数秒かかります。 C# コードを何度も編集するが、CRA サーバーが再起動するまで待ちたくない場合は、ASP.NET Core プロセスから独立した CRA サーバーを外部で実行します。

CRA サーバーを外部で実行するには、コマンド プロンプトで ClientApp サブディレクトリに切り替え、CRA 開発サーバーを起動します。

cd ClientApp
npm start

ASP.NET Core アプリの起動時に CRA サーバーが起動されなくなります。 代わりに、手動で開始したインスタンスが使用されます。 これにより、起動と再起動を高速化できます。 React アプリが毎回リビルドされるまで待つ必要がなくなります。

SignalR のプロキシ ミドルウェアを構成する

詳細については、http-proxy-middleware をご覧ください。

その他のリソース

更新された React プロジェクト テンプレートは、React および create-react-app (CRA) 規則を使用してリッチなクライアント側ユーザー インターフェイス (UI) を実装する ASP.NET Core アプリを開発する場合に、便利な開始点として利用できます。

このテンプレートには、API バックエンドとして機能する ASP.NET Core プロジェクトと、UI として機能する標準の CRA React プロジェクトの両方を作成する場合と同等の機能がありますが、単一のユニットとしてビルドと発行が可能な単一のアプリ プロジェクトで両方をホストできるので便利です。

React プロジェクト テンプレートは、サーバー側のレンダリング (SSR) 用ではありません。 React および Node.js を使用して SSR を行うには、Next.js または Razzle を検討してください。

新しいアプリを作成する

コマンド プロンプトで dotnet new react コマンドを使用して、空のディレクトリの中に新しいプロジェクトを作成します。 たとえば、次のコマンドは、my-new-app ディレクトリにアプリを作成し、そのディレクトリに切り替えます。

dotnet new react -o my-new-app
cd my-new-app

以下のように Visual Studio または .NET CLI からアプリを実行します。

生成された .csproj ファイルを開き、そこから通常の方法でアプリを実行します。

ビルド プロセスは、初回の実行で npm の依存関係を復元します。これには数分かかる可能性があります。 以降のビルドは非常に高速になります。

プロジェクト テンプレートは、ASP.NET Core アプリと React アプリを作成します。 ASP.NET Core アプリは、データ アクセス、承認、およびその他のサーバー側の操作で使用することを目的としています。 ClientApp サブディレクトリ内の React アプリは、UI に関するすべての 操作で使用することを目的としています。

ページ、画像、スタイル、モジュールなどを追加する

ClientApp ディレクトリは標準の CRA React アプリです。 詳細については、公式の CRA ドキュメントを参照してください。

このテンプレートによって作成される React アプリと CRA 自体によって作成されるアプリにはわずかな違いがありますが、アプリの機能は変わりません。 テンプレートによって作成されるアプリには、ブートストラップベースのレイアウトと基本的なルーティングの例が含まれます。

npm パッケージをインストールする

サードパーティ製の npm パッケージをインストールするには、ClientApp サブディレクトリでコマンド プロンプトを使用します。 次に例を示します。

cd ClientApp
npm install --save <package_name>

発行と配置

開発中、アプリは、開発者に便利なように最適化されたモードで実行されます。 たとえば、JavaScript バンドルには、ソース マップが含まれます (デバッグ時に元のソース コードを確認できるようにするためです)。 アプリは、ディスク上の JavaScript、HTML および CSS ファイルの変更を監視し、これらのファイルの変更が発生した場合は、再コンパイルと再読み込みを自動的に実行します。

運用時は、パフォーマンスが最適化されたバージョンのアプリが提供されます。 これは、自動的に実行されるように構成されています。 発行すると、ビルド構成によって、クライアント側コードの縮小され、トランスパイルされたビルドが生成されます。 開発ビルドとは異なり、運用ビルドは、サーバーへの Node.js のインストールを必要としません。

標準的な ASP.NET Core のホストと展開方法を使用できます。

CRA サーバーを個別に実行する

ASP.NET Core アプリが開発モードで起動された場合、プロジェクトは、CRA 開発サーバーの独自のインスタンスをバックグラウンドで開始するように構成されます。 これが便利なのは、別のサーバーを手動で実行する必要がないためです。

この既定の設定には欠点があります。 C# コードを変更し、ASP.NET Core アプリを再起動する必要がある場合、CRA サーバーが毎回再起動します。 再起動には数秒かかります。 C# コードを何度も編集するが、CRA サーバーが再起動するまで待ちたくない場合は、ASP.NET Core プロセスから独立した CRA サーバーを外部で実行します。 次の手順に従います。

  1. 次の設定を使用して、 .env ファイルを ClientApp サブディレクトリに追加します。

    BROWSER=none

    これにより、CRA サーバーを外部で起動するときに、Web ブラウザーが開かなくなります。

  2. コマンド プロンプトで、ClientApp サブディレクトリに切り替え、CRA 開発サーバーを起動します。

    cd ClientApp
npm start

  3. 独自のインスタンスを起動する代わりに外部の CRA サーバー インスタンスを使用するように ASP.NET Core アプリケーションを変更します。 Startup クラスで、spa.UseReactDevelopmentServer の呼び出しを以下に置き換えます。

    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

ASP.NET Core アプリの起動時に CRA サーバーが起動されなくなります。 代わりに、手動で開始したインスタンスが使用されます。 これにより、起動と再起動を高速化できます。 React アプリが毎回リビルドされるまで待つ必要がなくなります。

重要

"サーバー側のレンダリング" は、このテンプレートではサポートされていません。 このテンプレートの目標は、"create-react-app" と同等のものを提供することです。 そのため、"create-react-app" プロジェクトに含まれていないシナリオや機能 (SSR など) はサポートされておらず、ユーザーのための演習として残されています。

SignalR のプロキシ ミドルウェアを構成する

詳細については、http-proxy-middleware をご覧ください。

その他のリソース