【超分かりやすい】ホームページ(Webページ)が表示される仕組み!

ホームページが表示される仕組み
  • URLをコピーしました!

今となっては誰にとっても身近な存在になったホームページ。

毎日のように検索をして、何かしらのWebサイトに訪れているという人でも、その仕組みまで理解しているという方は少ないのではないでしょうか?

ホームページを作ることになったけど、よく仕組みが分からないなぁ…
純粋にWebページが表示されるまでの仕組みが知りたい!

こういった人に向けて解説記事を書きたいと思います。

多少はどうしても専門的な内容が出てきますが、初心者でも理解できるように超分かりやすい解説を心がけました。最後まで読めばホームページの基本的な仕組みが理解できるようになりますよ!

目次

まずはホームページ表示の仕組みをざっくり理解

グダグダと細かい説明をしてもいいのですが、まずは概要のイメージをざっくりと掴んでもらいたいと思います。分かりやすさを優先して解説するので、厳密さに欠ける部分もあるかもしれませんがご了承ください。

なお、「ホームページ」「Webサイト」「Webページ」等の言葉の意味の違いがよく分からん…という人はホームページとWebサイトの違いは?呼び方の使い分けについて解説!をチェックしてください!ここではホームページ=Webサイトとして解説しています。

さて、早速ですがホームページ(Webページ)が表示される仕組みを一言で説明すると次のようになります。

ホームページの仕組みを一言で言うならば…

サーバーと呼ばれるコンピューターの中にあるホームページの情報を、ブラウザと呼ばれるソフトによって表示する!

ショシンシャー

いや、サーバーとかブラウザとか横文字多くてよく分からんけど!

ラピン

大丈夫!記事内で分かるように今から掘り下げて解説していくよ!

まず、サーバーというコンピューターの中にホームページのデータが保存してあります。

あなたのパソコンやスマホには、ホームページを表示させるためのソフト(アプリ)があります。それがブラウザです。

ホームページを表示させる流れは以下の通りです。

ホームページ表示の流れ
  1. ブラウザからサーバーに対して「このホームページの情報を教えてー」と要求します。
  2. サーバーがその要求に対して情報を返します。
  3. ブラウザが、返ってきた情報を元に画面にホームページを表示します。

細かい流れは省略していますが、大まかな解説はざっくりこのような形となります。

簡単な理解で良ければここまでで十分ですが、ここからはもう少し細かい仕組みをかみ砕いて解説していきますね!

Webサーバーがホームページのデータを管理している

まずはサーバーについて、もう少し補足します。

先ほども説明した通り、サーバーとはなにか?と言われればコンピューターのような機械をイメージすればOKです。

サーバーのイメージ

ちなみに英語では「server」と書き、「仕える人」「提供するもの」といったニュアンスの意味になります。つまり厳密にいえば、利用者の要求(リクエスト)に対して、応答(レスポンス)するコンピューターのことをサーバーと言うのです。

ラピン

リクエストやレスポンスという言葉はITの世界では良く使われる言葉なので覚えておくといいかも

サーバーの中でも特に、Web上の必要な情報を管理したり、処理するソフトを持っているサーバーをWebサーバーと言います。

ホームページの表示に関わっているのはこのWebサーバーになります。ホームページで表示される情報は、Webサーバー内にファイルとして保存されているのです。

検索をかけて見たいサイトを発見したら、そのWebサーバーにホームページの情報を要求(リクエスト)して「情報くださーい!」ってやるわけです。

ホームページとWebサーバーを特定する仕組み

ホームページを表示するにはWebサーバーに情報を要求するという話をしましたが、実は話はそう単純ではありません。何故なら世界には無数のサイトが存在し、Webサーバーも数多く存在するからです。

一体どうやって固有のサイトを特定し、その情報を所有しているWebサーバーを特定するのでしょうか?

それらを解決するための仕組みがIPアドレス」「ドメイン」「DNSサーバー(ネームサーバー)と呼ばれるものです。それぞれについて解説していきますね。

IPアドレスは機器の識別番号

インターネットなどネットワーク通信を必要とするものには、IPアドレスという固有の識別番号のようなものが割り当てられます。

例えばパソコンやスマホなどをはじめ、先ほど説明したサーバーなど様々な端末や機器にIPアドレスが付いています。

IPアドレスは「0.0.0.0」~「255.255.255.255」(4か所の各数字が0~255)の間の番号で割り振られているが普通です。

IPアドレス(IPv4)の形式

