基礎編 STEP 4
手を動かす

Hono で最小 API を返す

フロントから呼べる最小 API を作る PR として、GET / POST を持つ Hono の入口を作る段階。

カリキュラムスタート
この STEP について詳しく見る

この STEP で作るもの

  • GET / POST が返る Hono API
  • fetch でつながる React + Hono

PR 目安

最小の GET / POST エンドポイントと fetch 接続までで止める。

例: feature/phase3-step4-hono-minimum-api

できるようになること

  • フロントから呼ばれる API を設計・実装できる
  • 画面と API の責務を分けて考えられる

章一覧 (5)

目安時間 合計 100 分
  1. 1
    📄

    バックエンドAPI設計(Hono)

    HonoでRESTエンドポイントを設計し、Zodバリデーション・JWTミドルウェア・エラーハンドリングを実装するパターンを理解する

    未着手 手を動かす
  2. 2
    🌐

    Hono で GET エンドポイントを作る

    pnpm workspace に api パッケージを追加し、Hono で最小の GET /todos エンドポイントを立ち上げる

    未着手 25 分 手を動かす
  3. 3
    📮

    POST でリクエストボディを受け取る

    Hono で POST エンドポイントを作り、JSON ボディのパース・Zod による入力検証・新規作成のレスポンスを実装する

    未着手 25 分 手を動かす
  4. 4
    🔗

    React から fetch で Hono API を呼ぶ

    React の useEffect と fetch で GET/POST を呼び、ローディング・エラー状態を扱って UI を API と同期させる

    未着手 30 分 手を動かす
  5. 5
    🧪

    curl / REST Client で API を手動確認する

    UI を経由せず curl や VS Code の REST Client 拡張で API を直接叩き、正常系と異常系の挙動を確認する

    未着手 20 分 手を動かす