テクノロジー

ホームページが表示される仕組み【具体的な流れを解説】

  1. 検索語句を入力して検索
  2. 検索結果から気になる情報をタップ
  3. 表示されたページを読む

これは、インターネット上で調べ物がしたいときのブラウザを操作する流れです。

いまやインターネットを使うなら当たり前の動きですよね。

この流れでこのページにきたという方もいらっしゃるかもしれませんね。

それでは今回の本題。

このときブラウザの裏側では、ホームページを表示するために細かな処理が実行されています。

この記事のテーマは「ブラウザはどのようにしてホームページを表示しているのか」。

その仕組みを解説していきたいと思います。

ホームページが表示される仕組み

ブラウザは検索結果のリンクをタップしたとき、内部でどんな動きをしているのでしょうか。

結論からいうと、ブラウザは次の流れでサーバーと連携を行い、ホームページを表示しています。

(※話をわかりやすくするため、ユーザー端末内部の動きはすべて「ブラウザ」と表現しています。)

  1. ブラウザがリンクにあるURLをサーバーに問い合わせる
  2. サーバーが各所に問い合わせてホームページの情報をもっているサーバーの住所をユーザー端末に返す
  3. ブラウザが②で教えてもらったサーバーにホームページ情報が欲しいと伝える
  4. サーバーがホームページ情報をブラウザにわたす
  5. ブラウザがそのホームページ情報を読み込んで表示する

それぞれ、詳しく見ていきましょう。

ブラウザがリンクにあるURLをサーバーに問い合わせる

ブラウザで見るリンクは基本的にすべてURL情報をもっています。

URLとは簡単に言うと「インターネット上のウェブページを一意に識別できるID」です。

このページでいうと、

https://yukihonda.com/how-the-homepage-is-displayed/

お使いのブラウザの検索バーに表示されている↑この文字列がURLです。

ブラウザはリンクがもつURLにある「yukihonda.com」(ドメイン名と呼びます)の部分をサーバーに問い合わせます。

サーバーとは簡単に言うと「インターネットにつながってるコンピュータのうち、いろんな専門情報を持っていて、聞いたら教えてくれる存在」のことをいいます。

ありがたいですね。

②DNSサーバーがIPアドレスを調べてホームページの情報をもっているサーバーの住所をブラウザに返す

さきほど「サーバーに問い合わせる」と書きましたが、このときに問い合わせるサーバーは「DNSサーバー」と呼びます。

DNSサーバーがどういうものか理解するには、IPアドレスを知る必要があるので、IPアドレスを先に解説します。

IPアドレスとは

IPアドレスは簡単にいうと、「インターネット上にあるサーバーの居場所を示す住所情報」です。

「255.255.255.255」という0〜255までの3桁の数値が4つ、ピリオド(.)をはさんだ形で構成されています。(例) 123.11.222.55, 11.255.22.0 など

(※この「255.255.255.255」の場合は4つの数値がつながっているので「IPv4」と呼ばれます。6つの数値をつないだ「IPv6」という形式もあります。)

ホームページ情報を持つサーバー(WEBサーバー)やドメインとIPアドレスの照会サーバー(DNSサーバー)など、さまざまなサーバーにこのIPアドレスが割り当てられています。

DNSサーバーとは

さきほどIPアドレスの説明の最後に、「ドメインとIPアドレスの照会サーバー(DNSサーバー)」と書きました。

「ドメインとIPアドレスの照会」とはどういうことでしょうか。

ちょっと昔にタイムスリップして説明してみましょう。

ドメインがない時代、ユーザーはIPアドレスをつかってホームページを見つけていました。

https://xxx.xxx.xxx.xxx/how-the-homepage-is-displayed/

↑こんな感じで、「xxx.xxx.xxx.xxx」がIPアドレスとなっているURLでホームページを見ていたのですね。

もちろんホームページ運営者は、そのサーバーを引っ越すこともできました。