この形式のIPアドレスをIPv4と言います。各数字が255までなのは実際は2進数で管理しているためです。2の8乗=256通り(0~255)というわけですね。また、全ての機器に割り振るのに桁数が足りないという理由から、近年ではIPv6「xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx」という形式も利用されています。

このようにIPアドレスを割り振ることで、どの端末もしくは機器なのか?ということを特定しています。そのため世界で同時に同じものは存在しないようになっています。

ここで本題に戻します。

ホームページを表示する際には、情報が置いてあるWebサーバーを特定して、その情報を特定の端末(自分のスマホやパソコン)に表示する必要があります。

パソコンでもスマホでも、ネットワークというのは突き詰めれば機器同士の通信なわけです。そのためどこをどこに繋ぐか?という判別にIPアドレスが必須となるんですね。

このような性質からIPアドレスは、よくネットワーク機器の住所として例えられることがあります。

ラピン

もしこのような仕組みが無かったら、正しいページが正しい端末に表示されなくなってしまうね。違うサイトが表示されちゃったとか隣の人のスマホに表示されちゃった…みたいな(笑)

ショシンシャー

確かに、住所が不明だと目的地に辿り着けないね!

しかし、IPアドレスというのは数字の羅列でしかなく、私たちにはあまり馴染みのないものですよね。そこで登場するのが次項で解説するドメインです。

※実はIPアドレスは他にも細かい分類があります。簡単にですが補足としてまとめたので気になる方は読んでください▼

補足①:グローバルIPアドレスとプライベートIPアドレス

IPアドレスには、グローバルIPアドレスプライベートIPアドレスの2種類があります。

グローバルIPアドレスは、インターネットに接続してる機器に割り当てられるIPアドレスで、プライベートIPアドレスは自宅や職場などプライベートなネットワーク内で割り当てられるIPアドレスです。

分かりやすくするためにWi-Fiを考えてみましょう。例えば、あなたのグローバルIPアドレスは「アクセス情報【使用中のIPアドレス確認】」のようなサイトからも調べることができます。しかし、これはインターネットの拠点である機器(ルーター)のIPアドレスが分かるだけです。もし同じWi-Fiを使っている端末が複数ある場合、同じWi-Fiを利用しているならば、端末が異なっていても同じグローバルIPアドレスが表示されるはずです。これはインターネットに接続するための通信の拠点となる機器(ルーター)のIPアドレスだからです。そこからさらにプライベートIPアドレスによって、端末を特定しています。

補足②:動的IPアドレスと固定IPアドレス

他の分類としては、動的IPアドレス固定IPアドレスがあります。

動的IPアドレスと固定IPアドレスの違いは、IPアドレスが変わることがあるかずっと変わらないかの違いです。一般的にはアクセスする側は動的IPアドレスが使われ、サーバー側は固定IPアドレスであることが多いです。また、プライベートIPアドレスの場合も固定IPアドレスが一般的です。

動的IPアドレスの場合、接続ごとまたは一定期間ごとにIPアドレスが変わるためユーザーが特定されるリスクが低くなるというメリットがあります。しかし、サーバー側やプライベートネットワーク内での利用など、特定できないと困る場合には固定IPアドレスを使います。Webサーバーにおいてもアクセスされることが前提なので、基本的には固定IP(厳密には変わることもありますが)をイメージしてもらってOKです。

ドメインはIPアドレスに名前を付けたもの

さてさて、私たちは実際にWebサイトにアクセスするときにIPアドレスを意識することはほとんどありません。

なぜならドメインという便利なものがあるからです。

ドメインというのは、人が見ても分かりやすいようにIPアドレスに名前を付けたものです。例えば、「○○.com」とか「○○.co.jp」みたいなやつです。IPアドレスを知らなかったという人でも、○○ドットコムとかは聞いたことあるのではないでしょうか?

IPアドレスを住所として例えた場合、ドメインは表札に例えられることが多いです。ただし、実際の表札とは違って、ドメインはそれぞれ固有のもので世界に同じものはふたつとありません。

ラピン

もともと特別なオンリーワン、「世界に一つだけのドメイン」というわけだね!

ショシンシャー

おっ、おう…

ここまでの話を整理します。

ホームページのデータはWebサーバーというコンピューターが管理しています。そのWebサーバーにはIPアドレスという識別番号があり、IPアドレスによってWebサーバーを特定することが可能です。

