Webアプリケーション開発のためのHTTP入門

2024/07/13

Web アプリケーションは、クライアント（ブラウザ）とサーバーの間でデータをやり取りすることで動作しています。このときのデータのやり取りは HTTP という決まりによって定められています。このレクチャーでは、Webアプリケーションがどのように動作しているのかを正確に理解するために、HTTP を解説します。

Web アプリケーションとは

Webアプリケーションとは、インターネットを通じて利用できるアプリケーションのことです。ユーザーは手元のパソコンにインストールしたブラウザを使ってWebアプリケーションにアクセスします。実際の処理はユーザーのパソコンではなく、サーバー上で動作することが特徴です。

Web アプリケーションには2つの登場人物がいる

Webアプリケーションのアーキテクチャは、「クライアント・サーバーモデル」と呼ばれます。これは、クライアント（ユーザーのデバイス）とサーバー（リソースを提供するマシン）の2つを使って1つのアプリケーションを作る方法です。

登場人物 #1：クライアント

クライアントには、ユーザーから入力をサーバーに送る役割と、サーバーからのレスポンスを描画する役割があります。ユーザーからの入力とは、マウスでのクリック、キーボードから入力された文字などです。これらをサーバーに送信します。サーバーは処理の結果を返すので、クライアントはその結果を画面に表示します。クライアントの具体例は、Google Chrome などのブラウザです。画面に描画する内容を構築する際には、HTML、CSS、JavaScript などの技術が用いられます。

登場人物 #2：サーバー

サーバーは、クライアントから送られてきたデータを受け取り何らかの処理を実行することと、その結果をクライアントに返すことが役割です。サーバーでは、データベースと連携してデータの保存や取得を行うことが多いです。サーバーを作るためにはイチからすべてをコーディングするのではなく、Webアプリケーションフレームワークを使うことが一般的です。 Java であれば、Spring Boot がデファクトスタンダードな Web アプリケーションフレームワークです。

クライアントとサーバーのやり取りは HTTP を使う

Webアプリケーションでは、クライアントとサーバーの間でデータをやり取りするために HTTP というプロトコルが使われます。

Webアプリケーションはクライアントとサーバーという2人の登場人物がいるという話をしました。この2人が協力して1つのアプリケーションを完成させるには、2人がお互いにデーターのやり取りをする必要があります。このデータのやり取りについてのルールが HyperText Transfer Protocol（HTTP）です（HTTP の読み方は「エイチ・ティー・ティー・ピー」です）。

データには名前がある：リクエストとレスポンス

クライアントとサーバーの間を流れるデータは、リクエストとレスポンスという名前があります。

Web アプリケーションはクライアントとサーバーという2人の登場人物がいて、それらがデータをやり取りするということを説明してきました。やり取りされるデータには、データの向きによって名前がつけられています。

クライアントからサーバーに送られるデータは「リクエスト」と呼ばれます
リクエストへの返答としてサーバーからクライアントに送られるデータは「レスポンス」と呼ばれます

HTTP のフロー

HTTP のフローは、これまで説明してきたクライアント・サーバー・リクエスト・レスポンスという4つの要素でフォーマルに説明できます。

HTTP において、クライアントがサーバーと通信するフローは次のようになります：

クライアント が サーバー に リクエスト を送信する
サーバー が リクエスト を受け取り、処理を行う
サーバー が クライアント に レスポンス を返す

リクエストの中身

リクエストには、

メソッド
パス
プロトコルバージョン
ヘッダー
ボディ

が含まれています。それぞれがどのようなデータなのか確認しましょう。

Chrome で http://example.com にアクセスしたときのリクエストは次のようになります：

POST /register HTTP/1.1
Host: example.com
（ヘッダーが続く..）

username=tom&password=pass

リクエストの構成要素 #1：メソッド

メソッドは、クライアントが実行したい操作を表しています。主なメソッドには以下のものがあります：

GET：リソースの取得
POST：新しいリソースの作成
PUT：既存リソースの更新（置き換え）
PATCH：既存リソースの更新（部分更新）
DELETE：リソースの削除

リクエストの構成要素 #2：パス

リクエストのパスは、サーバー上のリソースの場所を示しています。アクセスしたいリソースの場所を指定します。

リクエストの構成要素 #3：プロトコルバージョン

プロトコルバージョンは、HTTPのバージョンを示しています。現在利用されているバージョンは、HTTP/1.1 や HTTP/2 などがあります。この講座では、HTTP/1.1 を前提として説明します。

リクエストの構成要素 #4：ヘッダー

リクエストヘッダーには、クライアントの情報やリクエストの詳細が含まれます。代表的なヘッダーには以下のものがあります：

Content-Type：リクエストボディのデータ形式
Accept-Language：クライアントの言語設定
Referer：リクエスト元のURL
User-Agent：クライアントの種類やバージョン

これらは現時点ですべてを覚える必要はありません。リクエストにはサーバーに追加の情報を与えるための「ヘッダー」という部分があるということだけ覚えておいてください。

