普段からWebブラウザ上で何気なく入力している「HTTP」という文字ですが、どのような意味や仕組みがあるのでしょうか。

HTTPという文字には、HTTPプロトコルを利用して、その後ろにあるアドレスの場所から情報を得るための役割があります。
JavaScriptでは、XMLHttpRequestやFetch APIなどを使ってHTTP通信の構成を作成しますが、その上でHTTPの知識が基盤となります。

今回は、HTTPプロトコルの役割と通信の仕組みについて解説していきます。

HTTPプロトコル

HTTPは、「Hypertext Transfer Protocol」の略で、クライアントとサーバーがやりとりするための通信プロトコルという意味を持ちます。クライアントがHTMLファイルをサーバーにリクエストし、サーバーがクライアントにレスポンスするという仕組みです。

HTMLが「Hyper Text Markup Language」という略であるように、HTTPを通じてHTMLで書かれたテキストのやりとりを行います。
CSSやJavaScriptファイル、画像などのやりとりもHTTPプロトコルを通じで行うことができます。

HTTP通信

HTTP通信は、元々WebブラウザとWebサーバーとのやり取りを行うために作られました。
実際には、クライアントとサーバーが直接やり取りをするだけでなく、代理でインターネットへのアクセスを行うためのプロシキを間に挟んで通信が行われることが多くあります。例えば、ルーターやモデムのようなものです。

HTTP通信の流れ

HTTP通信は、かんたんに以下のような流れで行われます。

  1. ブラウザでURLを入力
  2. DNS（ドメインサーバーシステム）にIPアドレスの問い合わせ
  3. アクセス先のIPアドレスを送信
  4. アクセス先のページデータをリクエスト
  5. Webページデータのレスポンスと表示

HTTPメッセージ

HTTPメッセージは、HTTPリクエストとHTTPレスポンスで構成されます。

クライアントがサーバーにリクエストする際に要求するメッセージをHTTPリクエストと呼び、サーバーがクライアントに応答する際のメッセージをHTTPレスポンスと呼びます。

HTTPリクエスト

HTTPリクエストは以下のような構造です。

・リクエスト（HTTPメソッド、パス、バージョンなど）
リクエストの部分には、Webサーバーに要求する処理情報が記載されています。
細分化すると以下のようになります。
-HTTPメソッド：サーバーに対して操作を指示する
-パス：WebサーバーのURLを示す
-バージョン：HTTPプロトコルのバージョンを指す

・HTTPヘッダー
Webブラウザの情報、データのタイプなどが記載されています。

・HTTPボディー
WebブラウザがWebサーバーに追加で送りたい情報が記載されています。例えば、ユーザー登録をしたい際の名前やメールアドレスなどの情報です。

HTTPレスポンス

対して、HTTPレスポンスは以下のような構造になっています。

・レスポンス（ステータスコード）
Webブラウザが送信したリクエストに対して、Webサーバーが処理結果を応答するための情報が記載されています。この処理結果を示すために用いられるのがコードです。
例えば、「200 OK」は処理が成功したことを意味し、「404 Not Found」はリクエスト先のURLが見つからないことを意味します。

・HTTPヘッダー
Webサーバーの情報、データのタイプなどが記載されています。

・HTTPボディー
取得したHTMLやCSS、画像のようなリソースが記載されています。

MIMEタイプ

MIMEタイプとは、クライアントに対して転送するドキュメントの形式を示すための機能です。
MIMEタイプは、タイプ/サブタイプのように表現し、直感的でシンプルな構造です。

各データの形式を以下のように示すことができます。

  • text/plain：テキスト形式
  • text/html：HTML形式
  • text/css：CSS形式
  • text/javascript：javascript形式
  • image/jpeg：jpeg形式
  • video/mp4：mp4形式
  • application/json：JSON形式

HTTPヘッダー

さいごに、HTTPリクエストのヘッダーで良く利用されているプロパティを紹介します。

・Accept
リクエストヘッダー内で、クライアント側が理解できるMIMEタイプを知らせるために利用します。
例えば、application/jsonと入れることで、JSON形式のデータを理解できることをサーバーに伝えます。

・Content-Type
リクエストボディーに含まれているコンテンツの形式をMIMEタイプで表します。
例えば、application/jsonとして、JSON形式のデータを送信することをサーバーに伝えます。

・Authorization
サーバーから認証を受けるために利用します。
例えば、ユーザーがログインしているかどうか判断したい場合などです。

まとめ

今回は、HTTPプロトコルとは何か、またHTTP通信の仕組みについて解説しました。

普段私たちが目にしているWebサイトは、ブラウザ側とサーバー側の細かいコミュニケーションを通じて表示されていることが分かりました。

今後JavaScriptでサーバーと通信を行う際には、HTTP通信を操作したり、HTTPメッセージを意識する機会が増えてくるはずです。まずはこれらの仕組みの理解に繋げてください。

合わせて読みたいネットワークリクエストシリーズ

第1回：HTTPプロトコルとHTTP通信の仕組み（当記事）
第2回：AjaxとXMLHttpRequest
第3回：JSONデータを扱う方法
第4回：FetchAPIとHTTPリクエスト