Ryo5smileの技術ブログ

学んだこと

【１０月２週目】Webを支える技術を読んで【１／２】

Webを支える技術 ―― HTTP，URI，HTML，そしてREST WEB+DB PRESS plus

Webを支える技術を読みました。今まではコーディングの技術や言語の知識を深める学習が多かったのですが、「そもそもWebてどういう風に動いているの？」という疑問に駆り立てられこの本を購入しました。HTTPなどの用語をなんとなく知っているから脱却し聞かれても説明できるレベルへとステップアップして、その知識を血肉にしていきたいと思います。Webで扱われる技術は進歩が早いイメージがありますが、HTTPなどのWebシステムの技術は数十年変わっていないほど完成度が高いらしく、今後もこのあたりの技術が使われていくと思うので優先的に知識に入れておきたいです。

Webとは何か

この本は「そもそもWebって何？」というところからスタートしており、私自身「Webってなんですか？」と聞かれてもざっくりとしか説明できないなーと自覚しているのでまずはそこから押さえておきます。

webとは、インターネットを利用してWebページなどを繋ぎ合わせた仕組みのことです。これだけだと意味がわからないので詳しく説明します。webと言う言葉は日本語で「クモの巣」という意味があり、webの正式名称はwww(World Wide Webの略)と呼ばれております。これを直訳すると「世界最大規模のクモの巣」となり、情報をまるでクモの巣のように張り巡らされていることからこの名称に名付けられました。そしてインターネットとは様々な情報をやりとりするための通信技術のことであり、私たちは普段webというクモの巣でインターネットを使って明日の天気を見たり、Youtubeで動画を見たりして情報をやり取りしています。

このように幅広い用途で使われているWebは具体的にどんな技術が使われているのかというと、主に３つの技術が柱となっています。

Webを支える3つの技術

HTTP

HTTPとはHypertext Transfer Protocolの略でWebサーバとWebブラウザの間で、Web情報をやりとりするためのプロトコル（通信規則）です。私たちは普段ChromeやSafariといったWebブラウザを使ってニュースをみたり買い物をしているわけですが、そういったニュースなどの情報をこのプロトコルを使ってブラウザから情報元のWebサーバーに要求して取得しています。

リクエストとレスポンス

HTTPはクライアント（ブラウザ）が出したリクエストをサーバーで処理し、レスポンスを返します。例えばChromeなどのブラウザを使って、Googleにアクセスする場合は以下の流れで処理が行われています。

  1. DNSを使ってhttps://www.google.com/のホスト名を名前解決
  2. 帰ったIPアドレスのTCPポートに接続
  3. リクエストを送信
  4. サーバーがリクエストを読み取り、レスポンスを返しブラウザにGoogle.comが表示される

そして、こういったやりとりは全てHTTPメッセージと呼ばれる方法でやりとりされており、リクエストメッセージとレスポンスメッセージに分けられます。

リクエストメッセージ

リクエストメッセージでは、主に４つの要素から構成されています。

  1. スタートライン（リクエストライン）
  2. ヘッダ
  3. 空行
  4. ボディ

スタートライン

スタートラインはリクエストとレスポンスで呼び方が異なり、それぞれ

  • リクエストライン
  • レスポンスライン となります。

リクエストラインというのは、「何をどうしたいか」かがざっくり書かれており例えば

GET /test HTTP/ 1.1の場合

  • GET (取得するメソッド)

  • /test （testというリクエストURL）

  • HTTP/1.1 （プロトコルのバージョンは1.1）

となっています。

ヘッダ

リクエストメッセージのメタデータが入ります。これはメッセージの内容とは関連のないものになっています。一つのメッセージにはいくつものヘッダーを持つことができ、各ヘッダは「名前：値」という構成をしています。以下の例では「example.jpというサーバー名のホストにリクエストを送りますよ」という情報を持っているヘッダになります。

例：Host: example.jp

ボディ

HTTPメソッドがPOSTのときに、一緒に受け渡すパラメータで保存したいデータがある場合にそのパラメータがこちらに格納されます。 なおJSON形式で送信されます。

レスポンスメッセージ

サーバからレスポンスが来るときにこのレスポンスメッセージが送られますが、こちらもリクエストメッセージ同様４つの構成でできております。

  1. ステータスライン
  2. ヘッダ
  3. 空行
  4. ボディ

ステータスライン

ステータスラインは大まかにいうと「リクエストした結果どうなったか」が書かれております。

HTTP/1.1 200 OK

例えばこのような例だと、

という感じでプロトコルとその結果が書かれております。 なおステータスコードは100番台から500番台まであり、番台でそれぞれ結果の分類がされています。ステータスコードの分類についてはこちらの記事がわかりやすいです。

ヘッダ

リクエストヘッダと同じく、メッセージのメタデータが入ります。

ボディ

こちらはリクエストしたな結果の具体的なパラメータが入ります。例えば、idが○番の記事を取得して！というリクエストを送った場合、そのid番号の記事の内容がこちらに格納されて送られます。 パラメータのみではなく、特定のページを表示したい場合はそのページの情報（HTML）がレスポンスヘッダとして返ってきます。

まとめ

Webを支える技術の１つにHTTPという通信の規格があり、 そのHTTPを使ってクライアント（ブラウザ）とサーバー間で情報をリクエストとレスポンスで情報のやり取りしています。

Webを支える3つの技術ということで書き出しましたが一つ一つ内容が濃かったので、後の２つ（URIとHTML）は次回書きます笑

ちなみにHTTPはステートレス性やHTTPメソッドの種類なども本書では解説されいますが、今回はリクエストとレスポンスについて重点的に書きたかったので省いていますので、気になる方はぜひ本書を手に取ってみてください。