ASP.NET Core + React + TypeScriptでTodoアプリを作成する①（環境構築編）

バックエンドにASP.NET Core Web API、フロントエンドにReact＋TypeScriptを使ったフルスタックなTodoアプリを、全3回に分けて作成していきます。

第1回では、アプリの土台となる環境構築を中心に解説します。

対象読者

ASP.NET CoreでSPA構成のアプリを作ってみたい人
C#やJavaScriptの基本的な知識がある人
ASP.NET Core Web API を触ったことがある人

環境

Windows 10（Macでも可）
Visual Studio Code 1.72
.NET 6.0 SDK (6.0.401)
Node.js 16.17.1
React 18.2.0
TypeScript 4.8.4

※Reactの開発ではVisual StudioよりもVisual Studio Code（以下VSCode）の方が何かと便利なので、本記事ではVSCodeを用いて解説します。

完成イメージ

最終的に作成するTodoアプリです。

見た目はとてもシンプルですが、ASP.NET Core やReactの基本が多く含まれています。

環境構築

まずは環境構築として、必要なツールのインストールやプロジェクトの作成を行います。

Visual Studio Codeのインストール

VSCodeをインストールしていない場合は、以下のリンクからダウンロードしてPCにインストールしてください。

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications...

.NET SDKのインストール

VSCodeで.NETの開発をする場合は.NET SDKが必要になります。
コマンドプロンプト等を開いて以下のコマンドを実行してください。

dotnet --version

バージョンが表示されない場合はSDKがPCにインストールされていないので、以下のページから.NET 6.0 のSDKをダウンロード・インストールしてください。

.NET のダウンロード (Linux、macOS、Windows)

Linux、macOS、および Windows で .NET アプリケーションを構築し、実行するための無料ダウンロード。.NET Framework、.NET、および ASP.NET 用のランタイム、SDK、および開発者パック。

Node.jsのインストール

React・TypeScript開発には、JavaScript実行環境であるNode.jsも必要になります。
以下のコマンドを実行してください。

node -v

バージョンが表示されない場合は、下記ページからNode.jsのLTS（推奨）版をダウンロード・インストールしてください。

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

VSCode拡張機能「C#」

デバッグ実行などに必要な拡張機能もインストールしておきます。

その他フロントエンド開発に便利な拡張機能があるので、以下の記事などを参考にインストールしておくことをおすすめします。

404 - ページが見つかりません

プロジェクトの作成とデバッグ実行

必要な環境が整ったら、コマンドプロンプト等でプロジェクトを作成したい任意のフォルダ（デスクトップなど）に移動し、以下のコマンドを実行してください。

dotnet new react -n todo-react-app

「todo-react-app」の部分はプロジェクト名になるので、任意の名前を入力してください。

実行すると、.NET SDKの「ASP.NET Core with React.js」テンプレートを使用したプロジェクトが作成されます。

以下のコマンドを実行して、作成されたプロジェクトをVSCodeで開きましょう。

cd .\todo-react-app
code .

以下のようなフォルダ構成になっているはずです。

それでは「F5」を押してデバッグ実行してみましょう。

少し時間がかかると思いますが、Hello Worldの画面が表示されれば成功です。

上部の「Counter」をクリックするとCounter画面が表示されるので、こちらも動作確認をしてみます。

「Increment」ボタンをクリックすると、「Current count」の値が1ずつ増加することが確認できます。

プロジェクトの構成

自動で作成されたファイルの中身を簡単に確認してみます。

フロントエンド（React関係）のファイル

「ClientApp」フォルダ内に格納されています。

主要なファイルの役割等を上から順に説明します。

/public/index.html：最初に読み込まれるhtmlファイル
/src/components：各画面で使用するコンポーネント（部品）を格納するフォルダ
/src/components/Counter.js：先ほど確認したCounterページ用のコンポーネント
/src/components/FetchData.js：FetchDataページ用のコンポーネント。ASP.NET Core Web API側からデータを取得して、その内容を画面に表示する
/src/components/Home.js：トップページ用のコンポーネント
/src/components/Layout.js：各ページの共通レイアウトを定義するコンポーネント
/src/components/NavMenu.js：各ページの共通ヘッダ部分を定義するコンポーネント
/src/App.js：index.jsから呼び出されるコンポーネントで、LayoutやHomeといった主要なコンポーネントを呼び出す
/src/index.js：App.jsの内容をindex.html内のid=”root”部分に描画する
package.json：npm（パッケージ管理ツール）で利用されるファイル。インストールするべきパッケージを定義したもの

