はじめに: HTTPリクエストはブラウザからサーバーへのお願い
Webページを開くとき、ブラウザはサーバーに対して「このページをください」と依頼しています。この依頼がHTTPリクエストです。
たとえば、ブラウザで記事ページを開く、画像を読み込む、検索フォームを送信する、JavaScriptからAPIを呼び出す。これらの裏側では、ブラウザやJavaScriptがサーバーへHTTPリクエストを送っています。
HTTPリクエストは、Web開発のかなり基本にある仕組みです。基本情報技術者試験でも、HTTP、クライアント、サーバー、メソッド、ヘッダー、レスポンスといった用語が出てきます。
ただ、用語だけを暗記していると、実際のWebアプリで何を見ればよいのか分かりにくいかもしれません。この記事では、HTTPリクエストを「ブラウザからサーバーへのお願い」として捉え、JavaScriptとPHPの短い例で確認していきます。
HTTPリクエストは、ブラウザやJavaScriptがサーバーへ送る依頼のことです。
HTTPはリクエストとレスポンスで成り立つ
HTTP通信は、基本的にリクエストとレスポンスの組み合わせで成り立ちます。
ブラウザ -- HTTPリクエスト --> サーバー
ブラウザ <-- HTTPレスポンス -- サーバークライアントであるブラウザがリクエストを送り、サーバーがレスポンスを返します。レスポンスには、HTML、CSS、JavaScript、画像、JSONなどが含まれます。
1つのページを開くだけでも、リクエストは1回とは限りません。最初にHTMLを取得し、そのHTMLに書かれているCSS、JavaScript、画像などを追加で取得します。APIを使うページなら、JavaScriptからJSONデータを取りに行く通信も発生します。
つまり、Webページは「1つの大きなデータを一度だけ受け取っている」のではなく、多くのHTTPリクエストとレスポンスによって組み立てられています。
HTTPは、クライアントがリクエストを送り、サーバーがレスポンスを返す形で成り立ちます。
HTTPリクエストの主な部品
HTTPリクエストには、いくつかの重要な部品があります。最初は、次の4つを押さえると理解しやすくなります。
メソッド → 何をしたいか
URL → どこに送るか
ヘッダー → 追加情報
ボディ → 送信する中身メソッドは、リクエストの目的を表します。代表的なものは GET と POST です。GET は主にデータを取得するとき、POST は主にデータを送信するときに使われます。
URLは、どのサーバーのどのリソースへアクセスするかを表します。たとえば /articles なら記事一覧、/api/users ならユーザー情報を返すAPIのように、サーバー側で処理が分かれます。
ヘッダーは、リクエストに付ける追加情報です。たとえば、ブラウザの種類を示す User-Agent、受け取りたいデータ形式を示す Accept、Cookieを送る Cookie などがあります。
ボディは、サーバーへ送る本文です。フォームの入力内容やJSONデータを送るときに使われます。すべてのリクエストにボディがあるわけではなく、GETではボディを使わないことが一般的です。
HTTPリクエストは、メソッド、URL、ヘッダー、ボディを見ると通信の意図を理解しやすくなります。
GETリクエストをJavaScriptで見てみる
GETリクエストは、主にサーバーからデータを取得するときに使います。ブラウザでURLを開くときも、多くの場合GETリクエストが送られます。
JavaScriptでは、fetch() を使ってGETリクエストを送れます。
fetch("/api/articles")
.then((response) => response.json())
.then((articles) => {
console.log(articles);
});このコードでは、/api/articles にリクエストを送り、サーバーから返ってきたJSONを読み取っています。fetch() は、何も指定しなければ基本的にGETリクエストとして送られます。
検索条件やページ番号のような情報は、URLのクエリ文字列として渡すことがあります。
const keyword = "javascript";
fetch(`/api/articles?keyword=${encodeURIComponent(keyword)}`)
.then((response) => response.json())
.then((articles) => {
console.log(articles);
});この例では、keyword=javascript という情報をURLに付けて送っています。サーバーはこのクエリ文字列を見て、検索条件として処理できます。
GETリクエストは、主にデータを取得するときに使い、条件はURLのクエリ文字列で渡すことがあります。
POSTリクエストとリクエストボディ
POSTリクエストは、主にサーバーへデータを送信するときに使います。たとえば、問い合わせフォームの送信、ログイン、記事の投稿、ユーザー登録などです。
JavaScriptの fetch() でJSONを送る場合、次のように書けます。
fetch("/api/articles", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: "HTTPリクエスト入門",
body: "リクエストの基本を学びます。",
}),
});ここでは、method に "POST" を指定しています。headers では、送るデータがJSONであることを Content-Type で伝えています。
body には、サーバーへ送る中身を入れます。JavaScriptのオブジェクトをそのまま送るのではなく、JSON.stringify() でJSON文字列に変換しています。
このように、POSTリクエストでは「どこへ送るか」だけでなく、「どんな形式で」「どんな中身を送るか」が重要になります。
POSTリクエストでは、リクエストボディにフォーム内容やJSONなどの送信データを入れます。
PHPではリクエストをどう受け取るか
PHPでは、GETで送られたクエリ文字列を $_GET から受け取れます。
<?php
$keyword = $_GET['keyword'] ?? '';
echo htmlspecialchars($keyword, ENT_QUOTES, 'UTF-8');たとえば /search.php?keyword=php にアクセスすると、$_GET['keyword'] から php を取得できます。
フォームからPOSTで送られたデータは、一般的には $_POST から受け取ります。
<?php
$name = $_POST['name'] ?? '';
echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8');一方、JavaScriptからJSONをPOSTする場合、$_POST ではなくリクエストボディを直接読むことがあります。
<?php
$json = file_get_contents('php://input');
$data = json_decode($json, true);
$title = $data['title'] ?? '';
echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8');php://input は、リクエストボディの生データを読むために使えます。APIでJSONを受け取る場合に出てくることがあります。
PHPでは、GETの値は $_GET、フォームのPOSTは $_POST、JSONのボディは php://input で受け取る場面があります。
試験ではどう問われるか
基本情報技術者試験では、HTTPリクエストはクライアントとサーバーの関係として問われます。
押さえたいのは、リクエストを送る側がクライアントで、レスポンスを返す側がサーバーだという点です。Webでは、多くの場合ブラウザがクライアント、Webサーバーがサーバーです。
また、HTTPメソッドも重要です。GETは主に取得、POSTは主に送信という理解が基本になります。ただし、実際のWeb APIではPUT、PATCH、DELETEなどのメソッドも使われることがあります。
ヘッダーも試験と実務の両方で大事です。Cookie、Content-Type、Acceptなどは、通信の内容やサーバー側の処理に影響します。
HTTPリクエストは、クライアントからサーバーへ送られる要求であり、メソッドやヘッダーを含みます。
実務ではどう使われるか
実務では、HTTPリクエストを読む力がトラブル調査に直結します。
たとえば、フォームを送信したのに登録されない場合、まず「そもそもリクエストが送られているか」を確認します。次に、URLは正しいか、メソッドは合っているか、送信データは入っているか、Content-Typeは想定通りかを見ます。
Chrome開発者ツールのNetworkタブを使うと、実際のHTTPリクエストを確認できます。Request URL、Request Method、Request Headers、Payloadを見ることで、ブラウザがサーバーへ何を送ったのかが分かります。
API通信が失敗しているときも同じです。JavaScriptのコードだけを見るのではなく、Networkタブで実際に送られたリクエストを見ると、原因を切り分けやすくなります。
HTTPリクエストを読めると、フォーム送信、API通信、Cookie、認証、CORS、キャッシュなど、Web開発でよく出会う調査の土台になります。
実務では、HTTPリクエストのURL、メソッド、ヘッダー、ボディを見ることで、通信エラーの原因を切り分けやすくなります。
まとめ: HTTPリクエストを読むとWebの動きが見える
HTTPリクエストは、ブラウザやJavaScriptからサーバーへ送られる依頼です。Webページを開く、画像を読み込む、フォームを送る、APIを呼び出すといった処理の裏側で使われています。
リクエストを見るときは、メソッド、URL、ヘッダー、ボディに分けて考えると整理しやすくなります。GETは主に取得、POSTは主に送信に使われ、ヘッダーやボディによって追加情報や送信内容を伝えます。
基本情報の学習では、HTTPを用語として覚えるだけでなく、ブラウザとサーバーのやり取りとして理解することが大切です。実務では、Networkタブでリクエストを確認する力が、通信エラーの調査に役立ちます。
HTTPリクエストを理解すると、ブラウザとサーバーの間で何が送られているのかを具体的に読めるようになります。
コメント