【ITニュース解説】Spinning Up a Minimal To-do List API in .NET

システムエンジニアを目指す皆さんにとって、Webアプリケーション開発は避けて通れない道だ。Webアプリケーションは、大きく分けてユーザーの目に触れる「フロントエンド」と、データの管理や複雑な処理を行う「バックエンド」から成り立っている。この記事では、バックエンド開発フレームワークの一つである.NETを使って、最小限のTODOリストAPIを構築する手順を解説する。API（Application Programming Interface）とは、異なるソフトウェア同士が情報をやり取りするための窓口のようなもので、ウェブサイトやモバイルアプリからバックエンドのデータにアクセスするために不可欠な技術だ。特に、これまでJavaScriptやReactでフロントエンド開発をしてきた方でも、.NETでのバックエンド開発の基礎を理解できるよう、丁寧に進める。

まず、プロジェクトを始めるための準備として、.NET SDK（Software Development Kit）のインストールが必要だ。これは.NETアプリケーションを開発・実行するために必要なツール一式であり、コマンドプロンプトやターミナルでdotnet --versionと入力してバージョンが表示されればインストール済みであることを確認できる。次に、新しいWebプロジェクトを作成する。dotnet new web -o TodoListBackendというコマンドを実行すると、TodoListBackendという名前のフォルダが作成され、その中にMinimal APIテンプレートを使った新しいプロジェクトが生成される。Minimal APIは、最小限のコードで素早くAPIを構築できるのが特徴だ。プロジェクトフォルダに入ったら、いよいよ開発を始める準備が整う。

作成されたプロジェクトの構造を理解することは重要だ。主要なファイルはProgram.csで、これがバックエンドアプリケーションのメインのエントリーポイントとなる。Minimal APIでは、APIのエンドポイント（特定のURLへのリクエストに応答する処理）やアプリケーション全体のさまざまな設定が、このProgram.csファイルの中に記述される。また、launchSettings.jsonというファイルは、開発中にサーバーがどのポート番号で起動するかを定義している。デフォルトではHTTP通信用にhttp://localhost:5000、HTTPS通信用にhttps://localhost:5001が設定されていることが多いが、このポート番号はファイルを開いて確認したり、変更したりすることが可能だ。ローカル環境での開発においては、SSL証明書の扱いの複雑さを避けるため、HTTPポートを使用することが一般的で、推奨される。

次に、実際にAPIのエンドポイントを追加する作業に入る。Program.csファイルを開き、既存のコードを新しい内容に置き換える。このコードは、まずWebApplication.CreateBuilder(args)でアプリケーションの土台を構築するところから始まる。 重要なのは、CORS（Cross-Origin Resource Sharing）の設定だ。CORSは、ウェブセキュリティの重要な仕組みの一つで、異なるオリジン（ドメイン、プロトコル、ポートの組み合わせ）にあるWebアプリケーション間でリソースの共有を可能にするためのルールを定めるものだ。今回のケースでは、Reactアプリケーションが動作するhttp://localhost:3000と、.NETのAPIが動作するhttp://localhost:5000は異なるオリジンなので、セキュリティ上の理由からそのままでは通信できない。そこで、バックエンド側でCORSの設定を行い、特定のオリジン（ここではReactアプリ）からのアクセスを許可する必要がある。builder.Services.AddCors(...)の部分で、http://localhost:3000からのアクセスを許可し、あらゆるヘッダーとメソッドを許容するポリシーを定義している。そして、var app = builder.Build();でアプリケーションを構築した後、app.UseCors();でこのCORSミドルウェアを適用することで、ReactアプリからAPIへのアクセスが可能になる。 その後、app.MapGet("/", ...)でサーバーが正常に起動しているかを確認するためのシンプルな「ping」エンドポイントを定義する。このエンドポイントにアクセスすると、「Server is running!」という文字列が返される。さらに、Todoリストのデータを返すための主要なエンドポイントとしてapp.MapGet("/api/tasks", ...)を追加する。MapGetは、指定されたパスへのHTTP GETリクエストに応答する処理を定義するためのメソッドだ。ここでは、C#の文字列配列（例: "Clean", "Cook", "Study", "Get a job"）を返しているが、.NETのMinimal APIは、このようにC#のオブジェクトや配列を返すと、自動的にJSON形式に変換してクライアントに送信してくれる便利な機能を持っている。最後にapp.Run();でサーバーを起動する。

