皆さん、こんにちは。今日はWEBシステム開発におけるHTTPプロトコルというものについて学習していきましょう。ウェブサイトを開いた時に、URLの先頭に含まれるあれ（https://）についてです。一昔前はhttp://でしたが最近ではhttps://が主流となっています。この違いについても説明していきます。
Webエンジニアを目指す皆さんが知っておくべき観点から話をしていきます。
HTTPはプロトコル
HTTPはHyperText Transfer Protocolの略でWebブラウザとWebサーバ間で通信を行うためのプロトコル（通信規定）のことです。HTTPプロトコルはどちらからの発信かによって２つ呼び方があります。
HTTPリクエスト
HTTPリクエストはWebブラウザからWebサーバに対して発信される通信のことです。通常はWebサーバにウェブページの表示データの送信を要求したり、ウェブサイトの登録フォームなどからWebサーバに対して入力データを送信する際に行われます。
HTTPレスポンス
HTTPレスポンスはWebブラウザから受け取ったリクエストに対してWebサーバが返す通信のことです。WebブラウザはWebサーバから受け取ったデータをもとにWebページを表示します。
HTTPはテキスト通信
HTTPプロトコルで留意すべき点は、テキストでデータをやりとりするという点です。そのテキストには決まったフォーマットがあり、改行を挟んでヘッダーとボディーの２セクションに分かれています。HTTPリクエストにはリクエストヘッダーとリクエストボディー、HTTPレスポンスもレスポンスヘッダーとレスポンスボディーがあります。
HTTPリクエストのフォーマット
[リクエストヘッダー]
GET /index.html HTTP/1.1
Host: www.gritbeaver.com
[リクエストボディー]
name=gritbeaverHTTPリクエストのヘッダーの１行目にはデータの取得方法（GET）URLのパス、HTTPプロトコルのバージョンが記述されます。他に代表的なヘッダー項目はHost名があり、どのサイトのドメインにアクセスするのかの記述があります。リクエストボディーにはWebサイトの登録フォームなどからデータをWebサーバに送信する際にそのデータが記述されます。
ただし、HTTPリクエストのヘッダーやフッターを皆さんが直接記述することはまずありません。これはWebブラウザがWebサーバと通信する際に自動的に作成してWebサーバにこのテキストを送信します。
HTTPレスポンスのフォーマット
[レスポンスヘッダー]
HTTP/1.1 200 OK
Date: Sun, 16 Feb 2025 08:46:51 GMT
[レスポンスボディー]
<h1>こんにちは</h1>HTTPレスポンスのヘッダーの１行目にはHTTPプロトコルのバージョン、通信ステータスとステータスの説明が記述されます。それ以外で代表的なレスポンスヘッダーには通信日時などがあります。レスポンスヘッダーにはこれから皆さんが学習するプログラミングを通してWebサーバから返すステータスを変更できます。
レスポンスボディーの部分がWebブラウザ内に表示されるコンテンツとなる点に留意しておきましょう。レスポンスボディーもプログラミングを通してその出力内容を自在に変更できます。
３つのヘッダー
Webのシステム開発現場においては「ヘッダー」という言葉をよく耳にします。話し相手や文脈によってその内容が異なるので注意して使い分けましょう。以下はHTTPレスポンスの概要になります。
[レスポンスヘッダー]
HTTP/1.1 200 OK
Date: Sun, 16 Feb 2025 08:46:51 GMT
[レスポンスボディー]
<html>
<head>
[HTMLヘッダー]
</head>
<body>
[コンテンツヘッダー]
</body>
</html>HTTPヘッダー
１つ目のヘッダーはHTTPヘッダーです。上述の通りHTTP通信におけるリクエスト・レスポンスヘッダー部分のことを指します。主にプログラマーやサーバエンジニアの会話でいうHTTPヘッダーとはこの部分のことです。
HTMLヘッダー
２つ目のヘッダーはHTMLの<head>タグ部分です。HTTPレスポンスボディー部分にはこれから学習するHTMLを記述することになりますが、<html>タグ部分は大きく分けて<head>タグと<body>タグの２つの部分に分かれています。
<head>タグ部分
Webブラウザの画面内には表示されない部分で表示方法などが書かれています。主にデザイナーやフロントエンド開発者との会話でいうHTMLヘッダーとはこの部分を指します。
<body>タグ部分
Webブラウザ内に表示される部分のことでWebユーザが目にするコンテンツ部分のことです。
コンテンツヘッダー
３つ目のヘッダーはコンテンツヘッダーです。ウェブサイト上で最上部に位置するセクションをコンテンツヘッダーといいます。ロゴやイメージ画像、メインメニューなどで構成されることが多いです。主にデザイナーと話をする場合のヘッダーといえばコンテンツヘッダーを指します。
HTTPSとは
HTTPSとはHTTP Secureの略でWebブラウザとWebサーバ間の通信を暗号化して安全に通信するためのプロトコルです。盗聴・改ざん・なりすましを防止することができます。認証局から発行される証明書（ファイル）を使用して暗号化通信を開始します。インターネット上に公開するウェブサイトはもうほとんどHTTPSを使用していて、WebブラウザのURL欄の隣に鍵マークがついています。
HTTPプロトコルはテキスト通信と説明しましたが、HTTPSであれば通信中は暗号化され、データを受け取った後に復号化されてデータの内容が解釈されることになります。
ポート番号について
HTTPとHTTPSのデフォルトのポート番号を確認しておきましょう。
- HTTPのデフォルトのポート番号は80
- HTTPSのデフォルトのポート番号は443
WebブラウザのURL欄ではドメインの後ろにポート番号も指定できます。それぞれポート番号を指定した場合、表示内容は同じになります。
http://example.com と http://example.com:80 は同じ
https://example.com と https://example.com:443 は同じ
HTTPのステータスコード
HTTPのステータスコードについても学んでおきましょう。
HTTPレスポンスのヘッダー部分にはHTTPステータスコードが記述されていますが、そのステータスコードは100番台から500番台まであります。それぞれ代表的なものだけ挙げておきます。
100番台：リクエスト処理中の情報
最初はあまり見かけないでしょう。
200番台：成功
200 OK：処理成功
300番台：リダイレクト（追加のアクションが必要）
301 Moved Permanently：URLが恒久的に変更された
302 Found：一時的にURLが変更された
400番台：クライアントエラー（Webブラウザ側のリクエストが不正）
400 Bad Request：ウェブブラウザ側のリクエストが不正
401 Unauthorized：アクセスするユーザの認証がされてない
403 Forbidden：アクセス権限がない
404 Not Found：ページが見つからない（リンク切れのページでよく見かけるやつです）
500番台：サーバエラー（Webサーバ側のレスポンスが不正）
500 Internal Server Error：サーバ側の内部エラー
503 Service Unavailable：サーバーが一時的に利用不可
504 Gateway Timeout：ゲートウェイのタイムアウト（サーバ側からの応答が遅すぎる場合）
まとめ
今回はHTTPプロトコルについて学びました。ブラウザとサーバ間の通信はテキストで行われ、HTTPリクエスト・レスポンスの記述があることを学習しました。開発現場ではHTTPヘッダー、HTMLヘッダー、コンテンツヘッダーの３つがありましたね。昨今ではHTTPS通信では443番ポートを使用して暗号化通信が行われています。
次はWeb開発の王道、「MVCモデル」について理解していきましょう。
コメント