ですが、ホームページを公開しているサーバーを変えるということは、同時にIPアドレス(住所)も変わることになります。

その時代はIPアドレスだけしかなかったので、すべてのユーザーに「ホームページの住所を変更しました」という連絡をしなければなりませんでした。

毎回そんなことを言うのは面倒だという思いがふつふつと煮えたぎってきました。

そこで超新星爆発がおき、「ドメイン名による名前解決」というアイデアと「DNSサーバー」という仕組みが誕生します。

  1. ドメイン名とIPアドレスを1対1に結びつける資料を用意して、ドメイン名からIPアドレスを割り出せるようにしよう。(ドメイン名による名前解決)
  2. ①の資料をサーバーで管理するようにして、そのサーバーに問い合わせたら教えてくれるようにしよう(DNSサーバー)

DNSサーバーにドメイン名を問い合わせることで、いつでもIPアドレスを見つけ出せるようにしたのです。

このおかげで、ユーザーはいつも同じドメイン名を使ってホームページにアクセスできるようになり、ホームページ運営者は状況に合わせてサーバーを引っ越すことができるようになりました。

めでたしめでたし。

※DNSサーバーのDNSは「Domain Name System」の略です。

※この話は半分フィクションです。DNSサーバがどういうものかを理解するために便宜的に作りました。詳しい歴史はwikipediaに譲ります。

すみません、話を変な感じにしてしまいましたね。

このようにして、ブラウザはDNSサーバーにドメイン名を問い合わせ、そのドメインに対応したIPアドレスをもらうというわけです。

ブラウザが②で教えてもらったサーバーにホームページ情報が欲しいと伝える

②で取得したIPアドレスのサーバーにURLを問い合わせます。

当然このサーバーは目的のドメインにつながっていますので、ホームページ情報をもっています(運営者が変なことをしていない限り!)。

このときのサーバーをWEBサーバーと呼びます。

WEBサーバーは問い合わせを受けて、URLから目的のページを探します。

サーバーがホームページ情報をブラウザにわたす

サーバーは目的のページを見つけだし、ブラウザにページ情報を返します。

みつからない場合はエラーページを返します。

ブラウザがそのホームページ情報を読み込んで表示する

ホームページ情報は「HTML・CSS・Javascript」という言語で構成されています。

ホームページ作成の基本となる3つの言語を解説【入門】 ホームページを作成するための基本となる言語は3つあります。 こんにちは、本田です。フリーランスのWEBエンジニアをしてい...

ブラウザはこれらの言語を読み解く仕組みを持っているので、その仕組みをつかってユーザーにホームページを表示します。

ホームページ情報の中に画像を読み込む部分や別のプログラムを読み込む部分などがあれば、ブラウザは自動的に①から問い合わせを行い、情報を取得して表示します。

その他の質問と回答

検索語句を入力して検索したときはどうなるの?

検索窓は、検索用のURLを持っています。

検索語句を入力して検索したとき、ブラウザは検索用のURLに検索語句を取り付けてサーバーに問い合わせます。

あとは検索結果がホームページと考えれば、リンクをタップしたときと同じです。

ブラウザが直接サーバーに問い合わせているの?

厳密にいえば、ブラウザではなく、そのブラウザが入っているユーザーのコンピュタが問い合わせています。

今回の説明では冗長になるためブラウザとしました。

ほとんどの場合はこの認識で問題ないと思います。

さらに学びたい方は、リゾルバやHTTPプロトコル、OSI参照モデルについて学習すると、インターネットの仕組み理解がより深まります。

このあたりはすべてを知らなくてもホームページは作っていけますので、概要だけ簡単に理解しておくとよいかと思います。

まとめ

この記事ではホームページが表示される仕組みを解説しました。

運営中のホームページが表示されないなどの問題がでたときに、この知識が手がかりになることがあります。

これからホームページを作ってみたい方は記憶に留めておくと良いでしょう。