この記事はシリーズの3回目です。
今回：どう繋げるのか（本記事）
はじめに
仕様書は読める。
I/Fも理解できる。
シーケンス図も分かる。
でも、
👉 コードに落とせない
前回の記事では、
👉 なぜ仕様書とコードが繋がらないのか
👉 「線で理解する」という考え方
について整理しました。
今回はその続きとして、
👉 実際にどうやって繋げるのか（再現できる手順）
を解説します。
この記事のゴール
この記事では、
👉 仕様書とコードを“自分で繋げられる状態”になること
を目的にしています。
前提：コード側にはすでに「線」がある
まず重要なポイントです。
👉 コードにはすでに処理の流れ（線）が存在しています
多くの現場では、次のような構造になっています。
・画面フロー（画面の繋がり）
・Flow（画面遷移・処理の流れ）
・ViewModel（画面ごとの処理）
・Service（外部連携）
・Model（データ）
処理はこう流れます。
👉 画面フローに沿ってFlowが動く
👉 FlowからViewModelが呼ばれる
👉 ViewModelで処理が実行される
👉 必要に応じてServiceで外部とやり取りする
👉 Modelからデータを取得・更新する
👉 つまり
👉 コード側にはすでに“1本の線”がある状態です
結論：やることは1つ
👉 このコードの流れに仕様書を当てはめるだけです
手順①：入口を決める
まずは1つの処理を選びます。
例：
・ボタン押下
・初期表示
・API実行
👉 「どこから始まるか」を必ず決める
手順②：画面フローで位置を確認する
次に画面フローを見て、
👉 この処理がどの画面に属するのか
を確認します。
・今どの画面か
・次にどこへ遷移するか
👉 ここがズレると全部ズレます
手順③：Flowを起点にコードを追う
ここが一番重要です。
👉 Flowから処理を追います
・どのViewModelが呼ばれているか
・どの処理が実行されているか
👉 Flowを見ることで
👉 処理の全体像が一気に見えます
手順④：ViewModel → Service → I/F を繋ぐ
次に処理の中身を追います。
👉 ViewModelの中で
・どのServiceを呼んでいるか
・どのI/Fを使っているか
を確認します。
👉 ここで
👉 シーケンス図とI/F仕様が繋がります
手順⑤：データの流れを追う
次に、
👉 その処理で使われているデータを追います
・この値はどこから来たのか
・どこで保持されているのか
・どこに渡されるのか
👉 Modelの役割を意識する
仕様書との対応関係
ここまで来ると、こうなります。
・画面フロー → Flow
・シーケンス図 → Flow〜Serviceの処理
・I/F仕様 → Serviceの処理
👉 つまり
👉 コードの流れに仕様書を対応付けるだけ
よくあるミス
多くの人がやってしまうのが、
👉 全部を一気に理解しようとすること
これは無理です。
👉 正解はこれ
👉 1つの処理だけを最後まで追う
これを繰り返すことで、
👉 全体が理解できるようになります。
それでも詰まるポイント
ここまでできても、
👉 手が止まるポイントがあります
それが👇
👉 データの設計
・どこで持つのか
・どう管理するのか
・どの単位で扱うのか
👉 これは資料には書かれていません
👉 ここからは設計の領域になります
※この内容は次回、具体例ベースで解説します
まとめ
仕様書とコードを繋げるためには、
👉 次の順番で考えます
1.入口を決める
2.画面フローで位置を確認する
3.Flowから処理を追う
4.ViewModel → Service → I/F を繋ぐ
5.データの流れを追う
👉 この流れが理解できれば、
👉 仕様書とコードは必ず繋がります
おわりに
同じように困っている方がいれば、
・どこで止まっているのか
・どこが繋がらないのか
ぜひコメントで教えてください。
今後の記事で取り上げていきます。
※仕事の都合上、返信が遅れる場合がありますが、必ず目は通しています。