🧩 はじめに
パソコンの中だけで完結する処理（ローカル処理）と、インターネットを介して行われる処理（ネットワーク処理）では、データの扱われ方が大きく異なります。
この記事では、データがどのように形を変えながら、ユーザーの画面（ビュー）に届くのかを、ネットワーク層の観点から整理します。
1️⃣ ローカルとネットワークの違い
| 観点 | ローカル（PC内） | ネットワーク（外部通信） |
|---|---|---|
| データの形 | ビット／バイト（電気信号レベル） | パケット（送信用の小包） |
| 主な制御 | OSとCPUが直接制御 | TCP/IPプロトコルで制御 |
| 範囲 | 端末内 | 複数の端末・サーバー間 |
| 信頼性 | 自分のPC内なので高い | 通信経路が多く、制御が必要 |
ローカルではCPUがOSを通じてデータを処理します。
しかしネットワーク通信では、「どうやって相手に正確に届けるか」という制御が必要になります。
ここで登場するのがTCP/IPモデルです。
2️⃣ TCP/IPモデルの階層構造
ネットワーク通信は、次のような階層構造で整理されています。
┌────────────────────────┐
│ アプリケーション層（HTTP, HTTPSなど）│ ← ユーザーが操作する世界（ビューに近い）
├────────────────────────┤
│ トランスポート層（TCP / UDP） │ ← 正確に届けるための制御
├────────────────────────┤
│ インターネット層（IP） │ ← どこに届けるか（住所管理）
├────────────────────────┤
│ ネットワークインターフェース層 │ ← 実際にケーブルやWi-Fiで送る
└────────────────────────┘
各層は独立しており、上位層は下位層の詳細を知らなくても通信が可能です。
これにより、柔軟で拡張性のある通信が実現しています。
3️⃣ データの流れ（ローカル入力 → ネットワーク通信 → ビュー出力）
┌────────────────────────────────────────────┐
│ 👤 [ユーザーの入力] │
│────────────────────────────────────────────│
│ ・キーボード入力 / マウス操作 / タップなど │
└────────────────────────────┬───────────────┘
│
▼
┌────────────────────────────────────────────┐
│ 🧠 [アプリケーション層（ブラウザなど）] │
│────────────────────────────────────────────│
│ ・ブラウザがHTTPリクエストを生成 │
│ ・「どんな情報をほしいか」を整理 │
└────────────────────────────┬───────────────┘
│
▼
┌────────────────────────────────────────────┐
│ ⚙️ [トランスポート層（TCP）] │
│────────────────────────────────────────────│
│ ・データを小さなパケットに分割 │
│ ・順序番号を付けて再送制御を設定 │
│ ・安全に届くように信頼性を担保 │
└────────────────────────────┬───────────────┘
│
▼
┌────────────────────────────────────────────┐
│ 🛰️ [インターネット層（IP）] │
│────────────────────────────────────────────│
│ ・宛先のサーバーIPアドレスを指定 │
│ ・ルータ経由で最適経路を選択 │
└────────────────────────────┬───────────────┘
│
▼
┌────────────────────────────────────────────┐
│ 📡 [ネットワークインターフェース層] │
│────────────────────────────────────────────│
│ ・LANケーブルやWi-Fiで実際に電気信号を送信 │
│ ・物理的にデータを外へ運ぶ │
└────────────────────────────┬───────────────┘
│
▼
┌────────────────────────────────────────────┐
│ 🖥️ [サーバー側処理] │
│────────────────────────────────────────────│
│ ・受信したパケットを再構築 │
│ ・アプリがDBやストレージへアクセス │
│ ・必要なデータを抽出 │
└────────────────────────────┬───────────────┘
│
▼
┌────────────────────────────────────────────┐
│ 💻 [アプリケーション層（サーバー側）] │
│────────────────────────────────────────────│
│ ・HTML / JSON / APIレスポンスを生成 │
│ ・ブラウザに返す準備を行う │
└────────────────────────────┬───────────────┘
│
▼
┌────────────────────────────────────────────┐
│ 🔁 [ネットワーク層を逆方向に戻る] │
│────────────────────────────────────────────│
│ ・同じTCP/IPルートを逆経路で通り、クライアントに戻る │
└────────────────────────────┬───────────────┘
│
▼
┌────────────────────────────────────────────┐
│ 🌐 [ユーザーのブラウザ] │
│────────────────────────────────────────────│
│ ・受け取ったHTML/CSS/JSを解析 │
│ ・DOMツリーを構築し、画面を描画 │
└────────────────────────────┬───────────────┘
│
▼
┌────────────────────────────────────────────┐
│ 🪞 [ビューとして表示] │
│────────────────────────────────────────────│
│ ・画面上に結果を反映 │
│ ・クリックなどで再び入力サイクルへ │
└────────────────────────────────────────────┘
4️⃣ データの形の変化を追う
| フェーズ | データの形 | 主体 | 補足 |
|---|---|---|---|
| 入力（ローカル） | テキスト、クリック、画像など | ユーザー | アプリがイベントとして受け取る |
| アプリ送信時 | HTTPリクエスト（JSONなど） | OS / TCP/IP | データはパケット化される |
| 通信中 | パケット | ルータ・スイッチ | IPアドレス単位で転送される |
| サーバー受信 | リクエストオブジェクト | サーバーOS / ミドルウェア | パケットを再構築して解釈 |
| ストレージアクセス | データベースクエリ結果 | DB / OS | 一時的にストレージに展開される |
| レスポンス送信 | HTML, JSON | サーバーアプリ | 再びパケットとして送信 |
| 表示（ビュー） | DOMツリー（ブラウザ内） | ブラウザ | ユーザーが見る形に変換 |
5️⃣ まとめ
- ローカルでは「処理の正確さ」 が主眼。
- ネットワークでは「通信の確実さ」 が主眼。
- データは常に「形」を変えながら、階層をまたいで流れている。
- 最終的には、ストレージ → ネットワーク → ブラウザのビューという形で循環している。
🧭 この記事のポイント
データはただ送られているのではなく、
階層ごとのルールに従い、形を変えながら安全に運ばれている。
この理解があると、アプリ設計・インフラ設計・セキュリティ設計のすべてに一貫した視点を持てるようになります。