【イラスト図解式 この一冊で全部わかる Web技術の基本】「1-6.Webページが表示される流れ」でわかった壮大さ
【イラスト図解式 この一冊で全部わかる Web技術の基本】
「1-6.Webページが表示される流れ」でわかった壮大さ
「イラスト図解式 この一冊で全部わかる Web技術の基本」の第1章6節についての要約、自分なりの知識の整理という2点を述べていきます。
1.要約
URL（Uniform Resouse Locator）
①取得したいWebページをWebブラウザに指定する
②URLからWebブラウザが解釈して表示
③そのほか必要な画像などが表示
URLからは、どんなやりとりの手順で、どのWebサーバーに、何のコンテンツを取りに行くかがわかる
Webブラウザは指定されたURLから、指定されたやりとりの手順で、Webサーバーからコンテンツ（HTMLファイルなど）を受け取る
これを繰り返し、必要なすべてのファイルが揃えばWebページが完成！
2.知識の整理
「Webページが表示されるために必要なサーバーにはWebサーバーとDNSサーバーがある」と目にし、正直ちんぷんかんぷんになってしまったので図解して整理します！
- Webページが表示されるしくみ
まず、Webページの表示のざっくりとした流れです。
ブラウザにURLを入力することで、ブラウザからHTTPリクエストがWebサーバーに、WebサーバーからはHTTPレスポンスを送ります。
ちなみに、サーバーとは該当するコンテンツのサービスを起動しているコンピュータのことを指します。
YouTubeにはYouTube専門のWebサーバーが存在しています。
このサーバーはコンピュータで一律に管理されていますが、メンテナンス等を担当している組織や部署ももちろん存在していますよ！
とはいえ、まだざっくりですね。詳しく見てみましょう。
次に、HTTPレスポンスの詳細についてです。
ブラウザで検索することで、DNS（Domain Name System）サーバーにドメインが送られます。
おっと！ここで、新たなサーバーのDNSサーバーが登場しました！
（カタカナ、アルファベットたくさんですよね！！！！笑）
DNSサーバーとは、世界中のドメインとアドレスの対応関係を管理しているものです。
（えっでもどうして必要？Webサーバーじゃダメなんですか！？）
このサーバーが必要な理由は、システム上、コンピュータ（サーバー）とブラウザで住所の表示方法が異なっているためです。
コンピュータは数値を管理しやすいです。
たしかに映画やドラマでハッキングのシーンを見ると画面上に数値の羅列がたくさん。。。
一方、ブラウザは文字表示になっています。
人間は一部のつよつよな方を除いては、数値の羅列を見てもあたまポカーーーン。ですよね。
人間でも読めるようにブラウザでの表示は文字になっているそうです。
まとめるとドメイン、IPアドレスともにインターネット上の住所という前提は変わりません。
違いは媒体と表示方法です。
人がブラウザで見やすいように読める文字にしているのがドメイン（例：YouTube.comなど）
パソコン側が管理しやすいように数値にしているのがIPアドレス（例：111.111.111.11など）
と考えるのがいいと思います。
（ていうか、DNSサーバーってめっちゃくっちゃ個人情報の塊じゃないですか。）
（なんかちょっとどきどきしちゃいますね。）
お！次はWebサーバーとブラウザのやりとりに戻ってきました〜〜
ここではWebサーバーの出番です！
ブラウザは先ほどDNSサーバーから受け取ったIPアドレスをWebサーバーに送信します。
もう少しでWebページが見られそう！ソワソワ。
そして、WebサーバーからはWebページの構成に必要なファイルが送信されます。
これで完成！Webページが表示されました！おめでとう！！！！
.......ん？いきなりHTMLとCSSが登場？どういうこと？どこでプログラムが構成されている？？なぬ！？？
ということで、もう少し、次で最後です！
実は、上図の⑥の段階の前に、Webサーバー内で少し動きがあるんです。
Webサーバーは先ほど取得したIPアドレスをデータベース宛に送ります。
データベースとは、さまざまな情報が保管されている倉庫のようなものです。
ここでは、プログラミング（ここではRuby,Python,Java,PHPが代表的）をする際に必要な情報が処理されます。
- あなたへのおすすめ
YouTubeって登録しているとトップページに「あなたへのおすすめ」が出てきます。
あれって閲覧履歴からどんなものが好きか分析されているんですよね。
YouTubeやAmazonは個人に合わせて情報を表示する機能があるため、データベースから個人のデータを持ってきてカスタマイズ（プログラミング）する必要があります。
その後、プログラミングを経て完成したファイルはWebサーバー、ブラウザへと送られます。
ようやく完成です！
Webページが表示されました！！！！！！！
あの数秒の間にこんなにも壮大な処理が行われているなんて！！！笑
作った人天才すぎません！？
かっこいい（単純）
【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
Webページはどうやって表示されてるの？
「HTTPリクエスト」と「HTTPレスポンス」
