Web のしくみ

Web のしくみでは、あなたがコンピュータや携帯電話の Web ブラウザで Web ページを見るときに起こることを簡単に説明します。

この理論は、Web のコードを書く上ですぐにでも必要というわけではありませんが、背景で何が起きているのかを理解しておくと、いずれ役に立つでしょう。

クライアントとサーバ

Web に接続されたコンピュータはクライアント (client)サーバ (server)と呼ばれます。これらがどのように相互作用するかを概略図で表すと次のようになります。

Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client

  • クライアントは、一般的な Web ユーザーが使うインターネットに接続されたデバイス (例えば Wi-Fi に接続されているコンピュータや、モバイルネットワークに接続されているスマートフォン) と、これらのデバイスで利用できる Web にアクセスするソフトウェア (ふつうは Firefox や Chrome などの Web ブラウザ) のことです。
  • サーバとは、Web ページ、サイト、アプリを保存しているコンピュータのことです。クライアントデバイスが Web ページにアクセスしたいときは、Web ページのコピーがサーバからクライアントにダウンロードされ、ユーザーの Web ブラウザに表示されます。

道具箱の他の部分

もちろん上で説明したクライアントとサーバだけでなく、これら二つ以外にも、他に多くのものが関わっています。以下では、それについて説明します。

いま、Web が道路であると想像してみましょう。道路の片端にクライアントがあり、そこは例えれば、あなたの自宅のようなものです。反対の端はサーバで、そこは例えれば、あなたが何かを買うお店のようなものです。

クライアントとサーバに加えて、以下のものにも触れなければなりません。

  • インターネット接続: Web 上でデータの送受信をできるようにします。あなたの自宅とお店との間の通りのようなものです。
  • TCP/IP: Transmission Control Protocol と Internet Protocol は、どのように Web 上をデータが動くのか、を定義した通信プロトコルです。これは注文したり、店に行ったり、物を買ったりするための通信手段や交通機関のようなものです。身近な例では、車やバイク (またはその辺りにあるもの) のようなものです。
  • DNS: Domain Name Servers は Web サイトの住所録のようなものです。ブラウザに Web アドレスを入力すると、ブラウザは Web サイトを取得する前に DNS を見て、Web サイトの本当のアドレスを探します。ブラウザは Web サイトがどのサーバにいるかを探し出す必要があり、それで HTTP のメッセージを正しい場所 (下記参照) に送ることができます。これはお店の所在地を探してからお店に行くようなものです。
  • HTTP: Hypertext Transfer Protocol は、クライアントとサーバが対話をする方法を定義するアプリケーションプロトコルです。これは商品を注文するための言語のようなものです。
  • コンポーネントファイル: Web サイトは多くの異なるファイルで構成されます。これはお店で複数の部品を買うようなものです。これらのファイルは主に2種類に当てはまります。
    • コードファイル: Web サイトは主に HTML、CSS、JavaScript から作られます。しかし、ちょっと後で他の技術にも出会うことになるでしょう。
    • アセット: これは画像、音楽、動画、Word 文書、PDF といった Web サイトを構成するコード以外のすべての材料の集合的な名前です。

ならば何が起こるのか

ブラウザに Web アドレスを打ち込んだ時に何が起こっているかというと (お店に歩いていく例えでは),

  1. ブラウザは DNS サーバにアクセスし、Web サイトのあるサーバの実際のアドレスを探します (お店の住所を見つけます)
  2. ブラウザはサーバに HTTP リクエストメッセージを送信して、Web サイトのコピーをクライアントに送るよう求めます (お店に行ってものを注文します)。このメッセージ、およびクライアントとサーバ間でやりとりされるその他すべてのデータは、TCP/IP を使用してインターネット経由で送信されます
  3. サーバがクライアントのリクエストを承認すると、サーバはクライアントに 「200 OK」 というメッセージを送ります。これは「もちろんその Web サイトを見ることができます。どうぞ!」という意味です。そして Web サイトのファイルを、データパケットと呼ばれる一連の小さな塊 (chunk)としてブラウザに送信し始めます (お店は商品を渡し、あなたは自宅に持って帰ります)
  4. ブラウザは小さな塊を完全な Web サイトに組み立て、表示します (玄関にものが到着しました — 新しいピカピカのものです、すばらしい!)

DNS の説明

実際の Web アドレスは、お気に入りの Web サイトを見つけるためにアドレスバーに入力するような、すばらしい、覚えやすい文字列ではありません。実際の Web アドレスは 63.245.217.105 のような特殊な数字です。

これは、IP アドレス と呼ばれ、Web 上の一意の場所を表します。しかし、覚えにくいと思いませんか?だから、ドメインネームサーバが発明されたのです。これらは特別なサーバで、ブラウザに入力した Web アドレス ("mozilla.org" など) と Web サイトの実際の (IP) アドレスを対応させます。

Web サイトには、IP アドレスを使用して直接アクセスできます。IP Checker のようなツールにドメインを打ち込むことで、Web サイトの IP アドレスを見つけることができます。

パケットの説明

先ほど、データがサーバからクライアントに送信される形式を説明するために、「パケット」という用語を使用しました。ここではどういう意味なのでしょうか。基本的に、Web 上でデータが送信されると、何千もの小さな塊として送信されるため、たくさんの異なるユーザーが同じ Web サイトを同時にダウンロードできます。Web サイトが単一の大きな塊として送信されるとすると、一度に1人のユーザーしかダウンロードできなくなるため、Web がとても非効率的になり、使うのが楽しくなくなるでしょう。

関連情報

クレジット表示

道路の写真: Street composing, by Kevin D.

このモジュール