ハンズオンラボ›Azure

TypeScript で REST API を作る: Express で TODO API を実装する

型のある TypeScript と Express で、TODO を作成・一覧・完了・削除する REST API を実装します。入力検証と HTTP ステータスの使い分け、curl での動作確認、型チェックまで、バックエンド開発の基本を一通り体験します。

中級約 60 分Azure 実環境

ラボ概要

このラボでは、社内ツール向けの小さな TODO API を TypeScript と Express で実装します。生成 AI アプリやフロントエンドの裏側で必ず必要になる「型のある API 実装」の基本を、ブラウザ IDE 上で完結させます。

依存パッケージ（express / typescript / ts-node）はインストール済みで、npm run dev ですぐ起動できます。

学習目標:

  • Express のルーティングで GET / POST / PATCH / DELETE を実装する
  • リクエスト本文の検証と、400 / 404 / 201 / 204 の使い分けを理解する
  • TypeScript の interface でデータの形を定義し、tsc --noEmit で型チェックする
  • curl で API を叩いて動作を確認する
  • メモリ上のストアと ID 採番の実装（後で DB に置き換える前提）

前提知識:
  • JavaScript / TypeScript の基本（関数・配列操作）
  • HTTP の基本（メソッドとステータス コード）

完了条件:
  • 型チェックが通り、サーバーを起動した状態で GET / POST / PATCH / DELETE の判定がすべて合格すること

> 判定はサーバーを起動したまま（npm run dev を動かしたまま）実行してください。

ラボの構成

  1. 1ブラウザ IDE を開いて雛形を確認する
  2. 2まず起動して健康チェックだけ叩く
  3. 3GET /todos を実装する
  4. 4POST /todos を実装する（入力検証つき）
  5. 5PATCH /todos/:id/done と DELETE /todos/:id を実装する
  6. 6型チェックを通す
  7. 7判定を実行する
  8. 8発展（任意）
  9. 9結果を考察する

詳細な手順は、ラボ開始後に画面内のガイドとして表示されます。

手順のプレビュー（最初のステップ）

1. ブラウザ IDE を開いて雛形を確認する

  • ラボ画面の ブラウザ IDE を開く をクリックし、表示されているパスワードでサインインする
  • README.md で仕様を確認し、src/app.ts を開く。createApp() の中に TODO 1〜4 のコメントがある
  • src/server.ts は createApp() を 3000 番で起動するだけのファイルであることを確認する
> 注: express.json() が既に有効になっているので、JSON の本文は req.body で受け取れます。
残り 8 セクションの手順は、ラボを開始すると画面内に表示されます

構成図

構成図

参考リソース