サーバーとHTTPリクエストの仕組みを理解しよう | Webの基礎基礎

前の記事では、HTML、CSS、JavaScriptがブラウザで動作し、サーバーがなくても画面のモックを作れることを確認しました。

今回はブラウザがサーバーへ何を送り、サーバーが何を返すのかを学びます。この仕組みを理解すると、フォーム送信、API通信、サーバー側でのURLごとの処理が一つの流れとして見えるようになります。

この記事を終えると、次のことができるようになります。

サーバーとバックエンドの役割を説明できる
リクエストとレスポンスの流れを説明できる
URL、HTTPメソッド、ヘッダー、ボディを区別できる
GETとPOSTを目的に応じて使い分けられる
ブラウザから届く値をサーバー側で検証する理由を説明できる

今回使用するファイル構成

この記事では、次のHTMLをLive Serverで開き、Networkタブから通信を観察します。

web-request-practice/
└── index.html

サーバーの役割を理解する

サーバーとは

Webにおけるサーバーは、ブラウザなどから要求を受け取り、必要な処理を行って結果を返すコンピューターやソフトウェアです。

ブラウザでURLを開くと、概念的には次の処理が行われます。

ブラウザ
  「このページを表示したい」
        ↓ リクエスト
サーバー
  URLを確認して必要な処理を行う
        ↓ レスポンス
ブラウザ
  受け取ったHTMLを画面へ表示する

サーバーは一方的に画面を送るのではなく、ブラウザから要求を受けたことをきっかけに応答します。

サーバーが担当する処理

サーバー側では、たとえば次の処理を行います。

ログイン情報を確認する
利用者がデータを操作できるか確認する
フォームの入力内容を検証する
データベースから情報を取得する
データベースへ情報を保存する
HTMLやJSONを作って返す
ファイルを保存する
メールや通知を送る

サーバー側の処理や仕組みを、一般にバックエンドと呼びます。

サーバー側で動くプログラム

サーバーは、受け取ったリクエストに対して毎回同じファイルを返すだけではありません。プログラムを実行し、URL、入力内容、ログイン中の利用者などに応じて、異なる結果を作ることもできます。

サーバー側のプログラムを作るための言語には、PHP、Ruby、Python、Javaなどがあります。BuildBooksでは、この後にPHPとLaravelを学ぶため、ここではそれぞれの位置付けを先に確認します。

PHPとは

PHPは、主にWebサーバー上で動くプログラミング言語です。HTMLだけでは行えない、データの取得、入力内容の検証、条件による表示の切り替えなどを担当できます。

たとえば、PHPでは変数に入った利用者名をHTMLへ含められます。

<?php
$userName = '山田太郎';
?>

<h1><?= htmlspecialchars($userName, ENT_QUOTES, 'UTF-8') ?>さんのページ</h1>

このPHPをサーバーが実行すると、ブラウザには処理後のHTMLが送られます。

<h1>山田太郎さんのページ</h1>

ブラウザがPHPのコードを実行しているわけではありません。PHPを実行するのはサーバーであり、ブラウザは結果として受け取ったHTMLを表示します。

Laravelとは

Laravelは、PHPでWebシステムを作るためのフレームワークです。

フレームワークは、Webシステムで繰り返し必要になる仕組みと、コードを整理するための基本構造を提供します。Laravelには、たとえば次の機能があります。

URLごとに実行する処理を決める
フォームの入力内容を検証する
データベースから情報を取得・保存する
ログイン状態や操作権限を確認する
HTMLやJSONのレスポンスを返す
メールや通知を送る

PHPだけでもWebシステムは作れますが、Laravelを利用すると、これらを一定の規則に沿って整理できます。LaravelはPHPとは別のプログラミング言語ではなく、PHPで作られ、PHP上で動く道具と設計のまとまりです。

ルーティングとは

Laravelでは、リクエストのHTTPメソッドとURLに対して、どの処理を実行するかを登録します。これをルーティングと呼びます。

Route::get('/articles', function () {
    return '記事一覧です';
});

この例では、ブラウザからGET /articlesが届いたときに、文字列の「記事一覧です」を返します。