ただし、人間にとってはIPアドレスはただの数字の羅列なので、利便性が良くありません。そこでドメインによってIPアドレスに人が認識しやすい名前を付けている…ということになります。

さて、問題はここからです。確かに人にとってはドメインが分かりやすく良いのですが、コンピューターはIPアドレスで管理しているのでドメインのままではサーバーを特定できません。

そのため実際にはドメインをIPアドレスに変換する作業が必要になります。

そこで登場するのがDNSサーバー(ネームサーバー)です。

DNSサーバー(ネームサーバー)がIPアドレスとドメインを紐づける

IPアドレスが固有のものであり、ドメインも固有のものであるというのはここまで説明した通りです。ということは、ドメインとIPアドレスの組み合わせはひとつしかないということになります。

このドメインとIPアドレスを結び付けをして管理している専用のサーバーがあります。それがDNSサーバー(ネームサーバー)と呼ばれるコンピューターです。

ホームページを見ようとしてアクセスするときには「このドメインのIPアドレスを教えてー」とDNSサーバーに問い合わせるという処理を行っています。DNSサーバーはリストを参照して、ドメインをIPアドレスに変換して返します。

DNSサーバーとWebサーバーでホームページを表示する仕組み

そうしてやっとWebサーバーを特定して、情報を受け取ることが可能になるという流れになります。

さて、Webサーバーから情報を受け取ったら後はそれを自分のスマホやパソコンで表示するだけですね。その時の役割を担っているのがブラウザになります。

ブラウザがホームページを表示する

最初にも言った通り、ブラウザというのはホームページを表示・閲覧するソフトウェアのことを言います。

ソフトと言ってピンとこない方は、アプリと言い換えても良いでしょう。パソコンやスマホでインターネットをするときにクリック(タップ)するアイコンの出ているやつですね。

ブラウザの種類も色々ありますが、特によく使うのが、Windowsの場合はMicrosoft Edge(マイクロソフトエッジ)Chrome(クローム)、iPhoneであればSafari(サファリ)なんかがあります。

ブラウザについては別記事で詳細にまとめていますのでイメージ沸かない方は合わせてどうぞ↓

参考:ブラウザとは?インターネット閲覧ソフトです【機能や種類一覧】

さてここからが重要な点ですが、実はWebサーバーに情報をリクエストして返してもらうホームページの情報は、HTMLCSSなどのコンピューター用のコードになっています。

HTMLコード
ラピン

例えば、HTMLはこの画像のような感じ!

ショシンシャー

うへぇ…わけわからん

HTMLやCSSについてもホームページを理解する上で重要ですので、もっと詳しく知りたい方は以下の記事を読んでから先を読み進めてください↓

参考:HTML/CSSとは?ホームページを表示するのに必要なデータの形式です。

つまりWebサーバーにある情報を私たち人間がそのまま見てもよく分からない表示になっています。

ブラウザはそれを人間が見ても分かりやすいものに変換して表示してくれる役割を担っているのです。そうして私たちは、ブラウザ上からホームページを見ることができるようになっているわけですね。

ラピン

だからブラウザの種類によってWebサイトの表示の仕方、見た目が微妙に違うということもあるよ。

検索してホームページを見ているのは…?

ここまでの話を整理してまとめると、ホームページを表示するには

「ドメインを元にDNSサーバーがIPアドレスに変換して、そのIPアドレスを元にWebサーバーに情報を要求して、返してもらった情報をブラウザで表示する…」

とまぁこういうわけですが、次のように疑問に思った人もいるかもです。

ショシンシャー

いや、普段の生活でドメインとか知らないし検索からアクセスしているけど…?

というわけでもう少し補足します。

まず、実際にアクセスして見ているのはWebサイトのさらに細かい単位であるWebページです。Webページがたくさん集まって(1ページのみの場合もありますが)ひとつのWebサイト、つまりホームページとなります。

実際にサイトを見る時には、URLを利用してさらに細かいWebページを指定しています。

URLというのは、Webサーバー内のファイルまで指定するIPアドレスよりもさらに細かい住所みたいなものです。厳密ではないですが、Webページの住所=URLと覚えておけば、まず間違いないです。

参考:ドメインとは?URLとの違いやドメインの種類についても解説!

そして、私たちは検索するときに、ブラウザ上から検索エンジンというものを利用しています。

ラピン

GoogleやYahoo!のマークが入っていたりするあの検索窓!

検索エンジンは、図書館の索引みたいなもので、WebページへのURLリンクをタイトル付きで並べて表示して教えてくれているものです。しかも各ページに対して独自の評価をして、オススメの順番というか私たちに役立つと思われる順番に並べてくれています。

