こんにちは、かつコーチです。
ブラウザにURLを打ち込むと、一瞬でページが表示されます。
このとき裏側で何が起きているのか、説明できるでしょうか。
この記事では、Web通信の基本である「クライアント」と「サーバー」の関係を、身近な例に置き換えながら解説します。
読み終える頃には、Webサイトが表示される仕組みの土台が理解できるようになります。
クライアントとサーバーとは？
クライアント＝注文するお客さん、サーバー＝応えるお店
クライアントとは、サービスを利用する側の機器やソフトウェアのことです。
普段使っているブラウザ（Chrome、Safariなど）は、クライアントの代表例です。
一方サーバーとは、サービスを提供する側の機器やソフトウェアのことです。
たとえるなら、クライアントは「注文するお客さん」、サーバーは「注文に応えるお店」の関係だとイメージしてください。
レストランでお客さんがメニューを見て「これをください」と注文すると、お店の厨房が調理して料理を運んできます。
Web通信もこれと同じで、クライアント（ブラウザ）が「このページをください」とリクエスト（注文）を送ると、サーバーがそれに応じてレスポンス（料理）を返してくれるのです。
なぜこの関係が必要なのか
もしすべての機器が対等な立場で情報を持っていたら、どこに何のデータがあるのか探すだけで大変な手間がかかります。
サービスを提供する役割（サーバー）と、利用する役割（クライアント）に分けることで、役割分担が明確になり、効率的に情報をやり取りできるようになります。
人気のレストランが多くのお客さんに同時に対応できるように、1台のサーバーも、多くのクライアントからのリクエストに順番に対応する仕組みになっています。
実際の通信で仕組みを見る
ブラウザでURLを開いたときの流れ
ブラウザにURLを入力してEnterキーを押すと、次のような流れで通信が行われます。
- クライアント（ブラウザ）が、サーバーに向けて「このページの情報をください」というリクエストを送る
- サーバーがリクエストを受け取り、該当するページのデータを用意する
- サーバーが、用意したデータをレスポンスとしてクライアントに返す
- クライアントが受け取ったデータをもとに、画面にページを表示する
この一連のやり取りを、実際にコマンドで見てみましょう。
curl -v https://example.com
実行すると、以下のようなやり取りの様子が表示されます。
> GET / HTTP/1.1
> Host: example.com
> User-Agent: curl/8.1.2
> Accept: */*
>
< HTTP/1.1 200 OK
< Content-Type: text/html; charset=UTF-8
< Content-Length: 1256
<
<!doctype html>
<html>
<head>
<title>Example Domain</title>
</head>
...
>で始まる行がクライアントからサーバーへの「注文」、<で始まる行がサーバーからクライアントへの「返答」です。
普段ブラウザが自動でやってくれているこのやり取りを、curlコマンドを使うと自分の目で確認できます。
1つのサーバーが複数のクライアントに対応する仕組み
人気の飲食店が、同時に来た何人ものお客さんに順番に対応するように、Webサーバーも同時にアクセスしてきた複数のクライアントからのリクエストを処理します。
そのため、アクセスが集中するとお店の行列のようにサーバー側の処理が追いつかなくなり、ページの表示が遅くなることがあります。
大規模なサービスでは、複数のサーバーを用意してリクエストを分散させる仕組みが使われますが、これは今後の記事で改めて解説します。
よくあるつまずきポイント・エラー対処
「Connection refused」の意味がわからず戸惑った話
私が実際につまずいたのが、ローカル環境でAPIサーバーを立てずに、クライアント側だけ動作確認をしようとしたときのことです。
❌ Before
サーバーを起動しないまま、いきなりクライアントからアクセスしようとしました。
curl http://localhost:3000
curl: (7) Failed to connect to localhost port 3000: Connection refused
このエラーの意味がわからず、「クライアント側の設定が間違っているのか」と、しばらく的外れな箇所を調べていました。
✅ After
冷静に考えると、これは「お店が開店していないのに来店しても、誰も対応できない」のと同じ状態でした。
サーバーを起動してから、改めてアクセスしてみたところ、問題なく応答が返ってきました。
node server.js &
curl http://localhost:3000
{"message":"Hello, World!"}
「Connection refused」は、クライアント側のミスではなく「そもそもサーバーという店が開いていない」ことを示すエラーだと理解してから、同じような詰まりで悩む時間が大幅に減りました。
応用・一歩先の使い方
1つの機器がクライアントとサーバーを兼ねることもある
普段はクライアントとして動くブラウザですが、Webサーバー自身が別のサーバー（外部のAPIなど）にリクエストを送るときは、そのWebサーバーがクライアントの役割を果たします。
つまり「クライアント」「サーバー」というのは機器の種類ではなく、その通信における「役割」を指す言葉です。
お店が別の仕入れ先に発注するときは、お店自身が「注文するお客さん」になるのと同じイメージです。
次の記事では、クライアントとサーバーがやり取りするときの「共通ルール」であるTCP/IPについて解説していきます。
まとめ
この記事のポイント
- クライアントはサービスを利用する側、サーバーは提供する側という「役割」を表す
- ブラウザ（クライアント）のリクエストに、サーバーがレスポンスを返すことでページが表示される
curl -vを使うと、クライアントとサーバーの実際のやり取りを確認できる- 「Connection refused」は、サーバーが起動していないときに出るエラー
次に読むべき記事
クライアントとサーバーの関係がわかったら、次は通信のやり取りを支える共通ルールを見ていきましょう。
「TCP/IPとは？通信の共通ルールを理解する」で、データが正しく届く仕組みを解説しています。