サイト表示の図解（頭の整理用）ver2 サイトの表示

以下の記事の続です。

今回はパソコンのブラウザ（例：chrome）でページがどのように表示されているか説明したいと思います。

１．初めに

まずはこの画像。

上記の画像は「https://note.com」のURLを叩いて表示された状態です。
画像の左側は通常見慣れたページだと思いますが、
画像の右側はchromeのディベロッパーツールと言って、ページを表示する際のリクエスト＆レスポンスの情報が表示できるツールを開いている状態です。
普段、Webサイトの仕事をしている人は、こういうツールを使って、期待した動作をしているか確認したりしているわけです。
chromeに標準搭載されており、キーボードのF12で起動/停止が可能です。

では、このツールで何が分かるかといいますと、
赤枠で囲んでいる部分からは、このページがどれくらいのファイルやサイズで構成されており、表示までにどれくらいの時間がかかっているか。
などが分かります。
また、青枠で囲んでいる部分からは実際に読み込んでいるファイル名やそれがエラーなく表示されているか、表示されるまでの時間などが分かります。

２．ページの構成

ページが表示される流れの説明の前に、ページ構成の話をしたいと思います。
ページを「htmlファイル」と「それ以外のファイル」
に分けて説明します。

htmlファイル：そのページの設計図を書いたファイル。
それ以外のファイル：画像やjsやcssなど。ページを構成する画像や部品、レイアウト処理を記載したファイル

ちなみにディベロッパーツールでもhtmlファイルの実際の中身は確認可能で、例としては以下の画像の赤枠部分です。
※細かくなるので今回は割愛しますが、知らない人が見たら暗号みたいで何が書かれているか分からないと思います…。

３．ページ表示の流れ

それでは、実際にURLを叩いた後でページが表示される流れを説明したいと思います。

まず「htmlファイル」がレスポンスされます。
※下画像の赤枠部分を参照。
まず設計図をレスポンスしないと次に何をしたらいいか分からない。
とイメージしてください。

htmlファイルの中身に、ページの構成やこの画像をここに配置する、本文の内容はこう。というような内容が書かれています。

ブザウザはそのhtmlファイルの中身を解析します。
その後、「それ以外のファイル」が順次リクエストされ、レスポンスされた情報をブラウザが受け取ってページを完成させて表示します。
※下枠部分の青枠部分を参照

以上です。

４．おさらい

流れをおさらいすると、
・ブラウザでURLをリクエスト
・サイト側からまずhtmlファイルがレスポンスされる
・htmlファイルに記載されている情報を元に、それ以外のファイルがレスポンスされる
・レスポンスされたファイルを元にページを完成させる。

いかがでしょうか？理解できましたでしょうか？

５．補足：ブラウザを使用しない方法

今回、内容の補足として、ブラウザを使用しないでページの情報をリクエスト＆レスポンスする方法も記載したいと思います。

その方法は「curl」です。
Winows10 のバージョンによっては標準で用意されているので、興味があれば試してみてください。

今回の例としては以下です。

まずWindowsのパソコンでコマンドプロンプトを起動します。

次にコマンドプロンプトで以下を入力します。
「https://note.com」のファイルを「note-curl.html」というファイルに保存します。
※ファイル保存するコマンドは色々あります。

curl https://note.com >> note-curl.html

実際に叩くと以下の結果になりました。

この保存されたhtmlファイルをchromeで見ると以下になり、ファイルが取得されていることが分かります。
ただ、この画像を見ると、赤枠部分が表示されてないことが分かります。
※ファイル表示の制限の話があるのですがここでは割愛します。

このように、ブラウザを直接使用しなくても、サイトの情報は取得することができます。ただ、色々と制限が入るのでブラウザで使用してサイトを見る方が確実ですし、便利です。

もう１つ参考に、ファイル保存をせずに、コマンドの画面に直接レスポンスを表示することでできます。

curl https://note.com

この場合は以下のようになり、とても目で見れたものではないですね…。
ただサイトの画像を一括で取得する（※サーバ側から攻撃判定される可能性もあるのでやらないでね！）など、開発者としてはテキストで扱えるこの状態のほうが便利だったりします。
ブラウザで毎回ポチポチ操作したのでは大変ですからね。

今回は以上です。

７．終わり

いかがだったでしょうか？内容理解できましたでしょうか？
サルでもわかる内容を意識して説明したつもりです…。
chromeのディベロッパーツールで試したりして、理解を深めてみてください。

コメントや感想など、お気軽にコメントもお待ちしています。

以上、続く。