【ASP.NET Core Web API + React + TypeScript(vite)】書籍管理システム設計 ③ 基本設計書（外部設計）

本記事は 書籍管理システム設計（全4回）シリーズの ③ です。

📚 シリーズ全記事（全4回）

1. 【ASP.NET Core Web API + React + TypeScript(vite)】書籍管理システム設計 ① 環境構築手順書
2. 【ASP.NET Core Web API + React + TypeScript(vite)】書籍管理システム設計 ② 要件定義書
3. 【ASP.NET Core Web API + React + TypeScript(vite)】書籍管理システム設計 ③ 基本設計書（外部設計）（この記事）
4. 【ASP.NET Core Web API + React + TypeScript(vite)】書籍管理システム設計 ④ 詳細設計書（内部設計）

改訂履歴

1. はじめに

1.1 目的

本書は要件定義書に基づき、書籍管理システムの外部仕様（システム構成・画面・API・データ）を定義する。

1.2 位置づけ

利用者およびシステム間から見える外部インターフェースを規定する。内部の実装詳細は「03_詳細設計書」で規定する。

2. システム構成

2.1 システム構成図

• ブラウザは Vite（ポート 5173）にアクセスする。
• /api/* へのリクエストは Vite の server.proxy により API（ポート 5000）へ転送される。
• API は EF Core を介して SQLite ファイル books.db を読み書きする。
• プロキシ経由のため同一オリジンとなり、CORS 設定は不要。

2.2 技術スタック

2.3 ディレクトリ構成

webapi/
├─ api/          バックエンド（ASP.NET Core Web API）
│  ├─ Models/         エンティティ
│  ├─ Data/           DbContext
│  ├─ Controllers/    API コントローラ
│  ├─ Migrations/     EF Core マイグレーション
│  ├─ Program.cs      エントリポイント／DI／ミドルウェア
│  └─ books.db        SQLite データベース
└─ web/          フロントエンド（React + TypeScript）
   ├─ src/api.ts      API クライアント
   ├─ src/App.tsx     画面コンポーネント
   └─ vite.config.ts  プロキシ設定

3. 画面設計

3.1 画面一覧

※ 本システムは SPA であり、画面は SCR-01 の1画面のみで構成する。

3.2 画面遷移

単一画面のため画面遷移はない。画面内で「一覧表示 ⇔ 行の編集モード」の状態遷移を持つ。

3.3 画面レイアウト（ワイヤーフレーム）

┌─────────────────────────────────────────────┐
│ 📚 書籍管理                                    │
│                                               │
│ [タイトル____] [著者____] [出版年_] [ 追加 ]   │
│                                               │
│ ┌────────────┬────────┬──────┬──────┬───────┐ │
│ │ タイトル    │ 著者   │出版年│ 状態 │ 操作  │ │
│ ├────────────┼────────┼──────┼──────┼───────┤ │
│ │ 吾輩は猫... │夏目漱石│ 1905 │在庫  │編集 削除│ │
│ │ 羅生門      │芥川... │ 1915 │貸出中│編集 削除│ │
│ └────────────┴────────┴──────┴──────┴───────┘ │
└─────────────────────────────────────────────┘

3.4 画面項目定義

入力エリア（新規登録）

一覧エリア

3.5 画面アクション

4. 機能設計

4.1 機能一覧

4.2 各機能の処理概要

• FN-01 一覧取得：全書籍を取得しフロントに返却する。
• FN-02 登録：受領した書籍を新規保存し、採番されたIDを含めて返す。
• FN-03 更新：URL の ID とボディの ID の一致を確認し、書籍を上書き更新する。
• FN-04 削除：ID に該当する書籍を削除する。存在しない場合は 404 を返す。

5. API 設計（外部インターフェース）

5.1 API 方式

• 形式：REST／JSON（UTF-8）
• ベースパス：/api/books
• 通信：HTTP（開発用）。フロントは相対パスで呼び出し、Vite プロキシが API へ転送する。
• プロパティ命名：JSON は camelCase（例：isBorrowed）。

5.2 エンドポイント一覧

5.3 リクエスト／レスポンス仕様

共通データ（Book）

{
  "id": 1,
  "title": "吾輩は猫である",
  "author": "夏目漱石",
  "year": 1905,
  "isBorrowed": false
}

1. GET /api/books

• リクエスト：なし
• レスポンス：200 OK / Book の配列

2. GET /api/books/{id}

• リクエスト：パスパラメータ id
• レスポンス：200 OK（Book）／ 404 Not Found

3. POST /api/books

• リクエストボディ：Book（id は省略可、サーバ採番）
• レスポンス：201 Created（Location ヘッダ付き、登録済み Book）

4. PUT /api/books/{id}

• リクエスト：パス id ＋ ボディ Book（id を含む）
• レスポンス：204 No Content ／ パスとボディの id 不一致時は 400 Bad Request

5. DELETE /api/books/{id}

• リクエスト：パスパラメータ id
• レスポンス：204 No Content ／ 該当なしは 404 Not Found

5.4 API 確認用インターフェース

• OpenAPI 定義：GET /openapi/v1.json
• API リファレンス UI：/scalar（開発環境のみ有効）

6. データ設計

6.1 ER 図

※ 本システムは単一エンティティ構成であり、リレーションは持たない。

6.2 エンティティ定義（論理）

6.3 テーブル一覧

7. 非機能設計方針

8. エラー設計・メッセージ

8.1 API エラー応答

8.2 画面メッセージ