URLでWebページが表示される流れ解説

中小企業のWeb担当者さん、広報担当さん、サイト更新は慣れてきたけど、ふと思ったことはありませんか?

「あれ、URLってそもそも何?」

「ネームサーバーとかIPアドレスって何だっけ???」

うっすらわかってるけど、きちんと腹落ちしていないので、業者さんとのやり取りの時に出てきたりすると、ちょっとわからなくなるやつです。
しっかり理解せずともやっては行けるが、何かあった時の問題の切り分けや推測に役に立つ。そんな情報だと思います!

目次

Webページが表示される基本の6ステップ

URLを入力してからページが表示されるまでは、どのような仕組みになっているのでしょう。まずは全体像を見ていきます

ユーザー(人間)

ブラウザ君、クロちゃん(ねこ)に会いたいの!

ブラウザ君

(え、クロちゃんの画像出してってこと?)よし!でも住所がわからないと取りに行けないぞ!

大きく分けて次の6つのステップで進みます。

  1. ユーザーがブラウザにURL入力
  2. そのURLから、ブラウザがネームサーバーにIPアドレス要求
  3. IPアドレスゲット
  4. そのIPアドレスのウェブサーバーに、ブラウザがファイルを要求
  5. ファイルゲット
  6. そのファイルをブラウザが翻訳して、ユーザーにウェブページを表示する

それでは、各ステップを一つずつ見ていきましょう。

① ユーザーがブラウザにURLを入力する

あるところに猫画像を求める人間がいました。

ユーザー(人間)

ブラウザ君、クロちゃんに会いたいの!

ブラウザ君

(クロちゃんの画像があるページ出してって事?)“どこの誰のどのアルバム”にあるのか、ちゃんと指定してくれなきゃ探せないぞ!

でも(今のところ)、見たいページのアリカを指定しないとブラウザは動けません

ユーザー(人間)

じゃ、これ。https://neko.com/nyalbum22/kurochan.html

【neko.com】のところの【nyalbum22】にある【kurochan】っていうやつ(ウェブページ)がいい…

こうして人間がURLをブラウザに渡し、ブラウザはユーザーにkurochan.htmlを表示させるという使命が発生しました。

さて、URLは人間が見たいファイル(クロちゃんのページ)のアリカを記した「位置情報」のようなものです。入れ子構造になっており、人間が読みやすい【意味のある文字】が使われています

最終的に見たい【kurochan.html】という猫ページが【neko.com】 の【nlalbum22】に格納されているという表示です。

このneko.comが【ドメイン】でいわば部屋のようなもの、その中のディレクトリnyalbum22が本棚で、そこにkurochan.htmlというファイルがある、といった具合です。よく後述の【IPアドレス】とともに「住所」にたとえられますが、同列で「住所」と考えるとずれが生じます。 

*ちなみに先頭の「https://」は【スキーム】と言って、通信方法を指定するものです。この例の場合「HTTPS方式でね🥰」と言っておりますが、ここではあまり深堀しません。

② ブラウザがネームサーバーにIPアドレス要求

位置情報とファイル名は渡されたものの、がしかし、なんとブラウザは人間語の「neko.com」では何も分かりません。

これをコンピュータ語の【IPアドレス】に翻訳してくれるのがネームサーバーです。なので、まずはネームサーバーのところへ聞きに行かなくてはいけません。

ブラウザ君

nek…? わからん、ネームサーバー兄さん。これどこ?

③ ネームサーバーからIPアドレスゲット

 ネームサーバー(DNSサーバーとも呼ばれる)は、ドメイン名からコンピュータ用の住所(IPアドレス)を教えてくれます。【IPアドレス】はドメインのような意味を持つ文字ではなく、人間にとっては数字の羅列に見える、コンピュータ語の住所です。「198.163.11.44」とかの、アレです。

ネームサーバー兄さん

neko.comは 203.0.113.25 だyo!

ブラウザ君