バックエンドが準備できたら、実際にサーバーを起動して動作を確認する。プロジェクトフォルダのルートでdotnet runコマンドを実行すると、.NETアプリケーションが起動し、サーバーが指定されたポートでリクエストの待機を始める。通常、Now listening on: http://localhost:5000のようなメッセージが表示され、サーバーが起動したことがわかる。この状態でウェブブラウザを開き、http://localhost:5000/にアクセスすると、「Server is running!」というメッセージが表示され、http://localhost:5000/api/tasksにアクセスすると、設定したTodoリストのデータがJSON形式で["Clean","Cook","Study","Get a job"]のように表示されるはずだ。これで、バックエンドAPIが正しく機能していることが確認できる。

次に、このバックエンドAPIとReactフロントエンドを連携させる手順だ。既存のReactアプリケーションがある場合、そのコンポーネント内にAPIからデータを取得するコードを追加する。具体的には、ReactのuseEffectフック内でfetchAPIを使用し、バックエンドのTodoリストエンドポイント（http://localhost:5000/api/tasks）にHTTP GETリクエストを送る。fetchが成功すると、レスポンスのJSONデータをres.json()でパースし、その結果をuseStateフックで管理しているtasksステートにセットする。これにより、APIから取得したTodoリストの項目がReactアプリケーションのUIに表示されるようになる。この時、ReactアプリケーションはバックエンドがNode.jsで書かれているか、.NETで書かれているかといった実装の詳細を気にすることなく、単にJSONデータを取得して表示する役割を果たす。この連携がスムーズに行えれば、バックエンドとフロントエンドが協調して動作するWebアプリケーションの基本的な形が完成したことになる。

開発をより効率的に進めるためのヒントもいくつかある。一つは「ホットリロード」だ。dotnet watch runコマンドを使うと、C#のソースコードを変更した際に自動的にサーバーが再起動され、変更が即座に反映される。これはNode.jsにおけるnodemonのようなツールと同様の機能で、開発の速度を大幅に向上させる。また、サーバーの起動時にログメッセージを出力する機能も便利だ。ILoggerサービスを使って、「🚀 Server is up at http://localhost:5000」のようなカスタムメッセージをコンソールに表示させることができ、サーバーの状態を把握しやすくなる。さらに、APIから返すJSONデータの構造を改善することもできる。現在、`["Clean", "Cook"]のように配列を直接返しているが、これを{ tasks: ["Clean", "Cook"] }`のようにキーを持つオブジェクトの中に配列を格納する形に変更すると、APIの利用者にとってより扱いやすく、標準的な形式となる。

初めて.NET APIを開発する上で心に留めておきたい重要な点も存在する。一つはC#の「強い型付け」だ。C#では、変数を宣言する際にその型（整数、文字列など）を厳密に指定する必要がある。これはJavaScriptのような動的型付け言語とは異なり、コンパイル時に型の不一致によるエラーが検出されるため、実行時エラーを減らし、コードの堅牢性を高めるのに役立つ。次に、「ミドルウェアの順序」が重要である点だ。アプリケーションの処理パイプラインにおいて、CORSの設定などのミドルウェアは、APIのエンドポイントを定義するルーティング処理よりも先に適用される必要がある。この順序が誤っていると、CORSが正しく機能しないなどの問題が発生する可能性がある。最後に、APIを開発したら、フロントエンドと接続する前に、ブラウザやPostmanのようなAPIテストツールを使って、API単体で期待通りに動作するかを十分にテストすることが推奨される。これにより、問題の切り分けが容易になり、開発プロセス全体の効率が向上する。

今回の手順を通じて、あなたは最小限ながらも完全に機能するTodoリストAPIを.NETで構築し、それをReactフロントエンドに接続することに成功した。これはWebアプリケーションのバックエンド開発における素晴らしい第一歩だ。ここからさらに学習を進めることで、より高度な機能を持つアプリケーションを開発できるようになるだろう。次のステップとして、MySQLやSQL Serverのようなデータベースをバックエンドに接続して、TODOリストのデータを永続的に保存できるようにすること、POST、PUT、DELETEといったHTTPメソッドを使って、TODOアイテムの作成、更新、削除を可能にする完全なCRUD（Create, Read, Update, Delete）操作を実装すること、そしてユーザー認証やより複雑なビジネスロジックを追加することなどが考えられる。これらの学びを通じて、システムエンジニアとしてのスキルを着実に向上させてほしい。