最近、身の回りで、webフレームワークを学んでいるけど、そもそも「web」とか「HTTP」わからない、みたいな、そんな話があって本記事を記載しました。
そのような方々に、少しでも参考にしていただければと思います。
もくじ
- はじめに
- この記事のゴール
- web ページとは
- 「web ページをみること」の第一歩
- TCP/IP とは
- HTTP とは
- web はおまじないではない
- 終わりに
はじめに
この記事では、基本的な HTTP の動きを、ざっくり理解してもらうことを目標としています。
昨今の web 開発では、基本的にはライブラリやフレームワークなどは当たり前に導入されています。そのため、新卒で入社すると、フレームワークの使い方を先に学ぶために、そもそも web ページとは？HTTP とは？という、一番重要と思っている部分が蔑ろ（早期戦力化のため？）にされているように思います。（個人経験談です）
そのため、フレームワークに依存しない素の HTTP を学び、基礎的な部分の知識を習得することを目指します。
この記事のゴール
以下を目指します。
- web ページを見ること、はおまじないではないことを知る
- HTTP についてざっくりと知る
全体のイメージを掴み、「web ページを見ること」がおまじないではなく、HTTP という確固たる技術のもとに動いている、ということを知っていただきたいです。
そのため、ステータスコードや HTTP メソッドなどはざっくりとしか触れません。また、web アプリケーションについても触れません。
それでは本題に入ります。
web ページとは
safari とか、Chrome とかで見ている、これ、今ここ。この qiita のページも web ページですね。
普段から見ている通販サイトから、チケットの販売サイト、会社のコーポレートサイトなど、ブラウザを用いて閲覧しているページの全てを指します。
「web ページをみること」の第一歩
web ページをみること、これには普段意識しませんが、HTTP（Hypertext Transfer Protocol） という通信のもと、クライアントとサーバーが同じルールで通信を行います。
「Protocol」は規約を意味し、通信のルールのことです。
HTTP 通信の全体像を示します。
まず、以下の二つの存在から成り立ちます。
- クライアント
- サーバー
そして、その 2 点間の通信は、以下の二つで成り立ちます。
- リクエスト
- レスポンス
このように、
- 「クライアント」と「サーバー」
の間で、
- 「リクエスト」と「レスポンス」
を行うことで、「web ページをみること」が成り立ちます。ここでいう「サーバー」は。HTML 置き場、くらいのニュアンスとします。
改めてになりますが、クライアントとサーバーは、「HTTP」というルール（プロトコル）のもとに通信を行います。
ここから、この「web ページをみること」について、さらに深堀をしていきます。
TCP/IP とは
とてもとても大切なトピックですが、ここでは、「宛先の端末（IP アドレス）の、宛先のプログラム（ポート）までの通信を行う仕組み」 、くらいとして、クライアントとサーバーを繋ぐ通信の仕組みとご理解ください。
TCP/IP もとても重要なプロトコルです。興味があれば学習してみてください。
通信の全体像については、「OSI 参照モデル」というワードで検索してみてください。
HTTP とは
HTTP とは、web ページの閲覧に使用されるプロトコルです。
クライアントからの「リクエスト」を受けると、サーバーが「レスポンス」を返す、仕組みとしてはこれだけです。
みなさまが、普段ブラウザで web ページを開いた時に
- ブラウザが URL の宛先に「リクエスト」を送り、
- 受け取ったサーバーが「レスポンス」を返す、
- レスポンスを受け取ってブラウザが画面を表示する
ということが起こる、基本的にはそれだけです。
それでは一つずつ見ていきます。
リクエスト
ブラウザで web ページを開いた際に、クライアントがサーバーに送信する文字列です。
以下がその例です。
GET /index.html HTTP/1.1
Host: localhost:3000
Connection: keep-alive
それぞれ
という名称があり、
- リクエストライン
- リクエストの最初の行
- HTTP メソッド（例は 「GET」、リソースの取得を示す）
- ターゲット（例は 「/index.html」、そのリソースの取得するリクエストであることを示す）
- HTTP バージョン（HTTP/1.1）
- ヘッダ
- リクエストラインの次の行
- リクエスト自体の情報、クライアントの情報などを記載
- 空行
- ヘッダの終わりを示す。（正確には、2 回連続の CRLF）
- ボディ
- サーバーになんらかの情報を送信する際に使用する
という意味のある文字列です。
HTTP メソッドについて、他にどのようなものが、どのような目的で存在するか調べてみてください。
なお、web ページの閲覧における「リクエスト」は、ブラウザが送ってくれています。
レスポンス
サーバーがクライアントからリクエストを受け取って、クライアント側に返す文字列です。
以下がその例です。
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1000
<html>
<body>
<h1>サンプル</h1>
</body>
</html>
それぞれ
という名称があり、
- ステータスライン
- レスポンスの最初の行
- HTTP バージョン（HTTP/1.1）
- ステータスコード（例は「200」 リクエストの処理の結果を示す。200は成功）
- ステータステキスト（OK）
- ヘッダ
- ステータスラインの次の行
- リクエスト自体の情報、サーバーの情報などを記載
- 空行
- ヘッダの終わりを示す。（正確には、2 回連続の CRLF）
- ボディ
- web ページの閲覧においては、画面に描画する HTML 自体
という意味のある文字列です。
ステータスコードについて、他にどのようなものが、どのような目的で存在するか調べてみてください。
この記事では触れませんが、リクエストによってレスポンスを変えて、機能を実現したものを、広義で web アプリケーションといいます。
レスポンスを受け取ると
ブラウザがリクエストに対するレスポンスを受け取ると、レスポンスの
- ステータスコードが「200」だった
- リクエストの応答が正常に返ってきたのか
- ヘッダ
- こんな情報なのか
- Content-type が「HTML」で、HTML が返ってきたのか
- ボディ
- Content-type が「HTML」だったから、これを画面に描画するのか
一例として、このような情報をもとに、画面に web ページが描画されます。
これが 基本的な HTTP であり、web ページを見ること、の第一歩です。
web はおまじないではない
ここまできて、上記で記載した、
web ページを見ること、はおまじないではないことを知る
について、ご理解いただけましたか。
改めて絵にすると、このような全体像です。
再三になりますが、「クライアント」と「サーバー」からなり、その2点間で、リクエストとレスポンスのやりとりをする、これが HTTP であり、「web ページを見ること」の全体像です。
CSS や JavaScript、SPA、API、Web アプリケーションと、そのためのライブラリやフレームワークなど、web の世界では、まだまだ内容は足りませんが、第一歩として、「web ページをみること」を説明できるくらいの知識は必要かと思います。
また、ライブラリやフレームワークを導入して、どれだけ開発を便利に（複雑に）しても、根底で動いている技術は HTTP であり、上記で説明した内容になります。
終わりに
この記事は、web を学び始めた方、フレームワークから初めたため根底の理解が疎かになっている方に向けて、そもそも「web ページを見ること」ってなに？から、HTTP の基礎を知っていただくために記載しました。
実際のサービスの開発、テスト、運用保守では、プログラムの正しさだけでは対応しきれない事象が起こり、往々にして、ベーシックな知識が求められることがあるように思います。
そのため、この記事から少しでも、HTTP の全体像をご理解いただき、（イケてる技術だけでなく）基礎を大切にしていただけると幸いです。