From 0230426129f869d746691209d9aee8d646b957fb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 26 Apr 2021 02:39:16 +0900 Subject: Learn/Getting_started_with_the_web/How_the_Web_works を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/04/21 時点の英語版に同期 - 原語併記マクロを廃止 --- .../how_the_web_works/index.html | 98 +++++++++++++--------- 1 file changed, 58 insertions(+), 40 deletions(-) (limited to 'files/ja') diff --git a/files/ja/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ja/learn/getting_started_with_the_web/how_the_web_works/index.html index 8aaecfed16..c56e5b370c 100644 --- a/files/ja/learn/getting_started_with_the_web/how_the_web_works/index.html +++ b/files/ja/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -1,13 +1,17 @@ --- -title: Web のしくみ +title: ウェブのしくみ slug: Learn/Getting_started_with_the_web/How_the_Web_works tags: + - Beginner + - Client - DNS - HTTP - IP - Infrastructure + - Learn + - Server - TCP - - 'l10n:priority' + - l10n:priority - クライアント - サーバー - 初心者 @@ -19,69 +23,83 @@ translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
-

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

+

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

-

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

+

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

-

クライアントとサーバ

+

クライアントとサーバー

-

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

+

ウェブに接続されたコンピューターはクライアント (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

+

クライアントとサーバーを表す 2 つの円。リクエストと書かれた矢印は、クライアントからサーバーへ、レスポンスと書かれた矢印は、サーバーからクライアントへと向かっている。

-

道具箱の他の部分

+

道具箱の他の部分

-

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

+

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

-

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

+

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

-

+

-

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

+

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

-

ならば何が起こるのか

+

ならば何が起こるのか

-

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

+

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

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

DNS の説明

+

コンポーネントファイルが解析される順番

-

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

+

クライアントのリクエストが承認されると、サーバーはまず HTML (インデックス) ファイルを送り返します。 index.html は一般的に、サーバーによって解析されるウェブサイトの最初のファイルであるため、このような名前になっています。

-

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

+

HTML ファイルは、 CSS と JavaScript を参照することができます。それぞれ <link> と <script> 要素を使って外部ファイルに記述したり、 <style> と <script> 要素を使ってHTMLページに埋め込んだりすることができます。

-

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

+

サーバーの観点からは、レスポンスが返信される際に、これらのファイルがどのような順序で解析されるかを知ることが重要です。

-

パケットの説明

+ + +

DNS の説明

+ +

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

+ +

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

+ +

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

+ +

パケットの説明

-

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

+

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

-

関連情報

+

関連情報

-

クレジット表示

+

クレジット表示

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

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

-

このモジュール

+

このモジュール

-- cgit v1.2.3-54-g00ecf