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

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

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

項目	内容
文書名	基本設計書
システム名	書籍管理システム（Book Manager）
版数	1.0
作成日	2026-07-24
関連文書	01_要件定義書.md

改訂履歴

版	日付	改訂内容	作成者
1.0	2026-07-24	初版作成（実装済みシステムに基づく）	—

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 技術スタック

層	技術	バージョン
フロントエンド	React / React-DOM	19.2.8
フロントエンド	TypeScript	6.0.3
ビルドツール	Vite / @vitejs/plugin-react	8.1.5 / 6.0.4
バックエンド	ASP.NET Core Web API（コントローラ）	.NET 10（SDK 10.0.302）
ORM	Entity Framework Core	10.0.10
データベース	SQLite	ファイルベース
API ドキュメント	OpenAPI + Scalar	OpenAPI 10.0.10 / Scalar 2.16.16

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 画面一覧

画面ID	画面名	概要
SCR-01	書籍管理画面	一覧表示・登録・編集・削除・貸出切替を行う単一画面

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

3.2 画面遷移

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

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

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

3.4 画面項目定義

入力エリア（新規登録）

項目名	種別	必須	内容
タイトル	テキスト入力	○	書籍タイトル
著者	テキスト入力	−	著者名
出版年	数値入力	−	西暦年（未入力時は当年）
追加ボタン	ボタン	−	登録実行（タイトル未入力時は非活性）

一覧エリア

列名	内容
タイトル	書籍タイトル（編集モード時は入力欄）
著者	著者名（編集モード時は入力欄）
出版年	出版年（編集モード時は入力欄）
状態	貸出状態バッジ（クリックで切替）
操作	編集ボタン・削除ボタン（編集モード時は保存・取消）

3.5 画面アクション

イベント	処理	対応API
画面初期表示	一覧取得	GET /api/books
追加ボタン押下	登録 → 一覧再取得	POST /api/books
編集ボタン押下	対象行を編集モードへ	（API呼出なし）
保存ボタン押下	更新 → 一覧再取得	PUT /api/books/{id}
取消ボタン押下	編集モード解除	（API呼出なし）
状態バッジ押下	貸出状態反転 → 一覧再取得	PUT /api/books/{id}
削除ボタン押下	削除 → 一覧再取得	DELETE /api/books/{id}

4. 機能設計

4.1 機能一覧

機能ID	機能名	入力	出力
FN-01	一覧取得	なし	書籍配列
FN-02	登録	書籍情報	登録済み書籍
FN-03	更新	ID＋書籍情報	なし（204）
FN-04	削除	ID	なし（204）

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 エンドポイント一覧

No	メソッド	パス	概要	正常時
1	GET	/api/books	一覧取得	200
2	GET	/api/books/{id}	1件取得	200 / 404
3	POST	/api/books	登録	201
4	PUT	/api/books/{id}	更新	204 / 400
5	DELETE	/api/books/{id}	削除	204 / 404

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 エンティティ定義（論理）

論理名	物理名	型	必須	説明
ID	Id	整数	○	主キー、自動採番
タイトル	Title	文字列	○	書籍タイトル
著者	Author	文字列	○	著者名
出版年	Year	整数	○	西暦出版年
貸出状態	IsBorrowed	真偽	○	true=貸出中 / false=在庫あり

6.3 テーブル一覧

論理名	物理名	説明
書籍	Books	書籍情報を保持するテーブル

7. 非機能設計方針

分類	方針
構成分離	フロントエンドとバックエンドをプロセス分離し、REST API で疎結合とする
データ永続化	SQLite により追加サーバ不要で永続化。スキーマ変更は EF Core マイグレーションで管理
セキュリティ	本バージョンは認証なし。将来は API 層に認証ミドルウェアを追加可能な構成とする
国際化	UTF-8 により日本語を保持。SQLite の TEXT 型で保存

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

8.1 API エラー応答

状況	ステータス
対象データが存在しない（取得・削除）	404 Not Found
パスとボディの ID 不一致（更新）	400 Bad Request

8.2 画面メッセージ

状況	メッセージ
一覧取得失敗	「書籍の取得に失敗しました。API が起動しているか確認してください。」
データ0件	「書籍がまだありません。上のフォームから追加してください。」
読み込み中	「読み込み中...」