メインコンテンツまでスキップ

第2章　題材紹介「学食モバイル注文」🍙📱✨

ここから先の章は、ぜんぶこの題材で進めるよ！迷子にならないように「何を作るか」を先にガチッと固めちゃおう🧭💛

1) この章のゴール🎯✨​

この章が終わったら、次ができる状態になるのがゴールだよ😊

  • どんなアプリか、**登場人物（利用者）**が説明できる🙋‍♀️🙋‍♂️
  • 画面（注文・支払い・一覧・集計）の全体像が描ける🖊️🗺️
  • 機能を 「更新系（Command）」 と 「参照系（Query）」 に仕分けできる🗂️✅
  • 「今回はやる」「今回はやらない」がハッキリしてる✂️😆

2) まずはストーリー（利用シーン）🍽️💬​

cqrs_ts_study_002_scenario.png

想像しやすいように、アプリの“日常”を先に作っちゃうよ📖✨

登場人物👥​

  • 学生（ユーザー）：スマホで注文＆支払い📱💳
  • 学食スタッフ（店員）：注文を受けて作って渡す👩‍🍳🔥
  • 管理者（同じくスタッフ扱いでもOK）：売上や人気メニューを見る📊👀

1日の流れ（ざっくり）⏰✨​

  1. 学生がメニューを見る🍛🍜
  2. カートに入れて注文する🧺➡️🧾
  3. 支払いする（今回は“支払ったことにする”でもOK）💳✨
  4. スタッフが注文一覧で調理→受け渡し🍳➡️🎁
  5. 管理者が「今日の売上」「人気TOP3」を見る📊🏆

3) 画面の全体像（ワイヤーフレーム感）🖥️🧩​

cqrs_ts_study_002_wireframe.png

「どの画面があるか」を先に固定するよ🧷✨（細かいUIは後でOK）

学生側📱​

  • メニュー一覧（カテゴリ・売り切れ表示）🍙🍟
  • カート（数量変更・合計表示）🧺🧮
  • 注文確認（最終チェック）🧾👀
  • 支払い（支払いボタン・完了）💳✅
  • 注文履歴 / 注文状況（ステータスを見る）🕒📦

スタッフ/管理側🖥️​

  • 注文キュー（新規注文が並ぶ）📥📋
  • 売上集計（日別売上・人気メニューTOP3）📊🏆

4) “状態”があるとCQRSが気持ちよくなる😆✨​

注文って「途中経過」があるよね？これが分離の練習にちょうどいいの🍙➡️📦

注文ステータス（最小セット）🔖​

  • ORDERED：注文した（未払いでもOKにする）🧾
  • PAID：支払い済み💳
  • READY：受け渡し準備できた🎁

※本当は COOKING とか PICKED_UP とか増やせるけど、最初は増やしすぎないのが勝ち✌️🙂

5) 機能をぜんぶ書き出す（ここ大事！）📝✨​

いったん“欲しくなる機能”を全部出してから、整理していくよ🧠💕

まずは機能一覧（思いつくまま）💡​

学生

  • メニューを見る（カテゴリ、売り切れ）👀🍛
  • カートに入れる / 数量変更 / 削除🧺🔁
  • 注文する🧾✅
  • 支払う💳✨
  • 注文状況を見る🕒📦
  • 注文履歴を見る📚

スタッフ/管理

  • 注文一覧を見る（新しい順）📋🆕
  • 注文を「準備できた」にする🎁✅
  • 売上を見る📊
  • 人気メニューTOP3を見る🏆🍙
  • （将来）メニュー追加・価格変更・売り切れ切替🛠️🍛

6) 仕分けタイム！Command と Query に分ける🗂️✨​

ここが「読み/書き分離」の入口だよ😊 ざっくりルールはこれ👇

  • Command（更新）：状態が変わる（データが書き換わる）✍️🔥
  • Query（参照）：見るだけ（状態を変えない）👀🧼

仕分け例（この教材で使う“正解”）✅​

Command（更新系）✍️

  • 注文する（PlaceOrder）🧾✅
  • 支払う（PayOrder）💳✨
  • 準備できたにする（MarkOrderReady）🎁✅（今回は“将来枠”でもOK）

