1.1 ウェブサービスはどのように機能するのか？

こんにちは！皆さんは毎日スマートフォンでカカオトークをしたり、YouTubeを見たり、クーパンでショッピングをしていますよね？しかし、これらのアプリがどのように機能しているのか気になりませんか？

今日は、私たちが当たり前に使用しているウェブサービスの秘密を探ってみましょう！

ウェブサービスは3階建ての家のようです

ウェブサービスを3階建ての家に例えてみましょう。各階には異なる仕事をする人々が住んでいます。

┌─────────────────────────────────────┐
│    3階: データベース                │
│     すべての情報を保存する倉庫       │
│    - 会員情報、商品情報、注文履歴     │
├─────────────────────────────────────┤
│    2階: バックエンド                │  
│     見えない労働者たち              │
│    - 計算、処理、ビジネスロジック    │
├─────────────────────────────────────┤
│    1階: フロントエンド              │
│     私たちが見る美しい画面          │
│    - ボタン、画像、ユーザーインターフェース│
└─────────────────────────────────────┘

1階: フロントエンド - 私たちが見る美しい画面

1階はフロントエンド（Frontend）です。ここは私たちが直接見て触れる場所です。

スマートフォンアプリ画面: ボタン、画像、テキストなど
ウェブサイト画面: ネイバーメインページ、YouTube動画画面
デザイン: 美しい色、フォント、アニメーション

家に例えると玄関とリビングルームです。客（ユーザー）が最初に見る空間です！

2階: バックエンド - 見えない労働者たち

2階はバックエンド（Backend）です。ここでは実際の作業が行われますが、私たちの目には見えません。

計算と処理: ログイン確認、商品検索、支払い処理
ビジネスロジック: "このユーザーはこの商品を購入できるか？", "割引を適用すべきか？"
トラフィック整理: 多くのユーザーのリクエストを順番に処理

家に例えると台所です。おいしい料理（データ処理）をする場所ですが、客が直接入ることはできません！

3階: データベース - すべてを記憶する倉庫

3階はデータベース（Database）です。ここはすべての情報が整理されて保存されています。

会員情報: 名前、メールアドレス、パスワード、住所
商品情報: 価格、在庫、説明、画像
記録: 注文履歴、支払い情報、配送状況

家に例えると倉庫と書庫です。すべての重要な物や記録が体系的に保管されています！

実際の例: クーパンで「ワイヤレスイヤホン」を注文する

さて、皆さんがクーパンでワイヤレスイヤホンを注文するプロセスを追って、各階で何が起こっているか見てみましょう！

データの旅: 「ワイヤレスイヤホン」の検索プロセス

ユーザー               ウェブサービス 3階建ての家
                    ┌─────────────────────────┐
  "ワイヤレスイヤホン"    │ 3階:  データベース     │
     検索! ──────┐   │ SELECT * FROM 商品     │
                  │   │ WHERE 商品名 LIKE      │
     ↓             │   │ '%ワイヤレスイヤホン%'...│
                  │   ├─────────────────────────┤
   画面に        │   │ 2階:  バックエンド     │
   結果表示 ←─────┘   │ • 検索処理             │
                      │ • ソート＆フィルタリング  │
                      │ • 割引額計算           │
                      ├─────────────────────────┤
                      │ 1階:  フロントエンド    │
                      │ • 検索窓               │
                      │ • ローディング画面        │
                      │ • 結果画面             │
                      └─────────────────────────┘

1段階: 検索窓に「ワイヤレスイヤホン」を入力！

フロントエンド(1階)で:
- 皆さんが検索窓をタッチします
- 「ワイヤレスイヤホン」を入力します
- 検索ボタンを押します
- 「ちょっと、検索結果を探しています...」というローディング画面が表示されます

2段階: バックエンドが一生懸命働いています！ ‍

バックエンド(2階)で:
バックエンド: "あ、誰かがワイヤレスイヤホンを探しているんだ！" バックエンド: "データベースよ、ワイヤレスイヤホン商品を探してくれる？" バックエンド: "あ、そしてこのユーザーが好きそうな商品を選んで！" バックエンド: "価格も低い順に並べてくれ！"

3段階: データベースが返答します！

データベース(3階)で:
```sql
データベース: "ちょっと、探してみるわ..."
SELECT 商品名, 価格, 画像, 評価, 在庫数量
FROM 商品リスト
WHERE 商品名 LIKE '%ワイヤレスイヤホン%'
AND 在庫数量 > 0
ORDER BY 価格 ASC;

データベース: "見つけたわ！合計347個の商品があるわ！"
```

4段階: バックエンドが結果をきれいに包装します！