サンキュー!よし、これで住所が分かった!行ってきまsu!

少し深堀すると…

【IPアドレス】とはドメインneko.comが入っている「ウェブサーバーの住所(コンピュータ語)」です。

「ウェブサーバーの住所」なので、さくらやロリポップなどのレンタルサーバー共用プランの場合、複数のドメインが一つのウェブサーバーに住んでいる状態のため、それらは全く別サイトでも同じIPアドレスを持ちます

neko.comの他に、inu.com、usako.com、mofu-mofu.com などのドメインのウェブサイトが同一ウェブサーバーにあれば、それらは同一のIPアドレスを持つことになります。一つのドメインや一つの契約ごとに固有のIPアドレスがあるのではなく、一つのウェブサーバーごとに固有のIPアドレスがあるのだという事です。

ここが、URLやドメイン、IPアドレスを、同じ「住所」と捉えるとズレが発生するところです。

URL: ウェブページの住所

IPアドレス:ウェブサーバーの住所

④ ウェブサーバーへファイルを要求

ブラウザ君はIPアドレス(住所)を頼りにウェブサーバーの家へ行き、ファイルをもらいます。

ブラウザ君

ウェブサーバー姉さん、このファイルおくれ! /nyalbum22/kurochan.html

⑤ ファイルをゲット

 ウェブサーバーは中身を読んだり翻訳したりはせず、ただファイルをそのまま返すだけです。

ウェブサーバー姉さん

ほらよ、これが kurochan.html だ!

ブラウザ君

ありがとう!中身はオレが読むから大丈夫!

⑥ ブラウザがファイルを翻訳してウェブページとして表示する

ブラウザ君は受け取ったファイルを読み取り、私たちが見やすいように画面に組み立てて表示します。HTMLタグやCSSを読んでタイトルに装飾をつけたりするのは我らがブラウザの仕事です。

ブラウザ君

ほら、クロちゃんのページだよ!

ユーザー(人間)

きゃー!キャー!kya-!!!!!!

こんな感じで私たちはURLをブラウザにリクエストしてウェブページを表示してもらってます。上の例でもし「課金する」ボタンをクリックすればどうなるか、是非考えてみてください。

ちょっと先、ちょっと裏を知っておくこと

というわけでURL入力からウェブページ表示の流れを見てきましたが、あの一瞬で、色々やっているのですね。さらに過去に訪れたことのあるサイトの場合、キャッシュと言って履歴をためておくシステムがあり、この工程を全て踏まない場合もありますし、何らかの問題が起きて工程が中断することも。404や403エラーとして見たことがありませんか?

ウェブ、ホームページにかかわる仕事をしていても、広報や制作としてサイトの中身を作っていくポジションにいると、この辺りの知識は無くても問題がないことが多いかもしれません。
ただ、いつもの自分の範囲の少し先を知ることで、思いの他、関係者(クライアント含め)とのやり取りがスムーズになるものですし、お仕事の幅も広がります。
正確に専門的に理解する必要は無くても、うっすらボンヤリ状態なのを、もう一段腹落ちさせて、人にちょっと説明できるレベルになると良いですよね

  • URLはウェブページの住所(人間語)で、IPアドレスはウェブサーバーの住所(コンピュータ語)
  • ブラウザはURLのドメインをIPアドレスにしてもらってウェブサーバーを探す
  • ネームサーバーは住所を翻訳する辞書係。URLのドメインからIPアドレスを割り出す
  • ウェブサーバーはウェブサイトのファイルを格納している人
  • ブラウザは走り回ってファイルを探し、翻訳して人間に見せる職人

クロちゃんに会いたい!と願ったら、ブラウザ君が走り回って → 住所を調べ → ファイルをもらい → 翻訳して画面に見せてくれる。これが、私たちが毎日何気なく見ているWebページが表示される仕組みです。
是非毎日の検索のときや、何か問題が発生した時に思い出してみてください

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次