ぽんぽこ開発日記

主にHTML, CSS, JavaScriptなどフロントエンドの話を。目指せ脱初心者。

いまさら聞けないHTTP通信の基礎

春休みなので、基本的なものをもう一度おさらいしておこうと思いまして、HTTP通信について勉強しております。ただ、未だ分かっていないことが多い上にTCP/IPの詳しい知識なんて皆無状態で恐縮です。

というわけで、HTTP通信の基本となる部分のみさらっと復習してみることから始めました。

HTTP通信の仕組み

HTTP通信とはブラウザとWebサーバー間で行なう通信のことを指します。ブラウザからWebサーバーに向けてTCPというプロトコルを使って接続を行い、接続が成功したらブラウザは「こういう情報くださいな☆」というリクエストを発行します。Webサーバー側は発行されたリクエストを受け取り、サーバー側で検索を行い、要求された情報をかき集めてレスポンスとしてブラウザ側に情報を渡してあげる、ということをします。

プロトコルってなんぞや

自分もまだよくわかっていない部分が多いのですが、読んでいるJavaScriptの解説を読むと

プロトコル(Protocol)とは、ネットワーク上で通信を行なう上での手順や規約をまとめたものになります。

とあります。個人的には勝手に「通信する上での儀式・マナーっぽいやつね」と解釈して理解しております。


なのでステップにしてみると

  1. ブラウザからWebサーバーへTCP(マナーに従った)接続を行なう
  2. 接続が成功したら、ブラウザは●●●な情報がほしい、とリクエストを発行する
  3. サーバー側はリクエスト通りに情報をかき集めてブラウザに送る


HTTPリクエストの中身

HTTP通信でブラウザからWebサーバーに送るリクエストの中身はこうなっているようです。

  1. HTTPリクエスト行
  2. HTTPヘッダ
  3. 空行
  4. メッセージボディ
HTTPリクエスト行

最初にリクエスト行というものがきます。ここにはメソッド・URL・プロトコルが記載されております。メソッドとはGET / POSTといった情報を取得するのか送信するのかといった手段を意味します。URLはアクセスしたいURLを明示し、サーバー側はこのURLに従って情報を集めることとなります。プロトコルとはHTTP 1.1のように現在の通信バージョンを記載しております。

HTTPヘッダ

文字コードであったり、UA(ユーザーエージェント)で合ったり、その他もろもろの細かい情報が記載されております。JavaScriptを使ってこれら情報を操作し、分岐条件に使ったり、加工して最適化を図ったりすることがままあります。

メッセージボディ

POSTした時に使用される部分。送りたい情報をのっけるとこ。



HTTPレスポンス

レスポンスの中身はこうなっているようです。

  1. HTTPステータス行
  2. HTTPヘッダ
  3. 空行
  4. メッセージボディ
HTTPステータス行

プロトコルステータスコードが表示されている。(200とか403とか)

HTTPヘッダ

ブラウザに送った(HTMLであったりpngなどの)データの形式や、Webサーバーの種類など載っている。

メッセージボディ

HTMLファイルなど、データの本体が載っている。これをブラウザは読み取り表示しているわけっぽい。

要するに...

ブラウザとWebサーバー間で行なうHTTP通信ってのはTCPというマナーに従って情報のやりとりをする作業のことですよと。接続が成功したらブラウザさんはリクエストを送るし、サーバー側はそのリクエストに従って情報を提供しますよと。リクエストとレスポンスの中身はざっくりとこんな感じ(上記参照)ですよと。


今後とも

についても理解を深めていきたい

かんたんJavaScript (プログラミングの教科書)

かんたんJavaScript (プログラミングの教科書)