練習問題 1：タスク管理アプリの設計
要件
- ユーザー管理
- ユーザーは自分のアカウントを作成、ログイン、ログアウトできる。
- ユーザーのプロフィール情報を表示し、編集できる。
- タスク管理
- ユーザーはタスクを作成、編集、削除、完了することができる。
- 各タスクにはタイトル、説明、期限日、優先度（高・中・低）が含まれる。
- タスクはカテゴリーに分類できる（仕事、家庭、趣味など）。
- 検索およびフィルター
- ユーザーはタスクを検索およびフィルター（例：未完了のタスク、期限が近いタスク、カテゴリー別）できる。
- ダッシュボード
- ユーザーはタスクの進捗状況をダッシュボードで確認できる。
指示
- コンポーネント設計（フロントエンド）
- 必要なコンポーネントをリストアップし、それぞれの役割を定義してください。
- 各コンポーネントの大まかな構成（例えば、どのプロパティやステートを持つか）を考えてください。
- API設計（バックエンド）
- 必要なAPIエンドポイントをリストアップし、それぞれの機能を定義してください。
- 各エンドポイントのリクエストとレスポンスの形式（例：JSONスキーマ）を設計してください。
解説
フロントエンド要件
必要なコンポーネント
- Header
- 役割: アプリのヘッダー部分。ナビゲーションリンクやロゴを表示する。
- Footer
- 役割: アプリのフッター部分。コピーライト情報などを表示する。
- TaskList
- 役割: タスクのリストを表示。フィルターや検索結果に応じてタスクをリストアップ。
- TaskItem
- 役割: 各タスクの詳細を表示。タスクの編集、削除、完了を行うボタンを含む。
- TaskForm
- 役割: タスクを作成・編集するフォーム。タイトル、説明、期限日、優先度、カテゴリーを入力するフィールドを含む。
- CategoryFilter
- 役割: カテゴリー別にタスクをフィルターする。
- SearchBar
- 役割: タスクを検索するためのコンポーネント。
- Dashboard
- 役割: タスクの進捗状況を表示するダッシュボード。未完了のタスク数や完了したタスクの割合などをグラフで表示。
- UserProfile
- 役割: ユーザーのプロフィール情報を表示するコンポーネント。
バックエンド要件
必要なAPI
- ユーザー管理API
- POST /api/users/register: ユーザー登録
- POST /api/users/login: ユーザーログイン
- GET /api/users/profile: ログイン中のユーザーのプロフィール情報取得
- タスク管理API
- GET /api/tasks: ログイン中のユーザーのタスク一覧取得
- POST /api/tasks: 新しいタスクの作成
- GET /api/tasks/: 特定のタスクの詳細取得
- PUT /api/tasks/: 特定のタスクの編集
- DELETE /api/tasks/: 特定のタスクの削除
- PUT /api/tasks//complete: 特定のタスクを完了にマーク
- カテゴリー管理API
- GET /api/categories: カテゴリー一覧取得
- POST /api/categories: 新しいカテゴリーの作成
- GET /api/categories/: 特定のカテゴリーの詳細取得
- PUT /api/categories/: 特定のカテゴリーの編集
- DELETE /api/categories/: 特定のカテゴリーの削除
- ダッシュボードAPI
- GET /api/dashboard: ログイン中のユーザーのタスク進捗状況を取得
設計のポイント
- フロントエンドでは、コンポーネントの再利用性を考慮し、可能な限り小さく、独立したコンポーネントを設計します。
- バックエンドでは、RESTfulなAPI設計を意識し、リソースごとにエンドポイントを分けることで可読性と拡張性を高めます。
練習問題 2：図書館管理システムの設計
要件
- ユーザー管理
- ユーザーは自分のアカウントを作成、ログイン、ログアウトできる。
- ユーザーのプロフィール情報を表示し、編集できる。
- 管理者はユーザーを追加、削除、編集できる。
- 図書管理
- 管理者は新しい図書を追加、編集、削除できる。
- 図書にはタイトル、著者、出版日、カテゴリ、在庫数が含まれる。
- ユーザーは図書を検索、閲覧、予約できる。
- 貸出管理
- ユーザーは図書を借りる、返却することができる。
- 各貸出には貸出日、返却日、ステータス（貸出中、返却済）が含まれる。
- 管理者は貸出記録を確認、管理できる。
- 通知システム
- 図書の返却期限が近づいた場合、ユーザーに通知する。
- 図書が返却された場合、予約したユーザーに通知する。
指示
- コンポーネント設計（フロントエンド）
- 必要なコンポーネントをリストアップし、それぞれの役割を定義してください。
- 各コンポーネントの大まかな構成（例えば、どのプロパティやステートを持つか）を考えてください。
- API設計（バックエンド）
- 必要なAPIエンドポイントをリストアップし、それぞれの機能を定義してください。
- 各エンドポイントのリクエストとレスポンスの形式（例：JSONスキーマ）を設計してください。
解説
フロントエンド要件
必要なコンポーネント
- Header
- 役割: アプリのヘッダー部分。ナビゲーションリンクやロゴを表示する。
- Footer
- 役割: アプリのフッター部分。コピーライト情報などを表示する。
- BookList
- 役割: 図書のリストを表示。検索結果やカテゴリ別に図書をリストアップ。
- BookItem
- 役割: 各図書の詳細を表示。図書の予約や詳細情報を表示するボタンを含む。
- BookForm
- 役割: 図書を追加・編集するフォーム。タイトル、著者、出版日、カテゴリ、在庫数を入力するフィールドを含む。
- CategoryFilter
- 役割: カテゴリ別に図書をフィルターする。
- SearchBar
- 役割: 図書を検索するためのコンポーネント。
- BorrowList
- 役割: ユーザーの貸出記録を表示。現在貸出中の図書や返却済の図書を表示。
- UserProfile
- 役割: ユーザーのプロフィール情報を表示するコンポーネント。
- AdminPanel
- 役割: 管理者用のパネル。ユーザー管理や図書管理を行うためのインターフェース。
バックエンド要件
必要なAPI
- ユーザー管理API
- POST /api/users/register: ユーザー登録
- POST /api/users/login: ユーザーログイン
- GET /api/users/profile: ログイン中のユーザーのプロフィール情報取得
- PUT /api/users/profile: ログイン中のユーザーのプロフィール情報更新
- DELETE /api/users/: 特定のユーザー削除（管理者用）
- 図書管理API
- GET /api/books: 図書一覧取得
- POST /api/books: 新しい図書の追加
- GET /api/books/: 特定の図書の詳細取得
- PUT /api/books/: 特定の図書の編集
- DELETE /api/books/: 特定の図書の削除
- 貸出管理API
- GET /api/borrows: ログイン中のユーザーの貸出記録取得
- POST /api/borrows: 図書の貸出
- PUT /api/borrows//return: 図書の返却
- 通知API
- GET /api/notifications: ユーザーの通知一覧取得
- POST /api/notifications: 新しい通知の作成（返却期限や予約図書の通知）
設計のポイント
- フロントエンドでは、コンポーネントの再利用性とユーザーエクスペリエンスを重視し、直感的なUIを提供します。
- バックエンドでは、RESTfulなAPI設計を意識し、セキュリティとデータの整合性を保ちながら拡張性を考慮した設計を行います。
