Zenn
📌

【初学者によるまとめ】この一冊で全部わかるWeb技術の基本　「Chapter１」＞「06. Webページが表示される流れ」

2024/12/09に公開
Web
url
web技術の基本
tech

目的：「イラスト図解式 この一冊で全部わかるWeb技術の基本」の要点を自分なりにまとめアウトプットして理解力の向上に努める。

注意点
🤔 ←この絵文字の文章は個人的な見解になります。的外れなこともあるかと思います。

（参考書籍）
イラスト図解式 この一冊で全部わかるWeb技術の基本

（参考サイト）

Webページが表示される流れ - URLに応えてHTMLが転送される

URLを使ってWebサーバーにアクセス

  • Webページを取得するときには「何を取得したいか」などリクエスト内容を指定する必要がある。その際に用いられるのがURL（Uniform Resource Locator：統一資源位置指定子）。
  • Webブラウザが送信するURLには「どのやり取りの手順で」「どのWebサーバーに」「何のコンテンツを」取りに行くかの情報が含まれている。

（URLが含んでいる情報）

URL
 +--「どのやり取りの手順で」（How）
 +--「どのWebサーバーに」（Where）
 +--「何のコンテンツを」（What）

↓↓↓↓↓↓↓↓↓↓

（例）
https://be-early-bird53.hatenablog.com/about

https://be-early-bird53.hatenablog.com/about
 +--「https」（How）
 +　＞HTTPSを使った通信を希望している
 +
 +--「be-early-bird53.hatenablog.com」（Where）
 +　＞Webサーバーは「be-early-bird53.hatenablog.com」というやつ
 +
 +--「about」（What）
　　＞「about」というコンテンツがあるはずだからそれを取得
※'HTTPS'はHTTPのセキュリティ強化版

さらにほかの画像などを転送

  • 一度のコンテンツの転送で送られてくるファイルは１つ
    • Webブラウザによるコンテンツの解読の結果として画像や動画などが必要と判明した場合、画像ファイルや動画ファイルを取得するためにWebサーバに再度要求を行う。
      • ある１つのWebページを表示するのにWebブラウザからWebサーバーに対して何度もリクエストが送信されているということになる

（ざっくりWebページの表示の流れ）

  1. ブラウザがWebサーバーにHTMLファイルを要求
  2. Webサーバーが要求されたHTMLファイルを応答
  3. ブラウザがHTMLを解釈し、画像ファイルが必要となる
  4. ブラウザがHTMLに記載された画像ファイルのURLを使い、Webサーバーに対して画像ファイルを別途要求
  5. Webサーバーが要求された画像ファイルを応答
  6. ブラウザが受け取った画像ファイルをHTMLに組み込んで表示
  7. この要領で .css、.js などのファイルも必要であればリクエストを送る

個人的疑問・所感など

🤔<(コンテンツは単一のHTMLファイルで成り立っているのではなく、HTMLを起点にリクエストを送ってあらゆるファイルを取得して仕上げている。よく言われる"HTMLは枠組み"というのは単にデザイン的な意味合いもあるかもしれないが、コンテンツ構築のためのリクエストを送信したりするコンダクター的なポジションのように思う。)

Discussion