情報モデルの状態遷移
概要
- 日程: Day 2 / セッション3
- 時間: 9:50-10:10
- 形式: 座学
- ゴール: CRUD(Create/Read/Update/Delete)を使って、状態遷移から機能とプレゼンテーションが抽出できる理由を説明できる
- 学習形式: 対話型解説
導入(5分)
🗣️ 要約
Webサービスの操作は「新しく登録する」「見る」「直す」「消す」という4つ(CRUD)に集約できる CRUDと状態遷移を整理すると、必要な機能とプレゼンテーション(画面)が見えてくる
さっき、身近なモデルを分解してみましたね。地図やレシピにも「分類」「命名」「パターン」「単純化」があることが見えてきたと思います。
今回はいよいよ、その考え方を「情報モデル」に適用します。ところで、Webサービスやアプリを触っていて、「新しく登録する」「見る」「直す」「消す」という4つの操作しかしていないな、と感じたことはありませんか?
実はこの4つの操作(CRUD)と、情報がどう変化していくか(状態遷移)を整理するだけで、作るべき機能とプレゼンテーション(画面)がほぼ自動的に見えてきます。このセッションが終わる頃には、なぜそうなるのかを説明できるようになっています。
本編(10分)
🗣️ 要約
情報に対する操作はCreate/Read/Update/Deleteの4つ(CRUD)に集約される 状態遷移図の矢印1本1本が機能の候補になり、状態や操作が画面(プレゼンテーション)の候補になる 状態遷移図は要件(ペルソナの視点)と実装(何を作るか)を繋ぐ橋渡し役
1. CRUDという4つの動作
🗣️ 要約
情報操作はCreate(作る)・Read(見る)・Update(直す)・Delete(消す)の4つに集約される 「ペルソナ同士を比較して議論する」のような人間側の思考プロセスはCRUDに当てはまらない
情報に対してコンピュータができることは、突き詰めると4つしかありません。
- Create(新規に作る)
- Read(見る)
- Update(直す)
- Delete(消す)
たとえば「ペルソナシート」という情報を考えてみましょう。「新しくペルソナを1人作る」はCreate、「作ったペルソナ一覧を見る」「1人分の詳細を見る」はRead、「ペルソナの年齢を直す」はUpdate、「不要になったペルソナを消す」はDeleteに該当します。一方、「ペルソナ同士を比較して議論する」はCRUDのどれにも当てはまりません。これは情報の操作ではなく、人間側の思考プロセスだからです。
ここで少し考えてみてください。昨日作った「情報定義書」に出てきた情報の1つを思い浮かべたとき、その情報に対してCRUDのどれが必要になりそうですか?
2. 状態遷移が機能とプレゼンテーションを教えてくれる
🗣️ 要約
情報がCRUDによって姿を変える様子を時系列で並べたものが「状態遷移」 状態遷移図の矢印1本1本が機能の候補になり、状態や操作ごとに必要な画面がプレゼンテーションの候補になる 状態遷移図は要件(ペルソナが何をしたいか)と実装(何を作るか)を繋ぐ橋渡し役
情報は、CRUDによって姿を変えていきます。これを時系列で並べたものが「状態遷移」です。
たとえば、ある情報は次のように状態が変わっていきます。
この図の矢印1本1本が「機能」の候補になります。「新規登録する機能」「一覧を見る機能」「詳細を見る機能」「更新する機能」「削除する機能」というように、状態遷移を描くだけで必要な機能がリストアップできるのです。
さらに、それぞれの状態や操作には「画面」が必要になります。新規登録には入力フォーム、一覧を見るには一覧画面、詳細を見るには詳細画面、というように、状態遷移図の矢印や箱が、そのまま「プレゼンテーション(画面)一覧」の候補にもなります。
つまり状態遷移図は、要件(ペルソナが何をしたいか)と実装(何を作ればよいか)を繋ぐ橋渡し役になっているのです。これは、いわば地図と実際の道のりの関係のようなものです。地図(状態遷移図)を見れば、どこに道(機能)を作ればよいかが分かる、というイメージです。
ここがポイント
特に注意してほしいのは、状態遷移図はシステムの実装方法(プログラミング言語やデータベースの種類)を決めるものではない、という点です。あくまで「ペルソナにとっての情報の変化」を描くものです。よくある間違いとして、いきなりテーブル設計やAPI設計から考え始めてしまうケースがありますが、正しくは、まず状態遷移という「情報の視点」で整理してから、実装に落とし込みます。
コラム
CRUDという言葉は、1983年頃にJames Martinというシステム開発の研究者が提唱したと言われています。面白いのは、CRUDはコンピュータの世界だけでなく、私たちの日常生活にもあふれていることです。冷蔵庫に食材を入れる(Create)、中身を確認する(Read)、賞味期限が近いものを手前に並べ替える(Update)、腐ったものを捨てる(Delete)。実は私たちは毎日、無意識にCRUDを実践しているのです。
💬 AIに聞いてみよう
🗣️ 要約
CRUDに当てはまらない操作の例、状態遷移図とフローチャートの違い、実務での状態遷移図の使用タイミングなどをAIに質問できる
ここまでの内容で疑問があれば、AIに質問してみましょう。たとえば:
- 「CRUDに当てはまらない操作の例をもっと教えて」
- 「状態遷移図とフローチャートは何が違うの?」
- 「実務では状態遷移図をどんなタイミングで書くの?」
まとめ(5分)
🗣️ 要約
状態遷移を描けば、機能とプレゼンテーションが見えてくる 次回は開発テーマの情報でdraw.ioを使い状態遷移図を描き、機能一覧・プレゼンテーション一覧を抽出する演習を行う
今回学んだことを一言でまとめると、「状態遷移を描けば、機能とプレゼンテーションが見えてくる」です。
次回は、実際に自分たちの開発テーマの情報を使って、この状態遷移図をdraw.ioで描き、機能一覧・プレゼンテーション一覧を抽出する演習に入ります。今回のCRUDと状態遷移の知識が土台になるので、しっかり押さえておきましょう。
🔄 振り返りチェック
🗣️ 要約
CRUDの4つの操作を、自分の開発テーマの情報を例に説明できるか 状態遷移図から機能とプレゼンテーションがなぜ抽出できるのか説明できるか
以下の問いに答えられるか確認してみましょう:
- CRUDの4つの操作を、自分の開発テーマの情報を例に説明できますか?
- 状態遷移図から機能とプレゼンテーションがなぜ抽出できるのか、説明できますか?
答えに自信がない場合は、該当部分を読み返すか、AIに質問してみてください。
補足資料
🗣️ 要約
参考リンクは特になし(社内資料・書籍があればチームで共有) 発展課題は、スマートフォンのアプリ1つを選び、その中の情報が辿る状態遷移を紙に描くこと
- 参考リンク: なし(社内資料・書籍等がある場合はチームで共有してください)
- 発展課題: 自分のスマートフォンの中にあるアプリを1つ選び、その中の情報が辿る状態遷移を紙に描いてみましょう
学習ガイド
🗣️ 要約
受講者からよく出る質問への回答例と、つまずきやすいポイントへの対処法をまとめている
このセクションは、受講者が理解を深めることをサポートする参考情報です。
想定される質問と回答例
🗣️ 要約
検索・並び替え・集計はReadの一種(見る対象を絞り込む・順序を変える)と捉えると整理しやすい 1つの情報に対してCRUDが全部揃わないこともある(例:ログ情報はCreateとReadのみで十分な場合が多い) 状態遷移図はまずペルソナ視点で描き、その後チームレビューでシステム視点を加える
| 質問 | ヒント |
|---|---|
| CRUD以外の操作(検索、並び替え、集計など)はどう考えればいい? | 検索や並び替えはReadの一種(見る対象を絞り込む・順序を変える)と捉えると整理しやすい |
| 1つの情報に対してCRUDが全部揃わないこともある? | ある。たとえば「ログ情報」はCreateとReadのみで、UpdateやDeleteが不要な場合が多い |
| 状態遷移図は誰が読む前提で描くの? | まずはペルソナ(利用者)の視点で描き、その後チーム内のレビューでシステム視点を加える |
つまずきやすいポイント
🗣️ 要約
いきなりデータベースのテーブル設計から考えてしまいやすい CRUDの4つに当てはまらない操作まで無理に当てはめようとしてしまいやすい(思考・判断は分類しなくてよい)
| つまずきポイント | ヒント |
|---|---|
| いきなりデータベースのテーブル設計から考えてしまう | 一度手を止めて「ペルソナは何をしたいか」に立ち返り、状態遷移図から先に描く |
| CRUDの4つに当てはまらない操作まで無理に当てはめようとする | 当てはまらない操作は「思考・判断」であることが多い。無理に分類しなくてよい |