takayucky’s tech blog

業務系パッケージの開発エンジニアがWebエンジニアへの転職を目指して勉強したことについて技術ブログを書き始めた、時を同じくしてニューヨーク・クイーンズ地区出身のラッパーが突然姿を消したが、一体何が起きようとしているのか…

初めてのHTTP

自分の理解のため、そして、ネットで探してみても自分がしっくりくる説明がなかったので書いてしまおうってことで、HTTPについて説明していきます。(理解が誤っている箇所もあるかもしれませんが、ご了承ください。)

 

そもそもHTTPとは

そもそもHTTPって何でしょうね。まずWikipedia で見てみましょう。(以下、httpと小文字で記載します。)
Hypertext Transfer Protocol(ハイパーテキスト・トランスファー・プロトコル、略称 HTTP)とは、WebブラウザとWebサーバの間でHTMLなどのコンテンツの送受信に用いられる通信プロトコルである。 ハイパーテキスト転送プロトコルとも呼ばれる。
httpは略称なんですね。WebブラウザとWebサーバがメッセージをやりとりする際の間を取り持つ何かってことも分かりました。ここまではわかったんですけど、通信プロトコルってなんやねん、という疑問が浮かびました。プロトコルとか日常生活でまず使わない単語ですし、スッと理解できません。というわけで、次は通信プロトコルについてWikipedia で調べてみました。
 
通信プロトコル(つうしんプロトコル、Communications protocol)、あるいはネットワーク・プロトコルは、ネットワーク上での通信に関する規約を定めたものである。「通信規約」や「通信手順」と訳す場合もある。

ここまで来るとちょっとわかってきました。httpとは、WebブラウザとWebサーバとの間でメッセージをやりとりするときのルールである、と。メールに例えると、

メールを送信するときのルールとして、タイトル、宛先、本文、が必要。ただし、本文は空でもいいけど宛先は必須。

といったところでしょうか。では、httpで決められているルールを見てみましょう。httpではメッセージをやりとりするときに、以下の形式でメッセージを構成することが決められています。
 
  • スタートライン
  • ヘッダー
  • 空行
  • ボディ
1行目がスタートラインと呼ばれています。2行目以降はヘッダー。空行が間に入って、次にボディとなります。(ボディは記載されない場合もあります。)これだけだとよくわからないんで具体的に見ていきましょう。ブラウザでChromeを使用している場合だと、Google Developer toolsを使用することで簡単にhttpメッセージを確認することができます。
 
例として以下のサイトを見ていきましょう。

(公社)日本ボディビル・フィットネス連盟

 

筋骨隆々なボディビルダーの写真とまるでおじいちゃんがパソコン教室で作成したかのようなサイトが表示されたかと思います。(ちなみに別にボディビルをdisってはないです。むしろ私はボディビルはこれから来るんじゃないかと思ってます。)

 

それでは右上の設定から、その他のツールデベロッパツールを選択してください。Google Developer toolsの画面が表示されたかと思います。

f:id:takayucky:20160409221828p:plain

Networkタブを選択し、Nameのところで一番上の「http://www.jbbf.jp/」を選択してみてください。すると、右側にResponse HeadersとRequest Headersが表示されたと思います。(WebブラウザからWebサーバに送ったメッセージがRequest Headersに、WebサーバからWebブラウザに返ってきたメッセージがResponse Headersに対応します。)初期表示としてはparse(整えられた)されたhttpメッセージが表示されていますが、view sourceをクリックすると、httpメッセージ本文が表示されます。Request Headersを見ていきましょう。

 

  1. GET / HTTP/1.1
  2. Host: www.jbbf.jp
  3. Connection: keep-alive
  4. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
  5. Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36
  6. Referer: https://www.google.co.jp/
  7. Accept-Encoding: gzip, deflate, sdch
  8. Accept-Language: ja,en-US;q=0.8,en;q=0.6

 1行目の「GET / HTTP/1.1」がスタートラインに対応します。2行目以降がヘッダーです。今回の場合、ボディはありません。このように、Chromeを使用していれば低いハードルでhttpメッセージを確認することができます。

 

以上で、こんな感じでWebブラウザとWebサーバはメッセージをやり取りしてるんだ、というのがなんとなくわかったかと思います。ただし、「1行目のGETってなに?」とか「どんなときにボディにメッセージが書かれるの?」とかまだまだ疑問は残るかとは思います。私も全てを理解できているわけではないので、継続して理解を深めていきたいです。今回は初めてのHTTPということで、私がここ1週間くらいで初めてHTTPについて理解したことを書いていきました。続編があるかはわかりませんが、今後も定期的に自分が理解したことを、自分の理解のために、説明していくつもりです。