サーバーとクライアント

「フロントエンドとバックエンドって何が違うの？」「サーバーってどんなコンピューター？」——ウェブ開発を学ぶと必ず出会うこれらの概念を整理します。クライアント・サーバーモデルを理解することで、ウェブアプリの設計や役割分担が明確に見えてきます。

対象読者: ウェブの仕組みに興味があるプログラミング入門者の方

学習時間の目安: 読了 10分

前提知識: ウェブの仕組みを読んでいると理解が深まります

クライアントとは

クライアント（Client）とは、サービスを要求する側のコンピューターやソフトウェアです。ウェブの文脈では、ブラウザ（Chrome・Safari・Firefox など）がクライアントの代表例です。

クライアントはユーザーの操作を受け取り、サーバーに「〇〇のデータをください」「〇〇を更新してください」といったリクエストを送ります。

クライアントの例:

ウェブブラウザ（Chrome・Safari・Firefox）
スマートフォンアプリ
デスクトップアプリ
CLIツール（curl コマンドなど）

サーバーとは

サーバー（Server）とは、クライアントからのリクエストを受け取り、処理してレスポンスを返す側のコンピューターやソフトウェアです。

レストランのウェイターに例えると分かりやすいです。お客さん（クライアント）が「ハンバーグ定食をください」と注文し、ウェイター（サーバー）がその注文を厨房に伝えて料理を持ってきます。

サーバーは特別なコンピューターではありません。技術的には、サーバーソフトウェアをインストールした普通のコンピューターでも動かせます。ただし実際のウェブサービスでは、24時間365日稼働・高負荷への対応のために、専用のサーバーやクラウドサービスが使われます。

クライアント・サーバーモデルの図解

ウェブの通信はすべて「リクエスト（要求）」と「レスポンス（応答）」のやりとりで成り立っています。

[クライアント（ブラウザ）]
      │
      │  ① HTTPリクエスト
      │  「/profile ページをください」
      ▼
[ウェブサーバー]
      │
      │  ② 処理（HTMLファイルを用意、DBに問い合わせなど）
      │
      │  ③ HTTPレスポンス
      │  「200 OK」+ HTMLデータ
      ▼
[クライアント（ブラウザ）]
      │
      └── ページを画面に表示

このやりとりは、ページを表示するたびに繰り返されます。画像・CSS・JavaScriptのファイルもそれぞれ個別のリクエスト/レスポンスで取得されます。

サーバーの種類

一口に「サーバー」といっても、役割によっていくつかの種類があります。

サーバーの種類	役割	例
ウェブサーバー	HTMLや静的ファイルを返す	Nginx・Apache
APIサーバー	データの取得・更新処理を担う	Node.js・Python（FastAPI）・Ruby on Rails
データベースサーバー	データを永続的に保存・検索する	MySQL・PostgreSQL・MongoDB
キャッシュサーバー	よく使うデータを一時保存して高速化する	Redis
ファイルサーバー	画像・動画などのファイルを配信する	AWS S3・Cloudflare R2

実際のウェブサービスでは、これらのサーバーが連携して動いています。

フロントエンドとバックエンドの概念整理

ウェブ開発は「フロントエンド」と「バックエンド」に大きく分かれます。

フロントエンド（Frontend）はユーザーが直接目にする部分、つまりクライアント側の実装です。

担当: ブラウザ上の表示・インタラクション
技術: HTML・CSS・JavaScript
役割: ユーザーの操作を受け取り、サーバーにリクエストを送り、受け取ったデータを画面に表示する

バックエンド（Backend）はユーザーからは見えない部分、つまりサーバー側の実装です。

担当: データ処理・ビジネスロジック・データベース操作
技術: Node.js・Python・Ruby・Go・Java など
役割: リクエストを受け取り、適切な処理を行い、結果をレスポンスとして返す

	フロントエンド	バックエンド
動く場所	ブラウザ（クライアント）	サーバー
ユーザーからの見え方	直接見える	見えない
主な技術	HTML・CSS・JavaScript	各種サーバーサイド言語
例	ボタンのデザイン・アニメーション	ユーザー認証・決済処理

両方を扱えるエンジニアを フルスタックエンジニア と呼びます。

実例：SNSのいいねボタンを押したとき

「いいねボタンを押す」という操作が、裏側でどのように処理されるかを追ってみます。

① [ブラウザ（フロントエンド）]
   ユーザーが「いいね」ボタンをクリック

② [JavaScript がリクエストを生成]
   POST /api/posts/123/likes
   （「投稿ID=123にいいねする」というリクエスト）

③ [APIサーバー（バックエンド）]
   リクエストを受け取り、ユーザーが認証済みか確認
   ↓
   データベースサーバーに「いいね数を+1して」と指示

④ [データベースサーバー]
   posts テーブルの id=123 の likes_count を更新

⑤ [APIサーバー → ブラウザ]
   レスポンス: { "likes_count": 42 }

⑥ [ブラウザ（フロントエンド）]
   画面上のいいね数を「42」に更新して表示

このように、一つの操作の裏側でフロントエンド・バックエンド・データベースが連携して動いています。

まとめ

クライアント はリクエストを送る側（ブラウザ・アプリなど）
サーバー はリクエストに応答する側（ウェブサーバー・APIサーバーなど）
クライアント・サーバーモデルは「リクエスト/レスポンス」のやりとりで成り立つ
フロントエンド はブラウザ側（見える部分）、バックエンド はサーバー側（見えない部分）

よくある質問

Q: サーバーは常に起動していないといけませんか？

A: ウェブサービスとして公開する場合は基本的に常時起動が必要です。ただし、サーバーレス（Serverless）という仕組みを使うと、リクエストがあったときだけサーバーが起動するため、コスト削減が可能です。Vercel・AWS Lambda などがこの方式を採用しています。

Q: フロントエンドとバックエンドはどちらから学べばよいですか？

A: 一般的にはフロントエンド（HTML・CSS・JavaScript）から始める方が画面の変化を視覚的に確認できるため学習が進みやすい傾向があります。ただし、どちらから始めても問題ありません。

Q: 個人のパソコンをサーバーにすることはできますか？

A: 技術的には可能です。ただし、自宅のPCを24時間起動し続けることになり、電気代・セキュリティリスク・IPアドレスの変動などの課題があります。実際のウェブサービスにはクラウドサービスの利用が推奨されます。

参考資料

このページへのリンク（英語）: Servers and Clients