バックエンド（ASP.NET Core Web API関係）のファイル

ClientAppフォルダ以外には通常のASP.NET Core Web APIプロジェクトに関するファイルがありますが、こちらの詳しい説明は割愛します。

不要ファイルの削除

今回のTodoアプリで使用しないファイルを削除します。（残しておいても問題ありませんが、今後の解説をシンプルにするためにキレイにしておきます。）

ClientApp/srcフォルダ内の赤枠で囲ったファイルを全て削除しましょう。

ファイルの削除に伴ってindex.jsの書き換えが必要になるので、以下のように修正してください。

import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(<h1>ToDoアプリ</h1>);

バックエンドの不要ファイルも削除しておきます。赤枠内のファイルを削除してください。

Pagesの削除に伴ってビューの表示が不要になったので、Program.csも一部書き換えておきます。
（書き換えなくても問題なく動作します。）

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.MapControllers();

app.MapFallbackToFile("index.html");;

app.Run();

TypeScriptの設定

「ASP.NET Core with React.js」テンプレートにはTypeScriptが適用されていないため、以下の手順でTypeScriptの設定を行います。

型定義ファイルのインストール

TypeScript本体はプロジェクト作成時にインストールされていますが、型定義ファイル (.d.ts)が存在しないため、コマンドを実行してインストールを行います。

※型定義ファイルとは、JavaScriptで書かれたライブラリに型情報を付与するためのファイルで、TypeScriptを使用する際に必要です。

VSCodeの上部メニューの「ターミナル」→「新しいターミナル」からターミナルを開き、以下のコマンドを実行してください。

cd ClientApp
npm install -D @types/react @types/react-dom

実行するとpackage.jsonのdevDependencies（開発時のみ使用するパッケージ）に記載が追加されます。

※npm install時に「-D」を付けることでdevDependenciesに追加できます。

型定義ファイル本体はClientApp/node_modules/@types内にインストールされます。

tsconfig.jsonの作成と設定

次にTypeScriptの設定ファイルであるtsconfigを作成します。
以下のコマンドを実行してください。

.\node_modules\.bin\tsc --init

実行するとClientAppフォルダ直下にtsconfig.jsonが作成されるので、中身を以下のように書き換えます。（各オプション等の詳しい説明については割愛します。）

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "custom.d.ts"]
}

これでTypeScriptを使うための準備が整いました。

TypeScript化

試しにindex.jsをTypeScript化してみましょう。拡張子を「.tsx」に変更してみてください。
index.tsxを開くと、TypeScriptの型チェックエラーが表示されます。

document.getElementById(“root”)の結果がnullになる可能性がありますよという警告です。

基本的にここでnullになることはないので、今回は非nullアサーション演算子「!」（nullやundefinedでないことをコンパイラに伝えるための演算子）をdocument.getElementById(“root”)の末尾に付与します。

警告が消えました。

プロキシ設定ファイルの修正

最後に、今後の開発に必要となるので「ClientApp/src/setupProxy.js」を修正しておきます。

初期状態ではcontextという変数に「”/weatherforecast”」というサンプル用Controllerの名前がハードコーディングされているので、これを以下の文字列に置き換えます。
※”http://localhost:<ポート番号>”は環境によって異なるので初期設定のままにしておいてください。

const { createProxyMiddleware } = require("http-proxy-middleware");
const { env } = require("process");

const target = env.ASPNETCORE_HTTPS_PORT
  ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}`
  : env.ASPNETCORE_URLS
  ? env.ASPNETCORE_URLS.split(";")[0]
  : "http://localhost:<ポート番号>";

const context = ["/api/"];

module.exports = function (app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: "Keep-Alive",
    },
  });

  app.use(appProxy);
};

こうすることで、画面側から「/api/」というルート名が付いたASP.NET Core Web APIのControllerに、React側からリクエストを送信できるようになります。