Webサイトの公開に必要な5つの要素！表示される仕組みもわかりやすく解説します

インターネットとWebの違い

インターネットとwebの違いは以下のとおりです。

「インターネット」とは、世界中のコンピューター同士をつなげ、多種多様な情報をやりとりする仕組みのことです。

「Web」とは、インターネット技術が利用されている機能の一つで、正式名称は「World Wide Web」と名づけられ、略して「WWW」と呼ばれています。Webは英語で蜘蛛の巣のことです。そう呼ばれるのには理由がありますが、まず、下記の単語の意味を理解しておきましょう。

蜘蛛の巣と呼ばれる由来は、世界規模で張り巡らされたハイパーテキストが蜘蛛の巣のように見えるという理由です。Webの文書データ（画像・音声・文章など）がハイパーリンクによって、結びつけられ、閲覧できるようになっているからです。

私たちが閲覧しているページは、「WWW」の中にある一つのWebページになります。また、WebページはWebブラウザを通して閲覧が可能です。

「Webブラウザ」とは、Webページやインターネット上のシステム(クラウドサービス)を閲覧・操作するときに使用するアプリケーションの総称です。私たちはWebページを閲覧するためにアプリケーションを使用しています。

Webサイトの公開に必要な5つの要素

 Webサイトの公開に必要な要素は以下の5つです。

それでは、5つの要素を詳しく見ていきましょう。

1.IPアドレス

IPアドレスは、簡単に言うと「インターネット上の住所」のことです。インターネットに接続する端末や機器に割り当てられる識別番号のことで、接続する端末の一つひとつに数値が割り当てられます。

先ほどお伝えしたとおり、インターネット上の住所と言えますので、特定のIPアドレス（住所）にデータを送信することが可能です。逆にデータを受信することもできます。

2.ドメイン

ドメインとはIPアドレスを人間にも分かりやすくするための「愛称」のようなものです。

英語では「領土・領域・範囲」を意味します。

IPアドレスは数値で表されるため、数値だけだと我々人間には覚えにくいものです。そのため、覚えやすくするために、ドメイン名としてアルファベット表記が作られました。コンピュータはIPアドレスを認識し、人間はドメインで認識すると考えてよいでしょう。

IPアドレスやドメインは一度決まると変更できないという特徴があります。

3.Webサーバー

Webサーバーとは通信機器のことです。Webサーバーには、Webサイトの構成ファイルとWebサーバーソフトを保管し、ネットワーク経由でアクセスのあった端末にデータや機能を提供する役割をしています。

4.Webブラウザ

Webブラウザとは、インターネット上のWebページを閲覧するために使用するアプリケーションのことです。Webブラウザは指定のレイアウトでWebサーバーにあるファイルデータを表示します。Webブラウザによって機能は異なり、開発されたプラグインや拡張機能を追加して利用することも可能です。

5.DNS

DNSとはIPアドレスとドメインを管理するシステムのことです。正式名称は「Domain Name System」。私たちはアクセスしたいWebサイト名を検索します。DNSシステムは指定されたサイト名からドメイン名を照会し、IPアドレスと紐づけする仕組みです。

Webサイトを構成する3つの言語

 Webサイトを構成する言語とは以下の3つです。

それでは、「3つの言語」とはどのようなものなのか詳しく見ていきましょう。

1.HTML

「HTML」とはマークアップ言語で、簡単に言うと、Webサイトを開いた時に見えているテキストや画像に、構造を指定するための言語のことです。

Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ) を略して「HTML」。プログラミング言語ではなくマークアップ言語のことで、文書中のパーツを「見出し」「段落」「画像」「表」「リスト」などをHTMLで意味付けする役割があります。

他にも主要なマークアップ言語として「SGML・XHTML・XML」がありますが、「HTML」が基本的です。

2.CSS

「CSS」とはスタイルシート言語で、文書構造を定義するマークアップ言語を装飾する言語のことです。

Cascading Style Sheet(カスケーディング・スタイル・シート)を略して「CSS」。プログラミング言語ではなくスタイルシート言語で、HTMLと組み合わせて使用されます。HTMLで構造化されたテキストや画像に、CSSで見た目や装飾を加えるのが役割です。CSSのほかに「SASS・LESS」などがあります。