ブラウザが GET /articles を送る
↓
Laravelが登録済みのルートを探す
↓
対応するPHPの処理を実行する
↓
処理結果をHTTPレスポンスとして返す

HTTPメソッドとURLを理解することが、Laravelのルーティングを理解する土台になります。

Bladeとは

Bladeは、Laravelに用意されているHTMLテンプレートの仕組みです。共通レイアウトを再利用したり、PHPで取得したデータをHTMLへ埋め込んだりできます。

Bladeテンプレートは、サーバー上で処理されてHTMLになります。Bladeの記述が、そのままブラウザへ送られるわけではありません。

Bladeテンプレートとデータ
↓ Laravelがサーバー上で処理する
完成したHTML
↓ HTTPレスポンスとして送る
ブラウザがHTMLを表示する

ブラウザの「ページのソースを表示」で確認できるのは、処理後のHTMLです。PHPやLaravelのソースコード、データベースのパスワードなど、サーバー内部の情報をレスポンスへ含めてはいけません。

リクエストとレスポンスを理解する

リクエストとは

ブラウザからサーバーへ送る要求をHTTPリクエストと呼びます。

画面を開く、リンクを押す、検索する、フォームを送信する、JavaScriptのfetch()でAPIを呼ぶといった操作でリクエストが発生します。

リクエストには、主に次の情報があります。

HTTPリクエスト
├── メソッド：何をしたいか
├── URL：どこへ要求するか
├── ヘッダー：要求に関する付加情報
└── ボディ：サーバーへ渡す入力内容

レスポンスとは

サーバーが要求を処理して返す結果をHTTPレスポンスと呼びます。

HTTPレスポンス
├── ステータス：処理結果を表す番号
├── ヘッダー：返す内容に関する付加情報
└── ボディ：HTML、JSON、画像などの本体

代表的なHTTPステータスには次のものがあります。

200 OK：要求が成功した
302 Found：別のURLへ移動させる
404 Not Found：URLに対応するものがない
422 Unprocessable Content：入力内容を処理できない
500 Internal Server Error：サーバー内部でエラーが起きた

URLの構造を理解する

次のURLを例にします。

https://example.com:443/articles?category=javascript#summary

https                   スキーム
example.com             ホスト
443                     ポート
/articles               パス
?category=javascript    クエリ文字列
#summary                 フラグメント

フラグメントはページ内の位置を示し、通常はHTTPリクエストとしてサーバーへ送られません。検索条件などはクエリ文字列として送れます。

GETリクエストを理解する

GETは情報を取得する

GETは、主に画面やデータを取得するときに使います。

GET /articles
  記事一覧を取得する

GET /articles/10
  IDが10の記事を取得する

GET /articles?category=javascript
  JavaScriptカテゴリの記事を検索する

リンクを開いたときやアドレス欄へURLを入力したとき、ブラウザは通常GETリクエストを送ります。

<a href="https://example.com/articles">記事一覧を開く</a>

GETフォームを作る

index.htmlへ検索フォームを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>リクエストの練習</title>
</head>
<body>
  <h1>記事検索</h1>

  <form method="get" action="https://www.google.com/search">
    <label for="keyword">キーワード</label>
    <input id="keyword" name="q" type="search">
    <button type="submit">検索する</button>
  </form>
</body>
</html>

フォームへ「JavaScript」と入力すると、入力欄のname="q"と入力値がクエリ文字列になります。

https://www.google.com/search?q=JavaScript

検索結果のURLをコピーすると、同じ条件を共有できます。一方、URLは画面、履歴、サーバーのログなどへ残るため、パスワードや秘密情報をGETで送ってはいけません。

POSTリクエストを理解する

POSTはデータを送って処理を依頼する

POSTは、新しいデータの登録など、入力内容をサーバーへ送って処理を依頼するときに使います。

GET /customers/create
  顧客の入力画面を取得する

POST /customers
  入力した顧客情報の登録を依頼する

HTMLフォームでは、methodとactionで送信方法と送信先を指定します。