Query（参照系）👀

  • 注文一覧を見る（GetOrderList）📋
  • 売上集計を見る（GetSalesSummary）📊
  • メニュー一覧を見る（GetMenuList）🍛👀（最初は固定データでもOK）

CQRSは「更新モデル」と「参照モデル」を分ける考え方で、状況によっては強いけど複雑さも増えるよ、という注意も有名だよ⚖️🙂。 (martinfowler.com)

7) この教材では“ここまで作る”を固定する📌✨​

やることが増えると、学習って一瞬で迷子になるからね😵‍💫💦 なので、完成条件を先に決めちゃうよ🎉

今回のMVP（最小で動く版）🚀​

  • Command 2本：

    • PlaceOrder（注文する）🧾
    • PayOrder（支払う）💳

  • Query 2本：

    • GetOrderList（注文一覧）📋
    • GetSalesSummary（売上集計）📊

  • 投影（Projection）は後半で（最初は同期でもOK）🪞⚡

この“4本柱”が、37章の背骨になるよ🦴✨

8) ミニ演習：付箋でやると超わかる📝✨​

紙でも、メモ帳でも、なんでもOKだよ😊

演習A：付箋化🧷​

  1. 機能を1つずつ書く（例：支払う、売上を見る…）
  2. **Command（更新）**の山と **Query（参照）**の山に分ける
  3. 分けた理由を1行で書く✍️🙂

チェックのコツ✅

  • 「DBの中身が変わる？」→変わるならCommand寄り
  • 「画面表示のために取ってくるだけ？」→Query寄り
  • 「ログ書く」はあるけど、基本は“業務データを変えない”ならQuery扱いでOK🙆‍♀️（細かい例外は後で！）

演習B：画面→必要なQueryを逆算🔎​

たとえば「注文一覧」画面って、何が必要？

  • 注文ID
  • 注文時刻
  • 合計金額
  • ステータス（ORDERED/PAID/READY）
  • 注文明細の要約（品目数とか）

こうやって “画面が欲しい形が正義” を体験しておくと、後で超ラクになるよ😇✨

9) AI活用🤖✨（この章で使うと強い使い方）​

AIは「答えを当てる」より、整理と見落とし防止が得意だよ🧠✅

使えるプロンプト例💬​

  • 「学食モバイル注文アプリの機能を20個出して、Command/Queryに分類して。分類理由も1行ずつ」
  • 「注文ステータス案を5つ出して。学習用に最小セットも提案して」
  • 「注文一覧画面に必要な表示項目を、ユーザー向け/スタッフ向けに分けて提案して」

AIの回答を“信じすぎない”コツ😆🛡️​

  • 増やしすぎ提案をしてきたら「今回はMVPだから削る！」って言ってOK✂️✨
  • 特に“管理機能”は無限に増えるので、教材では線引きが大事🧠💕

※あと、最近は「面接課題っぽいリポジトリを開かせてVS Code経由で悪さする」みたいな手口も報告されてるから、知らないリポジトリは慎重にね🧯😅 (TechRadar)

10) ちょこっとだけ最新事情メモ（安心用）🗞️✨​

教材の中身は普遍的だけど、周辺ツールは動くので一応メモだけ📌

  • TypeScriptは現時点で npm 上の最新が 5.9.3 として表示されてるよ📦✨ (NPM)
  • 近い将来に向けて、TypeScript 6.0/7.0（ネイティブ移行含む）へ進む話が公式に出てるよ🚄 (Microsoft for Developers)
  • Node.js は v24 系が LTS として動いてて、2026-01-13 に 24.13.0 のセキュリティリリースも出てる🛡️ (Node.js)
  • VS Codeは 2026-01-08 に 1.108 系のリリースノート更新が出てるよ🧰✨ (Visual Studio Code)

（ここは“読むだけ”でOK！以降は手を動かすのが主役だよ😊）

11) 次章へのつなぎ🚪✨​

次の第3章では、わざと “分けない版” を作ってみるよ😅🔧 「1つのサービスに create と list を雑に入れる」→「うわ、つら…」を体験してから、気持ちよく分離に入る流れね😆✨