前回は、技術選定と画面設計を進めました。

ただ、そこで少し手を動かしてみて感じたのが、
詳細設計に入る前に、そもそもこのアプリケーション全体がどう動くのかを整理しておいたほうがよさそう ということでした。

順番としては少し前後しているのですが、今回はその整理のために C4モデル を使って、システムの全体像をまとめてみました。

🧭 今回やったこと

今回は、C4モデルのうち

Context
Container

の2つを作成しました。

逆に、Component まではまだやっていません。

理由としては、Component のレベルまで入ると、API設計やバックエンドの詳細な責務分割にかなり関わってくるからです。
現状、バックエンドのアーキテクチャはまだ設計中なので、今回はまず 全体像を整理するところまで に留めました。

🤔 なぜこのタイミングでC4モデルを作ったのか

前回、技術選定や画面設計を進めていたのですが、
その一方で「このアプリケーションが外部システムとどう関わって、内部でどう構成されるのか」をまだはっきり言語化できていませんでした。

画面は見えていても、

認証はどう通るのか
フロントとバックエンドはどうつながるのか
コスト情報はどこからどう取得するのか
データベースはどこで責任を持つのか

みたいな、システムとしての流れが曖昧なままだったんですよね。

そこで、一度詳細から少し離れて、全体像を見直す意味で C4モデルを作ることにしました。

📌 Context図を作ってみた

まずは Context 図です。

Context図では、このサービスが外部のどんなシステムやユーザーと関わるのかを整理しました。

今回の図では、

利用者である Developer
認証を担当する Login System
コスト情報を収集する Cost Information Collect System
そして中心となる Dev Cost Simulator

の関係を表しています。

ここを描いてみると、
「このサービス単体で完結しているわけではなく、認証やコスト情報取得の仕組みと接続して初めて成立するんだな」ということが改めて見えやすくなりました。

🏗️ Container図も作成した

次に、Container図も作りました。

Container図では、システム内部をもう少し具体化して、

Web Application（Next.js）
API Application（FastAPI）
Database（PostgreSQL）

という形で整理しています。

前回技術選定の記事でも書いた構成ですが、
図として落としてみると、単に技術スタックを並べるだけよりも、それぞれがどういう責務を持つのか が見えやすくなった気がします。

たとえば、

Web Application はブラウザに機能を提供する
API Application はコスト管理のロジックを担う
Database はコスト情報やユーザー情報を保持する

という役割分担を、視覚的に確認できるようになりました。

✋ Component図まではまだ作っていない

今回は C4モデルの Context と Container までに留めました。

Component図まで行くと、たとえば

APIの責務をどう分割するか
バックエンドの内部モジュールをどう切るか
認証やコスト取得処理をどこに持たせるか

といった、かなり詳細な設計に入ってきます。

でもそこは、まだバックエンドアーキテクチャの検討が途中なので、今の段階で無理に決めきるより、
まずは システム全体の輪郭を揃えること を優先しました。

このあたりは、今後実装を進めながら詰めていくことになりそうです。

🎥 C4モデルを学びながら、draw.ioテンプレも作った

今回 C4モデルを作るにあたって、公式の動画も見ながら学び直しました。

正直、名前だけ聞いたことはあっても、実際に自分のプロダクトに当てはめて描いてみるのは今回がかなり大きかったです。

特に、

まず Context で外との関係を整理する
次に Container で内部の大きな構成を分ける
さらに必要なら Component に進む

という粒度の切り方は、かなり分かりやすいなと思いました。

また、動画内で使われていた図のマテリアルも参考にしながら、draw.io 用のテンプレートも作ってみました。
今後また別の図を書くときにも使い回せそうなので、これも地味に収穫でした。

もし使えそうなら、テンプレートも自由に使ってもらえたらうれしいです。

📝 3日目のまとめ

今回は、順番としては少し前後しつつも、詳細設計に入る前に C4モデルを使ってシステムの全体像を整理しました。

作成したのは、

Context図
Container図

の2つです。

派手な進捗ではないかもしれませんが、
技術選定や画面設計だけでは見えにくかった「このアプリケーションがどう成立するのか」を、一度整理できたのはかなりよかったと思っています。

次は、この整理をもとにしながら、バックエンドのアーキテクチャやAPI設計の部分をもう少し詰めていきたいです.