<form method="post" action="/customers">
  <label for="customer-name">顧客名</label>
  <input id="customer-name" name="name" type="text">
  <button type="submit">登録する</button>
</form>

POSTで送る値は通常、URLではなくリクエストボディへ含まれます。ただし、URLに見えないことは暗号化や安全性を意味しません。HTTPSを使い、サーバー側で内容と権限を確認します。

練習用のLive Serverには/customersを処理するプログラムやルーティングがないため、このフォームを送っても正常には登録できません。POSTを受け付けるには、PHPなどで処理を作り、送信先のURLと対応させる必要があります。Laravelを使う場合は、その対応をルートとして登録します。

GETとPOSTを比較する

項目	GET	POST
主な目的	画面やデータの取得	データを送って登録などを依頼
値の主な場所	URLのクエリ文字列	リクエストボディ
URLで条件を共有	しやすい	通常はしない
データの変更	原則として行わない	登録などを行う

更新にはPUTやPATCH、削除にはDELETEも使われます。最初は「取得するGET」と「登録を依頼するPOST」を区別してください。

リクエストヘッダーを理解する

ヘッダーは、リクエストに関する付加情報です。

ヘッダー	主な内容
`Host`	送信先のサーバー名
`Accept`	受け取りたいデータ形式
`Content-Type`	ボディのデータ形式
`Cookie`	セッションIDなど
`Authorization`	APIの認証情報など
`User-Agent`	ブラウザなどの情報

ブラウザが自動的に付けるものと、プログラムから設定するものがあります。

fetch('/api/customers', {
  headers: {
    Accept: 'application/json',
  },
});

この例では、JSON形式のレスポンスを受け取りたいと伝えています。

リクエストボディを理解する

ボディには、サーバーへ渡す入力内容などを含めます。

JavaScriptからJSONをPOSTする例は次のとおりです。

const customer = {
  name: '山田太郎',
  email: 'yamada@example.com',
};

fetch('/api/customers', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
  body: JSON.stringify(customer),
});

Content-Typeは、ボディがJSON形式であることをサーバーへ伝えます。JavaScriptのオブジェクトはそのまま送れないため、JSON.stringify()でJSON文字列へ変換します。

ブラウザから届く値を信用しない

HTMLのrequired、JavaScriptの入力検証、非表示のinputなどは、操作性を高めるために役立ちます。しかし、利用者はDevToolsや通信ツールから送信内容を変更できます。

変更できるものには次のような例があります。

URLとHTTPメソッド
フォームの入力値
hidden項目の値
JSONの内容
Cookieや一部のヘッダー

ブラウザからリクエストを受け取る
↓
ログイン状態を確認する
↓
その利用者に操作権限があるか確認する
↓
入力値の形式と範囲を検証する
↓
問題がなければ保存や取得を行う

JavaScriptでボタンを隠しても、サーバー側の権限確認の代わりにはなりません。ブラウザから来る値はすべて変更される可能性があるものとして扱います。

DevToolsでリクエストを確認する

Live Serverでindex.htmlを開く
DevToolsのNetworkタブを開く
ページを再読み込みする
index.htmlの行を選択する
HeadersでRequest URL、Request Method、Status Codeを確認する
検索フォームを送信し、URLのクエリ文字列を確認する

Networkタブでは、ブラウザとサーバーの間で実際に送受信された情報を確認できます。JavaScriptのfetch()を学ぶ際にも同じ画面を使います。

まとめ

サーバーはブラウザからリクエストを受け、処理結果をレスポンスとして返す
PHPやLaravelはサーバー側で動き、処理結果のHTMLやJSONをブラウザへ送る
リクエストはメソッド、URL、ヘッダー、ボディなどで構成される
GETは主に取得、POSTは主にデータを送って登録などを依頼するときに使う
ブラウザから送られる値は変更できるため、サーバー側で入力と権限を確認する

これで、ブラウザ側のHTML、CSS、JavaScriptと、サーバー側の処理がHTTPでつながる全体像を確認できました。次はJavaScriptカテゴリへ戻り、Promiseと非同期処理から応用編を始めます。