普段から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メッセージを意識する機会が増えてくるはずです。
まずはこれらの仕組みの理解に繋げてください。

JavaScript関連記事