DX改善シナリオ演習 / 約25分

小さく作って試す（モック設計演習）

なぜこれを学ぶか

FAQツールの設計が固まったら、「小さく動くもの（プロトタイプ）」を作ります。このレッスンでは、コーディング前に「画面遷移」と「データの流れ」を考えるモック設計の演習と、実際にFAQ検索機能のデータモデルをSQLで設計する実習を行います。

プロトタイプとモックの違い: モック = 見た目だけ（ハリボテ）。プロトタイプ = 部分的に動く（一部の機能が実際に動く）。フェーズに応じて使い分ける。ステークホルダーへの確認にはモック（早い・安い）、エンジニアの技術検証にはプロトタイプ（動くか確認）。

画面遷移図を書く（FAQツールの例）: ①トップページ（検索ボックス＋カテゴリ一覧）→②検索結果一覧（キーワード・カテゴリで絞り込み）→③FAQ詳細（質問・回答・関連FAQ）→④フィードバック（解決した/しない）。さらに管理側 ①管理ダッシュボード → ②FAQ追加フォーム → ③編集フォーム。ユーザー導線を先に考えることで、APIに必要なパラメータが見えてくる。

「データの流れ」を追う: ユーザーが「VPN 接続できない」と検索したとき → ①ブラウザが GET /api/faqs?q=VPN+接続できない を送信 → ②APIがfaqsテーブルをフルテキスト検索 → ③マッチした行をJSON配列で返す → ④ブラウザが結果をリスト表示。このデータの流れを「インターフェース設計」と呼びます。

テーブル設計時の「後から変えにくいこと」: ①主キーの型（後からINTをUUIDにするのはコストが高い）②カラムの制約（NOT NULLを後から追加するとデータ移行が大変）③正規化の粒度（後から分割するのは困難）。初期設計で決めたことを後から変えるコストを意識すると、「最初に確認しておくべきこと」が見えてくる。

重要ポイント

モック=見た目のみ/プロトタイプ=部分的に動く。確認目的に応じて使い分ける
画面遷移を先に書くと「APIで何が必要か」が分かる
データの流れ（リクエスト→API→DB→レスポンス）を追えるようになる
主キーの型・制約・正規化は後から変えにくい。初期設計で確認する

理解度チェック

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

FAQ一覧の画面を設計するとき、「カテゴリで絞り込み」機能を実現するためにAPIに必要なものはどれ？

ヒントを見る

URLパラメータ（クエリストリング）でカテゴリをAPIに伝えるにはどうすればよいでしょうか？

SQL演習ブラウザ内SQLite

FAQ自動化ツールのDBを設計します。以下のテーブル定義を使って： ① カテゴリが 'VPN' の公開済みFAQを、閲覧回数の多い順で3件取得するクエリを書いてください。（is_published = 1 が公開済み）

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

CREATE TABLE faqs (
  id          INTEGER PRIMARY KEY AUTOINCREMENT,
  question    TEXT    NOT NULL,
  answer      TEXT    NOT NULL,
  category    TEXT    NOT NULL,
  view_count  INTEGER NOT NULL DEFAULT 0,
  is_published INTEGER NOT NULL DEFAULT 1,
  created_at  TEXT    NOT NULL DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO faqs (question, answer, category, view_count, is_published) VALUES
  ('VPNが接続できない場合の対処法は？', 'まずネットワーク設定を確認し、VPNクライアントを再起動してください。', 'VPN', 156, 1),
  ('VPNのパスワードを忘れた場合は？', 'ITヘルプデスクにパスワードリセットを申請してください。', 'VPN', 89, 1),
  ('在宅勤務時のVPN接続方法は？', '社内ポータルの「リモートアクセス手順書」を参照してください。', 'VPN', 203, 1),
  ('Slackの通知をオフにする方法は？', '設定 > 通知 からすべての通知をオフにできます。', 'Slack', 74, 1),
  ('パスワードのリセット手順は？', 'ログイン画面の「パスワードを忘れた方はこちら」からリセットできます。', 'password', 312, 1),
  ('VPN接続中にネットが遅い場合は？', 'スプリットトンネリングの設定を確認してください。（下書き）', 'VPN', 12, 0);

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

SELECT id, question, answer, view_count
FROM faqs
WHERE category = 'VPN'
  AND is_published = 1
ORDER BY view_count DESC
LIMIT 3;

スキルセルフチェック

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

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

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