ポートフォリオ制作演習 / 約30分

要件定義と設計（データモデル・API・画面設計）

なぜこれを学ぶか

「作りたいものがある」から「作れる設計図がある」へ。このレッスンでは問い合わせ管理ツールを例に、DBテーブル設計・API設計・画面設計を実際に行います。設計ができれば、あとはコードに変換するだけです。

設計の3レイヤー: ①データモデル（何を保存するか）→ ②API設計（どう取得・更新するか）→ ③画面設計（どう見せるか）。この順序で設計するのが基本です。データモデルが決まるとAPIが決まり、APIが決まると画面が決まります。

DBテーブル設計の基本: contactsテーブルの例。id（AUTO INCREMENT, PRIMARY KEY）/ title（問い合わせタイトル, TEXT NOT NULL）/ body（内容, TEXT）/ status（'pending'|'in_progress'|'done', TEXT DEFAULT 'pending'）/ created_at（作成日時, DATETIME DEFAULT CURRENT_TIMESTAMP）/ updated_at（更新日時, DATETIME）。ステータスはENUM的に管理し、不正な値が入らないようにする。

API設計の基本（RESTful）: GET /api/contacts → 一覧取得。POST /api/contacts → 新規登録（body: {title, body}）。PATCH /api/contacts/:id → ステータス更新（body: {status}）。DELETE /api/contacts/:id → 削除。URLは「リソース名の複数形」で設計し、動詞を使わない（/getContacts ではなく /contacts）。

画面設計（ワイヤーフレーム）: 画面①「一覧ページ（/）」: ヘッダー + 問い合わせカード一覧（ステータスバッジ付き）+ 新規登録ボタン。画面②「登録モーダル」: タイトル入力 + 内容テキストエリア + 送信ボタン。画面③（オプション）「詳細ページ（/contacts/:id）」: タイトル・内容・ステータス変更ドロップダウン。ワイヤーフレームは紙でもFigmaでも、四角と文字だけでよい。

【ワークシート P2】: 以下を手元のメモ帳に書いてください。①contactsテーブルのCREATE TABLE文（id・title・body・status・created_at）②APIエンドポイント一覧（メソッド・URL・説明・リクエストボディ）③一覧ページの画面構成（ヘッダー/リスト/ボタン）をテキストで。このワークシートがそのままREADMEの設計セクションになります。

重要ポイント

設計の順序: データモデル → API設計 → 画面設計
テーブルにはid・status・created_atを必ず入れる習慣をつける
APIはRESTful: URLはリソース名の複数形、動詞は使わない
ワイヤーフレームは紙でOK。「四角と文字」で十分

理解度チェック

選ぶと即座に解説が表示されます。

contactsテーブルに`status`カラムを追加するとき、最も適切な定義はどれ？（SQLite想定）

ヒントを見る

DEFAULT値を設定すると、INSERT時にstatusを省略しても安全に登録できます。

SQL演習ブラウザ内SQLite

contactsテーブルから「未対応（pending）の問い合わせを、作成日時が古い順に3件取得する」SQLを書いてください。

テーブル定義と初期データを見る

CREATE TABLE contacts (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  title TEXT NOT NULL,
  body TEXT,
  status TEXT NOT NULL DEFAULT 'pending',
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO contacts (title, body, status, created_at) VALUES
  ('パスワードを忘れた', 'ログインできません', 'pending', '2024-01-01 09:00:00'),
  ('請求書の送付先変更', '新住所に変えてほしい', 'done', '2024-01-02 10:00:00'),
  ('システムエラーが出る', 'エラーコード500', 'in_progress', '2024-01-03 11:00:00'),
  ('使い方が分からない', 'マニュアルを送ってください', 'pending', '2024-01-04 12:00:00'),
  ('データが消えた', '昨日入力したデータが消えた', 'pending', '2024-01-05 08:00:00');

模範解答（読んで理解したら、自力で書き直してみましょう）

SELECT title, status, created_at
FROM contacts
WHERE status = 'pending'
ORDER BY created_at ASC
LIMIT 3;

スキルセルフチェック

このレッスンの内容をどの程度理解できましたか？

弱点マップで全体を確認する

前のレッスン次のレッスン