CSSでは以下のものが指定可能です。

3.JavaScript

「JavaScript」とはプログラミング言語で、ユーザーが何らかのアクションすることで、それに対応して動きを加えるための指定する言語のことです。

具体的な例をお伝えすると「入力フォームに入力があった際に入力値をチェックして表示」「入力ミスがあった際のアラート表示」「一定時間毎に文字や画像を切り替えるなどのタイマーの操作」などが挙げられます。HTMLやCSSとは異なり、ブラウザ上で動くプログラムです。

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

Webページの表示は、大きく「通常の流れ」と「キャッシュ動作の流れ」に分かれます。

通常の流れ

通常の流れは以下の4つになります。

4つの流れを詳しく見ていきましょう。

DNSサーバーにIPアドレスを問合せ

私たちは通常、ブラウザにURLかサイト名を入力して閲覧したいサイトの検索をはじめます。DNSサーバーはまず、サイトのURLに含まれているドメインをIPアドレスに紐づけ、アクセスしたいサイトを特定する作業を開始します。

アクセス先のIPアドレスを送信する

DNSサーバーは一つではありません。検索を開始した端末はまず自分のネットワークのちかくにあるDNSサーバーに照会をします。

ドメインの階層別に管轄分けされているDNSサーバーは、検索したサイトのURLに含まれているドメインやIPアドレスを持つDNSサーバーを見つけるように問い合わせします。

情報を持ったDNSサーバーと通信が可能になれば、DNSサーバーを経由してIPアドレスを検索端末に返答する流れです。

Webサーバーにアクセスしてページデータを要求する

DNSサーバーから得られたIPアドレスで通信を始めます。次に閲覧したいページファイルの要求をし、Webブラウザが通信するためのデータを「プロトコル」や「HTML」方式で送信してもらう流れです。

Webページに転送して表示する

Webサーバーは要求を受けると、「HTMLファイル」の送信を開始します。Webブラウザに表示されたHTMLファイルでサイトページを閲覧可能になるという流れが通常です。

何気なく、検索していますが、インターネット上では、データの送受信を何度もおこない、私たちの端末にページが表示されています。

キャッシュ動作の流れ

上記の通常の流れ以外にも、以前に閲覧したサイトであれば「キャッシュ」と呼ばれる仕組みが利用されます。

「キャッシュ」とはデータを一時的にハードディスクへ保存しているものです。保存していたデータを再度利用することで高速に表示されます。

キャッシュを利用する場合は以下の2つです。

• DNSキャッシュの利用時
• DNSキャッシュとWebキャッシュの利用時

どのような違いがあるのか詳しく見ていきましょう。

DNSキャッシュの利用時

まず、DNSキャッシュのみ利用した場合は下記の流れです。

1. Webサーバーにページデータを送信要求
2. Webページを転送開始と表示

DNSキャッシュを再利用すると、訪問したいサイトのIPアドレスの送信は省略することが可能になります。

DNSキャッシュとWebキャッシュの利用時

両方のキャッシュを再利用した場合は下記の流れです。

1. IPアドレスはDNSサーバーにあるデータを再利用
2. ページファイルはWebサーバーから送信済みのデータを再利用

両方の保存されているデータを再利用することで不必要な通信が省略されます。そのため、高速表示が可能です。

まとめ

Webサイトの公開に必要な5つの要素とは「IPアドレス」「ドメイン」「Webサーバー」「Webブラウザ」「DNS」でした。この5つの要素が揃っていることでWebサイトの公開が可能になります。

 Webサイトを構成する言語は「HTML」のマークアップ言語、「CSS」のスタイルシート言語、「JavaScript」のプログラミング言語の3種類があります。また、 Webページが表示される仕組みは通常の流れは以下のとおりです。

ほかにも、一度訪問したことのあるサイトでは「DNSキャッシュ」「Webキャッシュ」を再利用した高速表示も可能です。Webサイトの公開の流れを紹介しましたが、参考になれば幸いです。