ウェブのしくみ
ウェブのしくみでは、あなたがコンピューターや携帯電話のウェブブラウザーでウェブページを見るときに起こることを簡単に説明します。
この理論は、ウェブのコードを書く上ですぐにでも必要というわけではありませんが、背景で何が起きているのかを理解しておくと、いずれ役に立つでしょう。
クライアントとサーバー
ウェブに接続されたコンピューターはクライアント (client) とサーバー (server) と呼ばれます。これらがどのように相互作用するかを概略図で表すと次のようになります。
- クライアントは、一般的なウェブユーザーが使うインターネットに接続された端末 (例えば Wi-Fi に接続されているコンピューターや、モバイルネットワークに接続されているスマートフォン) と、これらの端末で利用できるウェブにアクセスするソフトウェア (ふつうは Firefox や Chrome などのウェブブラウザー) のことです。
- サーバーとは、ウェブページ、サイト、アプリを格納しているコンピューターのことです。クライアント端末がウェブページにアクセスしたいときは、ウェブページのコピーがサーバーからクライアントにダウンロードされ、ユーザーのウェブブラウザーに表示されます。
道具箱の他の部分
もちろん上で説明したクライアントとサーバーだけでなく、これら二つ以外にも、他に多くのものが関わっています。以下では、それについて説明します。
いま、ウェブが道路であると想像してみましょう。道路の片端にクライアントがあり、そこは例えば、あなたの自宅のようなものです。反対の端はサーバーで、そこは例えば、あなたが何かを買うお店のようなものです。
クライアントとサーバーに加えて、以下のものにも触れなければなりません。
- インターネット接続: ウェブ上でデータの送受信をできるようにします。あなたの自宅とお店との間の通りのようなものです。
- TCP/IP: Transmission Control Protocol と Internet Protocol は、どのようにウェブ上をデータが動くのか、を定義した通信プロトコルです。これは注文したり、店に行ったり、物を買ったりするための通信手段や交通機関のようなものです。身近な例では、車やバイク (またはその辺りにあるもの) のようなものです。
- DNS: Domain Name Servers はウェブサイトの住所録のようなものです。ブラウザーにウェブアドレスを入力すると、ブラウザーはウェブサイトを取得する前に DNS を見て、ウェブサイトの本当のアドレスを探します。ブラウザーはウェブサイトがどのサーバーにいるかを探し出す必要があり、それで HTTP のメッセージを正しい場所 (下記参照) に送ることができます。これはお店の所在地を探してからお店に行くようなものです。
- HTTP: Hypertext Transfer Protocol は、クライアントとサーバーが対話をする方法を定義するアプリケーションプロトコルです。これは商品を注文するための言語のようなものです。
- コンポーネントファイル: ウェブサイトは多くの異なるファイルで構成されます。これはお店で複数の部品を買うようなものです。これらのファイルは主に2種類に当てはまります。
- コードファイル: ウェブサイトは主に HTML、CSS、JavaScript から作られます。しかし、ちょっと後で他の技術にも出会うことになるでしょう。
- アセット: これは画像、音楽、動画、Word 文書、PDF といったウェブサイトを構成するコード以外のすべての材料の集合的な名前です。
ならば何が起こるのか
ブラウザーにウェブアドレスを打ち込んだ時に何が起こっているかというと (お店に歩いていく例えでは)、
- ブラウザーは DNS サーバーにアクセスし、ウェブサイトのあるサーバーの実際のアドレスを探します (お店の住所を見つけます)。
- ブラウザーはサーバーに HTTP リクエストメッセージを送信して、ウェブサイトのコピーをクライアントに送るよう求めます (お店に行ってものを注文します)。このメッセージ、およびクライアントとサーバーの間でやりとりされるその他すべてのデータは、TCP/IP を使用してインターネット経由で送信されます
- サーバーがクライアントのリクエストを承認すると、サーバーはクライアントに 「200 OK」 というメッセージを送ります。これは「もちろんそのウェブサイトを見ることができます。どうぞ！」という意味です。そしてウェブサイトのファイルを、データパケットと呼ばれる一連の小さな塊 (chunk) としてブラウザーに送信し始めます (お店は商品を渡し、あなたは自宅に持って帰ります)
- ブラウザーは小さな塊を完全なウェブページに組み立て、表示します (玄関にものが到着しました — 新しいピカピカのものです、すばらしい！)
コンポーネントファイルが解析される順番
クライアントのリクエストが承認されると、サーバーはまず HTML (インデックス) ファイルを送り返します。 index.html は一般的に、サーバーによって解析されるウェブサイトの最初のファイルであるため、このような名前になっています。
HTML ファイルは、 CSS と JavaScript を参照することができます。それぞれ <link> と <script> 要素を使って外部ファイルに記述したり、 <style> と <script> 要素を使ってHTMLページに埋め込んだりすることができます。
サーバーの観点からは、レスポンスが返信される際に、これらのファイルがどのような順序で解析されるかを知ることが重要です。
- まず HTML ファイルが解析され、そのファイルの中を見ることで、どの CSS ファイルや JavaScript ファイルが参照されているかをサーバーが認識します。
- HTML が解析され、 DOM ツリー構造が生成された後、リンクされた CSS が解析され、 DOM ツリーの適切な部分にスタイルが適用されます。この時点で、ページの視覚的な表現が画面に描かれ、ユーザーはページを見ることになります。
- JavaScript は通常、 HTML と CSS の後に解析され、ページに適用されます。
DNS の説明
実際のウェブアドレスは、お気に入りのウェブサイトを見つけるためにアドレスバーに入力するような、すばらしい、覚えやすい文字列ではありません。実際のウェブアドレスは 63.245.215.20 のような特殊な数字です。
これは、 IP アドレスと呼ばれ、ウェブ上の一意の場所を表します。しかし、あまり覚えやすくはないですよね。だから、ドメインネームサーバーが発明されたのです。これらは特別なサーバーで、ブラウザーに入力したウェブアドレス ("mozilla.org" など) とウェブサイトの実際の (IP) アドレスを対応させます。
ウェブサイトには、IP アドレスを使用して直接アクセスできます。IP Checker のようなツールにドメインを打ち込むことで、ウェブサイトの IP アドレスを見つけることができます。
パケットの説明
先ほど、データがサーバーからクライアントに送信される形式を説明するために、「パケット」という用語を使用しました。ここではどういう意味なのでしょうか。基本的に、ウェブ上でデータが送信されると、何千もの小さな塊として送信されるため、たくさんの異なるユーザーが同じウェブサイトを同時にダウンロードできます。ウェブサイトが単一の大きな塊として送信されるとすると、一度に 1 人のユーザーしかダウンロードできなくなるため、ウェブはとても効率が悪くなり、楽しんで使えなくなるでしょう。