バックエンド(2階)で:
バックエンド: "347個は多すぎる。人気のある商品20個だけ選んで" バックエンド: "割引情報も計算して、配送料も確認して..." バックエンド: "ユーザーの位置に基づいて配送予定日も計算しないとね！" バックエンド: "さあ、これから1階に送ろう！"

5段階: きれいな画面で表示します！

フロントエンド(1階)で:
- 商品リストがきれいに並んで表示されます
- 各商品の写真、価格、評価が表示されます
- "ロケット配送"、"無料配送"などのタグも付いています
- スクロールするとさらに多くの商品が表示されます

6段階: 商品をクリックしてカートに！

このプロセスも同様に1階→2階→3階→2階→1階の順で行われます！

ユーザー                   ウェブサービス処理プロセス
                        ┌─────────────────────┐
"カートに入れる"         │ 3階:  データベース   │
      クリック! ──────1──→   │ UPDATE 在庫 SET      │
                        │ 数量 = 数量 - 1      │
  ↓                     │ INSERT INTO カート    │
                        ├─────────────────────┤
"追加されました!" ←──5── │ 2階:  バックエンド   │
    メッセージ表示         │ • 在庫確認    ←──3─┘│
                        │ • 権限確認    ──4──→│
                        │ • クーポン計算        │
                        ├─────────────────────┤
                        │ 1階:  フロントエンド  │
                        │ • ボタンクリック検知 ──2─┘│
                        │ • 成功メッセージ表示    │
                        └─────────────────────┘

1階: "エアーポッドプロをカートに入れる"ボタンをクリック
2階: "このユーザーがこの商品を購入できるか？在庫はあるか？"
3階: "在庫1個を減らして、カートテーブルに追加！"
2階: "割引クーポンはあるか確認し、合計金額を計算して！"
1階: "カートに追加されました！"

なぜこのように複雑に分かれているのか？

"ひとつのプログラムにすればいいのに？"と思うかもしれません。しかし、このように分ける理由があります！

1. 役割分担で効率UP！ ‍‍‍

デザイナー: 1階（フロントエンド）で美しい画面を作成
バックエンド開発者: 2階でビジネスロジックを実装
データベース専門家: 3階でデータ構造を設計

それぞれ専門分野に集中することで、より良い結果が得られます！

2. 問題が発生しても迅速に解決！

もし画面が遅くなったら？
- 1階（フロントエンド）の問題か
- 2階（バックエンド）の問題か

- 3階（データベース）の問題か

簡単に見つけて修正できます！

3. 拡張が簡単！

ユーザーが増えたら？
- 2階（バックエンド）サーバーを増やすか
- 3階（データベース）を高速なものに交換するか
- 1階（フロントエンド）はそのまま！

必要な部分だけアップグレードすればよいです。

4. セキュリティが強化されます！

重要な情報（パスワード、支払い情報）は2階と3階にのみ保存
1階では必要な情報のみ表示
ハッキングされても被害を最小限に抑えられます

バックエンド開発者は何をするのか？

それでは、バックエンド開発者は具体的に何をするのでしょうか？

1. APIを作成する

フロントエンドとコミュニケーションするルールを作ります。
"ユーザー情報を取得して" → GET /user/123 "商品を検索して" → GET /products?search=ワイヤレスイヤホン "注文して" → POST /orders

2. ビジネスロジックを実装する

if (ユーザーがVIP顧客) {
    割引率 = 20%;
} else if (初購入顧客) {
    割引率 = 10%;
} else {
    割引率 = 0%;
}

3. データベースと対話する

-- 注文作成
INSERT INTO 注文 (顧客ID, 商品ID, 数量, 総額) 
VALUES (123, 456, 1, 89000);

-- 在庫減算
UPDATE 商品 SET 在庫数量 = 在庫数量 - 1 WHERE 商品ID = 456;

4. パフォーマンス最適化する

遅い部分を見つけて速くする
多くのユーザーが同時にアクセスしても耐えられるようにする
サーバーコストを節約する

5. セキュリティ管理する

ログインしたユーザーのみアクセスできるようにする
ハッキング試みを防ぐ
個人情報を暗号化する

まとめ...

ウェブサービスは3階建ての家のようです:

1階フロントエンド: 私たちが見る美しい画面
2階バックエンド: 実際の作業が行われる場所（私たちは見えません）
3階データベース: すべての情報が保存される倉庫

これらの3つの階がお互いに対話することで、私たちが使用する素晴らしいアプリやウェブサイトが作られます！

そして、皆さんがこの本を読んでいるということは... すぐにこの素晴らしい世界の一員になる準備をしているという意味です！

次のセクションでは、この中でも特にデータベースがなぜこのように重要であり、なぜ必要なのかを見ていきます。準備はできましたか？

ウェブサービスはどのように機能するのか？