そして並んでいるそれぞれのページには必ずURLがあるので、クリック(タップ)することで、そのURLにアクセスするための処理をブラウザが開始します。URLをもとにドメインが分かるので、そのドメインをDNSサーバーに問い合わせて~というこれまで説明してきた流れに繋がるわけです。

なので、キーワードによる検索は、そのキーワードのおすすめのページランキングを見ているようなものだったのです。

ブラウザのアドレスバー

実際には、上の画像のようにブラウザ上部にあるアドレスバーに直接URLを打ち込むことでもWebページにアクセスすることが出来ますので、ぜひ試してみてください。

キャッシュとして保存したデータを表示させる場合

一般的なホームページの表示の仕組みの解説は以上になります。

ラピン

さらに詳しく知りたい人だけこの先を読もう!

ショシンシャー

おつかれしたー!

基本的な表示の仕組みはここまで説明した通りなのですが、実際にはホームページを表示する際に毎回同じ手順を踏むわけではありません。

何度か訪れているサイトは過去に取得した情報をそのまま利用している場合もあります。このように、過去に取得した情報を一時的に保存しておく仕組みのことをキャッシュと言います。

ホームページを閲覧する際には、Webサーバーに情報を要求して返してもらうと説明しました。これはダウンロードしているのと同じことです。そのダウンロードしたデータがあれば、同じページを表示するときにはWebサーバーを経由することなく表示することが出来るというわけです。

つまり、同じページにもう一度アクセスするときは、キャッシュがあればそのキャッシュを利用してページを表示することが出来るということです。

キャッシュを利用してホームページを表示する仕組み

では、何故わざわざ保存してまでキャッシュを利用するのでしょうか?

その理由の一つとして、表示速度が速くなるということが挙げられます。Webサーバーに問い合わせる処理が無い分、すぐに表示が可能になるというわけですね。

ページの読み込み速度が遅くなると、それだけでユーザーが離脱してしまう可能性が高まりますので、これは大きなメリットと言えます。

また、無駄な通信をしなくて済むので、通信量が少なくて済むいうメリットもあります。

ただし、ブラウザに保存するキャッシュはパソコンやスマホ端末のストレージ容量を使うことになるので注意が必要です。キャッシュはふつう一定期間経てば自動で消去されますが、もし増えすぎた場合にはキャッシュクリア(キャッシュデータを削除すること)を手動で行うことで容量を減らすことができます。

DNSキャッシュでドメインとIPアドレスの紐づけを保存

キャッシュとして保存されるのは、ホームページの情報だけでなくドメインとIPアドレスの紐づけされた情報も保存されています。これをDNSキャッシュと言います。

例えば、同じサイト内のWebページであれば、同じドメインですが、ページごとにURLは違います。

サイト内でページを移動しただけで、毎回DNSサーバーにIPアドレスを問い合わせたとしましょう。こうなるとDNSサーバーに大量に問い合わせが行くことになるので、非効率しかもサーバーの負荷も増えてしまいます。

ショシンシャー

確かに短期間に何度も聞いてくるなよ…ってなるかも

そこでドメインとIPアドレスの情報を保存しておき、DNSサーバーに問い合わせることなく直接Webサーバーにリクエストを出せば同じサイト内の別ページが見れるようになっています。

DNSサーバーに問い合わせることなくWebページを表示

一度訪れたことがあるサイト内で、初めてアクセスするページがあれば、上図のような処理になるということです。さらにページそのものが訪れたことがあるページであればWebサーバーへのリクエストも不要と、そういうことになります。

まとめ:サイト表示の仕組みを知ればWebに詳しくなる

ホームページ表示の仕組みは突き詰めるとさらに奥が深いものになります。しかし、今回ご紹介した内容を理解しておくだけでも、かなりWebの世界の理解が進んだのではないでしょうか。

「URL」「ドメイン」「IPアドレス」「Webサーバー」「DNSサーバー」「ブラウザ」「キャッシュ」など…

これらはWebの専門用語であると同時に基本でもあり、ひとつひとつの用語をしっかり理解することでホームページが表示される仕組みがよく分かってきます。特にホームページを作ったり、運用するのであれば知っておいた方が良いことばかりです。

もし曖昧な所があれば、再度読み返しながら理解を深めていただければと思います。

この記事をシェアする!
  • URLをコピーしました!
  • URLをコピーしました!
目次