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

この理論は、短期間でウェブのコードを書く上で必須ではありませんが、背景で何が起きているのかを理解しておくと、まもなく役に立つでしょう。

クライアントとサーバー

ウェブに接続されたコンピューターはクライアント (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 といったウェブサイトを構成するコード以外のすべての材料の集合的な名前です。

ならば何が起こるのか

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

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

DNS の説明

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

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

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

パケットの説明

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

関連情報

クレジット表示

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

このモジュール内の文書

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, kenji-yamasaki, silverskyvicto, mfuji09, horichiyo, kekemoto
最終更新者: Uemmra3,