リクエストの構成要素 #5：ボディ

リクエストボディには、POSTやPUTリクエストで送信されるデータが含まれます。今、ユーザーが閲覧しているページに次のようなフォームがあり、ユーザーが「送信」ボタンをクリックした場合を考えます。

<form action="/register" method="POST">
    <div>
        <label for="username">ユーザー名:</label>
        <input type="text" id="username" name="username" required>
    </div>
    <div>
        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password" required>
    </div>
    <div>
        <button type="submit">送信</button>
    </div>
</form>

このとき、ボディには次のようなデータが設定されます

username=tom&password=pass

レスポンスの中身

レスポンスには、

プロトコルバージョン
ステータスコード
ステータスメッセージ
ヘッダー
ボディ

が含まれています。それぞれがどのようなデータなのか確認しましょう。

レスポンスの構成要素 #1：プロトコルバージョン

プロトコルバージョンは、リクエストのときと同様に、HTTPのバージョンを示しています。

レスポンスの構成要素 #2：ステータスコード

ステータスコードは、リクエストの処理結果を表す3桁の数字です。 100番台から599番台までの範囲で、百の位によってステータスの種類が分類されています。

100番台：情報レスポンス。サーバーが最終的な応答を送信する前に、接続状態や要求の進捗状況を伝えるための中間応答を表しています。
200番台：成功レスポンス。リクエストが成功した場合
300番台：リダイレクトメッセージ。リクエストを完了させるために追加の処理が必要な場合
400番台：クライアントエラーレスポンス。クライアントのリクエストが原因でサーバーでの処理が失敗した場合
500番台：サーバーエラーレスポンス。サーバー側の問題が原因で処理が失敗した場合

代表的なステータスコードには以下のものがあります：

200 OK：リクエストが成功したことを示す
301 Moved Permanently：リクエストされたリソースが新しい場所に移動したことを示す
404 Not Found：リクエストされたリソースが見つからないことを示す
500 Internal Server Error：サーバー側でエラーが発生したことを示す

レスポンスの構成要素 #3：ステータスメッセージ

ステータスメッセージは、ステータスコードに対応する説明文です。ステータスコードが決まれば、ステータスメッセージも自動的に決まります。 200 OK のとき、OK がステータスメッセージです。

レスポンスの構成要素 #4：ヘッダー

リクエストと同様に、レスポンスにもヘッダーが含まれます。

レスポンスの構成要素 #5：ボディ

レスポンスボディには、サーバーからクライアントに送信されるデータが含まれます。 GET http://example.com のリクエストを送信したときのレスポンスは次のようなイメージです。レスポンスボディには HTML で記述したテキストが含まれています。

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Date: Sat, 13 Jul 2024 13:56:11 GMT
Content-Length: 648

<!doctype html>
<html>
<head>
    <title>Example Domain</title>
    <meta charset="utf-8" />   
</head>

<body>
    <h1>Example Domain</h1>
</body>
</html>

さらに詳しく学びたいときの参考文献

参考文献 #1：RFC

HTTP に関する最もフォーマルな文書は、RFC 2616 という文書です。

RFC 2616 - Hypertext Transfer Protocol – HTTP/1.1

RFC（Request for Comments）には、インターネットやその他のネットワーク技術に関する標準、プロトコルを記述されています。最終的には RFC が読めるようになると理解が深まりますが、初めての方には難しいかもしれません。

参考文献 #2：MDN Web Docs

RFC 以外で HTTP に関する情報を得るためには、MDN Web Docs がおすすめです。

MDN Web Docs - HTTP

MDN Web Docs は、Web 開発に関する情報が豊富に掲載されています。 RFC より分かりやすいので、開発中に HTTP について調べるときに便利です。

まとめ

このレクチャーでは、Webアプリケーション開発において欠かせないHTTPについての基礎知識を解説しました。 HTTPは、クライアントとサーバー間のデータ通信のルールを定めたプロトコルです。

Webアプリケーションはクライアント・サーバーモデルで構成される
クライアントとサーバーのやり取りはHTTPを使って行われる
クライアントがサーバーに送信するデータを「リクエスト」と呼ぶ。リクエストに対する返答としてサーバーがクライアントに送信するデータを「レスポンス」と呼ぶ
リクエストにはメソッド、パス、プロトコルバージョン、ヘッダー、ボディが含まれる
レスポンスにはプロトコルバージョン、ステータスコード、ステータスメッセージ、ヘッダー、ボディが含まれる

Web アプリケーションをうまく開発するコツは、HTTP を理解したうえで、HTTP の機能を活用して開発を進めることです。自分たちで発明しなくても、HTTP の仕組みで実現可能なことがたくさんあります。 HTTP の仕組みを理解して、Web アプリケーション開発に役立てていきましょう。

一気に覚える必要はありません。概要を押さえつつ、実際に開発を進める中で疑問に思った点を都度調べながら、徐々に理解を深めていきましょう。

HTTP