はじめに
💭「気づいたらAPI書いてるけど、これ誰が呼んでんの？」
💭「React側で何やってんの？」
💭「DB？あるの？どこに？」
という気持ちになりがちの途中からプロジェクトに参加した人へ書きました。
「何がどこにあるか分からない」という方向けに、3層システムの構造と役割、そしてチェックポイントを整理しました。
🔍 3層構成をわかるようにするには？
よくあるWebアプリケーションは、以下の登場人物とその間を繋ぐ通信を追うことで全体像が見えてくるような気がします
- クライアント（ユーザー）：アプリを操作する起点
- フロントエンド：UIを表示し、APIと通信する
- Webサーバ（バックエンド）：処理を行い、DBと連携する
- データベース：アプリのデータを保存・取得する
✅ リクエストの流れとチェックポイント（全体構成を掴むために）
| 階層（通信ステップ） | 役割 | 全体把握のためのチェックポイント |
|---|---|---|
| クライアント（ユーザー） | アプリを操作する起点 | - どんな操作が起点になる？（例：検索、投稿） - どの端末・ブラウザが対象か？ - 操作がどのイベントとしてフロントに伝わるか？ |
| クライアント → フロントエンド | UIを取得するリクエスト（HTML, JSなど） | - どこでホストされてる？（CDN, Nginx, S3 etc） - HTTPSでの配信か？ - HTML/CSS/JSなどの構成はどうなってる？ |
| フロントエンド | ユーザー操作をAPIに橋渡し／UI描画 | - どの技術スタック？（React, Vueなど） - SPA or SSR？ - 状態管理の仕組みは？ - どのAPIと通信してる？ |
| フロントエンド → Webサーバ（API） | API呼び出し（fetch, axiosなど） | - リクエスト形式（REST/GraphQL） - どのタイミングでどのAPIを叩いている？ - エンドポイントの構成と役割の関係性 |
| Webサーバ（API） | ロジック処理／DBとの連携 | - 使用フレームワーク（Express, Spring Bootなど） - 各エンドポイントの役割 - バックエンドが何を処理し、何を返すのか？ |
| Webサーバ（API） → データベース | データの取得・保存リクエスト | - どのテーブル or コレクションにアクセスしてる？ - ORM使ってる？生SQL？ - どんな条件で検索・更新してる？ |
| データベース | 永続的なデータの保存 | - データ構造（テーブル設計やスキーマ） - どのデータがいつ更新／参照されるか？ - 外部と連携する部分はあるか？ |
🛠️ 実際にやるべきこと（例）
- APIを触るとき：「このエンドポイント、フロントからどう呼ばれてる？」
- DBを読むとき：「どのテーブルがどんなロジックから使われてる？」
- 状態管理を見るとき：「UIのどの操作が、どのAPIにつながってる？」
✨ まとめ
頑張ろう。