React + ASP.NET Coreのテンプレートを使用してみた

本記事では React + ASP.NET Coreのテンプレートの内容についてご紹介していきます。

ASP.NET Coreを使用してSingle-Page Application（以下、SPA）を作りたい方は参考にしてみてください。

に記載の通り、2023/8/8にSPAの新しいVisual Studioテンプレートがプレビューとして公開されました。

ASP.NET CoreのバックエンドプロジェクトにAngular、ReactまたはVueが統合されたプロジェクトとなります。

.NET8とVisual Studio17.8で推奨されるSPAテンプレートとなりました。

本テンプレートの特徴としては以下が挙げられます。

新しいプロジェクトの作成にてテンプレートの検索バーで「react」と検索すると、以下のテンプレートが表示されます。

今回は後者の「React and ASP.NET Core（TypeScript）」を選択します。

ソリューション名は「MyReactApp」、フレームワークは「.NET 8.0」を選択してプロジェクトを作成します。

プロジェクトを作成するとディレクトリ構成は以下のようになっています。

主な項目について説明していきます。

項目	説明
myreactapp.client	フロントエンドを構成するプロジェクトファイル
src	フロントのアプリケーションの主要なソースコードを格納。
eslintrc.cjs	ESLint 用の設定ファイル
index.html	レイアウトの大元となるファイル
nuget.config	Nugetの振る舞いを制御するファイル
package.json	インストールするパッケージが記述されたファイル。 npm installで記述されたパッケージをインストールできる。
tsconfig.json	TSファイルをJSファイルにコンパイルするための設定ファイル
vite.config.json	VIte 用の設定ファイル
MyReactApp.Server	バックエンドを構成するプロジェクトファイル。フロントから呼ばれるAPI等を格納しておく。
Properties/launchSettings.json	デバッガーからプログラムを起動する際の起動プロファイルを定義。
Controller	APIを格納したController
WeatherForecastController.cs	WeatherForecastに関するAPI
appsettings.json	アプリの構成情報を管理できる。キーと値で定義し、値を取得できる。
Program.cs	アプリケーションのスタートアップコードが入っている。エントリポイント。
WeatherForecast.cs	WeatherForecast APIで使用するモデルクラス