リクエストとレスポンスとは｜お願いと返事でWebを理解する

自分の言葉で説明してみよう

次の操作を、リクエストとレスポンスに分けて書いてみます。

1. 検索ボタンを押す
2. ログインする
3. ページ内の画像を表示する

リクエストとは、＿＿＿＿＿＿＿＿＿＿＿＿から＿＿＿＿＿＿＿＿＿＿＿＿に送るお願いです。
レスポンスとは、＿＿＿＿＿＿＿＿＿＿＿＿から返ってくる返事です。
一つのページ表示では、HTMLだけでなく＿＿＿＿＿＿＿＿＿＿＿＿なども別のリクエストになることがあります。

答えの例:

• リクエストとは、ブラウザやアプリからサーバーに送るお願いです。
• レスポンスとは、サーバーから返ってくる返事です。
• 一つのページ表示では、HTMLだけでなく画像、CSS、JavaScript、フォントなども別のリクエストになることがあります。

開発者ツールでは一行を選び、URL・方法・ステータス・返った内容の順に見ると通信を追えます。

Webページを開く、画像を表示する、検索する、フォームを送る。画面ではひとつの操作に見えても、画面のむこう側では小さなお願いと返事が何度も行き来しています。

この考え方はHTTPを理解する入口になります。リクエストには「どこへ、何を、どんな方法で頼むか」が入り、レスポンスには「結果、状態、返すデータ」が入ります。まずは細かい用語を丸暗記するより、誰が何を頼み、何が返ってくるのかを追うと、ページ表示やエラーの意味がつかみやすくなります。

第6話「お願いの言葉はどう届く？」では、DNSで宛先を見つけたあと、ブラウザからサーバーへお願いの封筒が進む場面を見ます。このページでは、その物語を、実際のWebページ表示やフォーム送信に戻して一つずつ確かめます。

イト

住所がわかったあと、ブラウザは何をしているの？

ユイ

リクエストとレスポンスという言葉は聞きますが、操作と結びつけるとまだ迷います

マコト

今日はお願いする側と返す側を分けて、順番に見よう

ピコ

封筒が行って、返事が戻る道として見ると追いやすいよ

ページを開くときの一往復

たとえばページを開くとき、ブラウザは「このURLのページをください」とリクエストを送ります。サーバーは、HTMLや画像、状態を示す情報などをレスポンスとして返します。返ってきた材料をブラウザが読み、画面に組み立てます。

ラボのたとえでは、リクエストは受付に出す作業票、レスポンスは受付から戻ってくる返答票です。作業票には、ほしいものや送り先の手がかりが書かれています。返答票には、渡せる材料、成功したかどうか、別の場所へ行ってほしいか、といった結果が入ります。

ブラウザがお願いを作る場面

リクエストは、ページを開くときだけに出るものではありません。

検索ボタンを押す、ログインする、フォームを送る、画像を読み込む、ページの一部を更新する。こうした操作の裏側で、ブラウザやアプリは必要なリクエストを作ります。人が手で文章を書いて送るわけではなく、ブラウザやアプリが操作に応じて通信の形へ整えます。

画面で見える操作と、リクエストの見方を対応させると次のようになります。

実際のサービスでは、リクエストの中身や送信先は設計によって変わります。それでも「操作が、何らかのお願いに変わる」と見るだけで、Webの裏側が急に読みやすくなります。

リクエストに入るもの

リクエストには、ただ「ください」とだけ書かれているわけではありません。どこへ、何を、どんな方法で頼むかを伝えるための情報が入ります。

よく出てくる要素は次の通りです。

初心者の段階では、GETやPOSTの細かい使い分けを完璧に覚える必要はありません。まずは、リクエストには「宛先」「目的」「補足」「必要なら本文」が入る、と見ると十分です。

HTTPとは では、このお願いがHTTPという約束に沿って運ばれる流れを詳しく扱います。ここでは、HTTPの中身を読む前の入口として、お願いの形を押さえます。

レスポンスに入るもの

レスポンスは、サーバーから返ってくる返事です。ページの本文だけでなく、成功したか、見つからなかったか、別の場所へ案内するか、といった状態も含まれます。

たとえばWebページのレスポンスには、HTMLが入ることがあります。画像を取りに行った場合は画像ファイルが返ります。APIへ問い合わせた場合はJSONのようなデータが返ることもあります。

レスポンスを読むときに大切なのが、ステータスコードです。

404を見たときは、「ネット全体が壊れた」と考えるより、頼んだ場所が見つからない、URLが違う、公開状態が違う、といった返事として見ると落ち着きます。返事の状態を読むと、次に確認する場所が見えてきます。

一つのページでも何度も行き来する

ページ表示は、一回の大きなお願いだけで終わるとは限りません。

最初にHTMLを取りに行くと、ブラウザはそのHTMLの中に書かれたCSS、画像、JavaScript、フォントなどを見つけます。そして、それぞれの材料を追加でリクエストします。つまり、見えている一枚のページの裏側には、小さなリクエストとレスポンスが複数並ぶ場合があります。

サイト運用で「ページは出るのに画像だけ出ない」「CSSだけ反映されない」といったことが起きるのは、この分かれ方と関係します。HTMLのリクエストは成功していても、画像やCSSのリクエストが失敗していることがあるからです。ブラウザが画面を作る流れは、Webページ表示の仕組み とつながります。

よくある誤解

リクエストとレスポンスでよくある誤解は、「リクエストは人間が送る文章のこと」と考えることです。操作するきっかけを作るのは人間ですが、実際に通信の形を作って送るのはブラウザやアプリです。

もう一つは、「レスポンスは画面そのもの」と思うことです。レスポンスとしてHTMLや画像などの材料が返り、それをブラウザが読み、画面として組み立てる場合があります。サーバーが完成したスクリーンショットをいつも返しているわけではありません。

また、一つの操作に対してリクエストは一つだけ、と決めつけるのも危険です。ページの読み込み、画像取得、ログイン確認、追加データの取得など、複数のやり取りが続くことがあります。迷ったときは、どのお願いに対するどの返事なのかを分けて見ると、トラブル確認もしやすくなります。

図で見るお願いと返事の流れ

Webページを開く場面を、リクエストとレスポンスに分けると次のようになります。

1. 利用者がURLを開く
2. ブラウザがページを求めるリクエストを作る
3. サーバーに送る
4. サーバーが結果や材料をレスポンスとして返す
5. ブラウザがHTMLを読む
6. 必要な画像やCSSを追加でリクエストする
7. 返ってきた材料を組み立てて画面に表示する

この流れを持っておくと、HTTP、ブラウザ、サーバー、ステータスコードが別々の言葉ではなく、同じ往復の中に置けます。大きな地図から見直すなら、インターネットの仕組み も役に立ちます。

お願いと返事の確認クイズ

Q1. リクエストを作って送るのは、主に何ですか？

答え: ブラウザやアプリです。
解説: 人の操作をきっかけに、ブラウザやアプリが通信の形へ整えて送ります。

Q2. レスポンスには成功以外の情報も入りますか？

答え: 入ります。
解説: 404、500番台、移動を示す状態など、結果を読むための手がかりが入ることがあります。

Q3. 一つのページ表示で、リクエストは一つだけですか？

答え: 一つとは限りません。
解説: HTMLのあと、画像、CSS、JavaScriptなどを追加で取りに行く場合があります。