Learn/Getting_started_with_the_web/How_the_Web_works を更新

- 2021/04/21 時点の英語版に同期
- 原語併記マクロを廃止

1 files changed, 58 insertions, 40 deletions

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
 <div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
 
 <div class="summary">
-<p><em>Web のしくみ</em>では、あなたがコンピュータや携帯電話の Web ブラウザで Web ページを見るときに起こることを簡単に説明します。</p>
+<p><em>ウェブのしくみ</em>では、あなたがコンピューターや携帯電話のウェブブラウザーでウェブページを見るときに起こることを簡単に説明します。</p>
 </div>
 
-<p>この理論は、Web のコードを書く上ですぐにでも必要というわけではありませんが、背景で何が起きているのかを理解しておくと、いずれ役に立つでしょう。</p>
+<p>この理論は、ウェブのコードを書く上ですぐにでも必要というわけではありませんが、背景で何が起きているのかを理解しておくと、いずれ役に立つでしょう。</p>
 
-<h2 id="Clients_and_servers" name="Clients_and_servers">クライアントとサーバ</h2>
+<h2 id="Clients_and_servers">クライアントとサーバー</h2>
 
-<p>Web に接続されたコンピュータは<strong>{{原語併記("クライアント", "client")}}</strong>と<strong>{{原語併記("サーバ", "server")}}</strong>と呼ばれます。これらがどのように相互作用するかを概略図で表すと次のようになります。</p>
+<p>ウェブに接続されたコンピューターは<strong>クライアント</strong> (client) と<strong>サーバー</strong> (server) と呼ばれます。これらがどのように相互作用するかを概略図で表すと次のようになります。</p>
 
-<p><img alt="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" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p>
+<p><img alt="クライアントとサーバーを表す 2 つの円。リクエストと書かれた矢印は、クライアントからサーバーへ、レスポンスと書かれた矢印は、サーバーからクライアントへと向かっている。" src="simple-client-server.png"></p>
 
 <ul>
- <li>クライアントは、一般的な Web ユーザーが使うインターネットに接続されたデバイス (例えば Wi-Fi に接続されているコンピュータや、モバイルネットワークに接続されているスマートフォン) と、これらのデバイスで利用できる Web にアクセスするソフトウェア (ふつうは Firefox や Chrome などの Web ブラウザ) のことです。</li>
- <li>サーバとは、Web ページ、サイト、アプリを保存しているコンピュータのことです。クライアントデバイスが Web ページにアクセスしたいときは、Web ページのコピーがサーバからクライアントにダウンロードされ、ユーザーの Web ブラウザに表示されます。</li>
+ <li>クライアントは、一般的なウェブユーザーが使うインターネットに接続された端末 (例えば Wi-Fi に接続されているコンピューターや、モバイルネットワークに接続されているスマートフォン) と、これらの端末で利用できるウェブにアクセスするソフトウェア (ふつうは Firefox や Chrome などのウェブブラウザー) のことです。</li>
+ <li>サーバーとは、ウェブページ、サイト、アプリを格納しているコンピューターのことです。クライアント端末がウェブページにアクセスしたいときは、ウェブページのコピーがサーバーからクライアントにダウンロードされ、ユーザーのウェブブラウザーに表示されます。</li>
 </ul>
 
-<h2 id="The_other_parts_of_the_toolbox" name="The_other_parts_of_the_toolbox">道具箱の他の部分</h2>
+<h2 id="The_other_parts_of_the_toolbox">道具箱の他の部分</h2>
 
-<p>もちろん上で説明したクライアントとサーバだけでなく、これら二つ以外にも、他に多くのものが関わっています。以下では、それについて説明します。</p>
+<p>もちろん上で説明したクライアントとサーバーだけでなく、これら二つ以外にも、他に多くのものが関わっています。以下では、それについて説明します。</p>
 
-<p>いま、Web が道路であると想像してみましょう。道路の片端にクライアントがあり、そこは例えれば、あなたの自宅のようなものです。反対の端はサーバで、そこは例えれば、あなたが何かを買うお店のようなものです。</p>
+<p>いま、ウェブが道路であると想像してみましょう。道路の片端にクライアントがあり、そこは例えば、あなたの自宅のようなものです。反対の端はサーバーで、そこは例えば、あなたが何かを買うお店のようなものです。</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+<p><img alt="" src="road.jpg" style="display: block; margin: 0px auto;"></p>
 
-<p>クライアントとサーバに加えて、以下のものにも触れなければなりません。</p>
+<p>クライアントとサーバーに加えて、以下のものにも触れなければなりません。</p>
 
 <ul>
- <li><strong>インターネット接続</strong>： Web 上でデータの送受信をできるようにします。あなたの自宅とお店との間の通りのようなものです。</li>
- <li><strong>TCP/IP</strong>： Transmission Control Protocol と Internet Protocol は、どのように Web 上をデータが動くのか、を定義した通信プロトコルです。これは注文したり、店に行ったり、物を買ったりするための通信手段や交通機関のようなものです。身近な例では、車やバイク (またはその辺りにあるもの) のようなものです。</li>
- <li><strong>DNS</strong>： Domain Name Servers は Web サイトの住所録のようなものです。ブラウザに Web アドレスを入力すると、ブラウザは Web サイトを取得する前に DNS を見て、Web サイトの本当のアドレスを探します。ブラウザは Web サイトがどのサーバにいるかを探し出す必要があり、それで HTTP のメッセージを正しい場所 (下記参照) に送ることができます。これはお店の所在地を探してからお店に行くようなものです。</li>
- <li><strong>HTTP：</strong> Hypertext Transfer Protocol は、クライアントとサーバが対話をする方法を定義するアプリケーション{{Glossary("Protocol" , "プロトコル")}}です。これは商品を注文するための言語のようなものです。</li>
- <li><strong>コンポーネントファイル：</strong> Web サイトは多くの異なるファイルで構成されます。これはお店で複数の部品を買うようなものです。これらのファイルは主に2種類に当てはまります。
+ <li><strong>インターネット接続</strong>: ウェブ上でデータの送受信をできるようにします。あなたの自宅とお店との間の通りのようなものです。</li>
+ <li><strong>TCP/IP</strong>: Transmission Control Protocol と Internet Protocol は、どのようにウェブ上をデータが動くのか、を定義した通信プロトコルです。これは注文したり、店に行ったり、物を買ったりするための通信手段や交通機関のようなものです。身近な例では、車やバイク (またはその辺りにあるもの) のようなものです。</li>
+ <li><strong>DNS</strong>: Domain Name Servers はウェブサイトの住所録のようなものです。ブラウザーにウェブアドレスを入力すると、ブラウザーはウェブサイトを取得する前に DNS を見て、ウェブサイトの本当のアドレスを探します。ブラウザーはウェブサイトがどのサーバーにいるかを探し出す必要があり、それで HTTP のメッセージを正しい場所 (下記参照) に送ることができます。これはお店の所在地を探してからお店に行くようなものです。</li>
+ <li><strong>HTTP</strong>: Hypertext Transfer Protocol は、クライアントとサーバーが対話をする方法を定義するアプリケーション{{Glossary("Protocol" , "プロトコル")}}です。これは商品を注文するための言語のようなものです。</li>
+ <li><strong>コンポーネントファイル</strong>: ウェブサイトは多くの異なるファイルで構成されます。これはお店で複数の部品を買うようなものです。これらのファイルは主に2種類に当てはまります。
   <ul>
-   <li><strong>コードファイル</strong>: Web サイトは主に HTML、CSS、JavaScript から作られます。しかし、ちょっと後で他の技術にも出会うことになるでしょう。</li>
-   <li><strong>アセット</strong>: これは画像、音楽、動画、Word 文書、PDF といった Web サイトを構成するコード以外のすべての材料の集合的な名前です。</li>
+   <li><strong>コードファイル</strong>: ウェブサイトは主に HTML、CSS、JavaScript から作られます。しかし、ちょっと後で他の技術にも出会うことになるでしょう。</li>
+   <li><strong>アセット</strong>: これは画像、音楽、動画、Word 文書、PDF といったウェブサイトを構成するコード以外のすべての材料の集合的な名前です。</li>
   </ul>
  </li>
 </ul>
 
-<h2 id="So_what_happens_exactly" name="So_what_happens_exactly">ならば何が起こるのか</h2>
+<h2 id="So_what_happens_exactly">ならば何が起こるのか</h2>
 
-<p>ブラウザに Web アドレスを打ち込んだ時に何が起こっているかというと (お店に歩いていく例えでは)，</p>
+<p>ブラウザーにウェブアドレスを打ち込んだ時に何が起こっているかというと (お店に歩いていく例えでは)、</p>
 
 <ol>
- <li>ブラウザは DNS サーバにアクセスし、Web サイトのあるサーバの実際のアドレスを探します (<strong>お店の住所を見つけます</strong>)</li>
- <li>ブラウザはサーバに HTTP リクエストメッセージを送信して、Web サイトのコピーをクライアントに送るよう求めます (<strong>お店に行ってものを注文します</strong>)。このメッセージ、およびクライアントとサーバ間でやりとりされるその他すべてのデータは、TCP/IP を使用してインターネット経由で送信されます</li>
- <li>サーバがクライアントのリクエストを承認すると、サーバはクライアントに 「200 OK」 というメッセージを送ります。これは「もちろんその Web サイトを見ることができます。どうぞ！」という意味です。そして Web サイトのファイルを、データパケットと呼ばれる一連の小さな{{原語併記("塊", "chunk")}}としてブラウザに送信し始めます (<strong>お店は商品を渡し、あなたは自宅に持って帰ります</strong>)</li>
- <li>ブラウザは小さな塊を完全な Web サイトに組み立て、表示します (<strong>玄関にものが到着しました</strong> — 新しいピカピカのものです、すばらしい！)</li>
+ <li>ブラウザーは DNS サーバーにアクセスし、ウェブサイトのあるサーバーの実際のアドレスを探します (お店の住所を見つけます)。</li>
+ <li>ブラウザーはサーバーに HTTP リクエストメッセージを送信して、ウェブサイトのコピーをクライアントに送るよう求めます (お店に行ってものを注文します)。このメッセージ、およびクライアントとサーバーの間でやりとりされるその他すべてのデータは、TCP/IP を使用してインターネット経由で送信されます</li>
+ <li>サーバーがクライアントのリクエストを承認すると、サーバーはクライアントに 「200 OK」 というメッセージを送ります。これは「もちろんそのウェブサイトを見ることができます。どうぞ！」という意味です。そしてウェブサイトのファイルを、データパケットと呼ばれる一連の小さな塊 (chunk) としてブラウザーに送信し始めます (お店は商品を渡し、あなたは自宅に持って帰ります)</li>
+ <li>ブラウザーは小さな塊を完全なウェブページに組み立て、表示します (玄関にものが到着しました — 新しいピカピカのものです、すばらしい！)</li>
 </ol>
 
-<h2 id="DNS_explained" name="DNS_explained">DNS の説明</h2>
+<h2 id="Order_in_which_component_files_are_parsed">コンポーネントファイルが解析される順番</h2>
 
-<p>実際の Web アドレスは、お気に入りの Web サイトを見つけるためにアドレスバーに入力するような、すばらしい、覚えやすい文字列ではありません。実際の Web アドレスは <code>63.245.217.105</code> のような特殊な数字です。</p>
+<p>クライアントのリクエストが承認されると、サーバーはまず HTML (インデックス) ファイルを送り返します。 index.html は一般的に、サーバーによって解析されるウェブサイトの最初のファイルであるため、このような名前になっています。</p>
 
-<p>これは、{{Glossary("IP Address", "IP アドレス")}} と呼ばれ、Web 上の一意の場所を表します。しかし、覚えにくいと思いませんか？だから、ドメインネームサーバが発明されたのです。これらは特別なサーバで、ブラウザに入力した Web アドレス ("mozilla.org" など) と Web サイトの実際の (IP) アドレスを対応させます。</p>
+<p>HTML ファイルは、 <a href="/ja/docs/Learn/CSS">CSS</a> と <a href="/ja/docs/Learn/JavaScript">JavaScript</a> を参照することができます。それぞれ <code>&lt;link&gt;</code> と <code>&lt;script&gt;</code> 要素を使って外部ファイルに記述したり、 <code>&lt;style&gt;</code> と <code>&lt;script&gt;</code> 要素を使ってHTMLページに埋め込んだりすることができます。</p>
 
-<p>Web サイトには、IP アドレスを使用して直接アクセスできます。<a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a> のようなツールにドメインを打ち込むことで、Web サイトの IP アドレスを見つけることができます。</p>
+<p>サーバーの観点からは、レスポンスが返信される際に、これらのファイルがどのような順序で解析されるかを知ることが重要です。</p>
 
-<h2 id="Packets_explained" name="Packets_explained">パケットの説明</h2>
+<ul>
+  <li>まず HTML ファイルが解析され、そのファイルの中を見ることで、どの CSS ファイルや JavaScript ファイルが参照されているかをサーバーが認識します。</li>
+  <li>HTML が解析され、 DOM ツリー構造が生成された後、リンクされた CSS が解析され、 DOM ツリーの適切な部分にスタイルが適用されます。この時点で、ページの視覚的な表現が画面に描かれ、ユーザーはページを見ることになります。</li>
+  <li>JavaScript は通常、 HTML と CSS の後に解析され、ページに適用されます。</li>
+</ul>
+
+<h2 id="DNS_explained">DNS の説明</h2>
+
+<p>実際のウェブアドレスは、お気に入りのウェブサイトを見つけるためにアドレスバーに入力するような、すばらしい、覚えやすい文字列ではありません。実際のウェブアドレスは <code>63.245.215.20</code> のような特殊な数字です。</p>
+
+<p>これは、 {{Glossary("IP Address", "IP アドレス")}}と呼ばれ、ウェブ上の一意の場所を表します。しかし、あまり覚えやすくはないですよね。だから、ドメインネームサーバーが発明されたのです。これらは特別なサーバーで、ブラウザーに入力したウェブアドレス ("mozilla.org" など) とウェブサイトの実際の (IP) アドレスを対応させます。</p>
+
+<p>ウェブサイトには、IP アドレスを使用して直接アクセスできます。<a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a> のようなツールにドメインを打ち込むことで、ウェブサイトの IP アドレスを見つけることができます。</p>
+
+<h2 id="Packets_explained">パケットの説明</h2>
 
-<p>先ほど、データがサーバからクライアントに送信される形式を説明するために、「パケット」という用語を使用しました。ここではどういう意味なのでしょうか。基本的に、Web 上でデータが送信されると、何千もの小さな塊として送信されるため、たくさんの異なるユーザーが同じ Web サイトを同時にダウンロードできます。Web サイトが単一の大きな塊として送信されるとすると、一度に1人のユーザーしかダウンロードできなくなるため、Web がとても非効率的になり、使うのが楽しくなくなるでしょう。</p>
+<p>先ほど、データがサーバーからクライアントに送信される形式を説明するために、「パケット」という用語を使用しました。ここではどういう意味なのでしょうか。基本的に、ウェブ上でデータが送信されると、何千もの小さな塊として送信されるため、たくさんの異なるユーザーが同じウェブサイトを同時にダウンロードできます。ウェブサイトが単一の大きな塊として送信されるとすると、一度に 1 人のユーザーしかダウンロードできなくなるため、ウェブはとても効率が悪くなり、楽しんで使えなくなるでしょう。</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li><a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットはどのように動くのか</a></li>
@@ -90,21 +108,21 @@ translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
  <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
 </ul>
 
-<h2 id="Credit" name="Credit">クレジット表示</h2>
+<h2 id="Credit">クレジット表示</h2>
 
 <p>道路の写真: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
 
 <p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
 
-<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+<h2 id="In_this_module">このモジュール</h2>
 
 <ul>
- <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
- <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li>
+ <li id="Installing_basic_software"><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
+ <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li>
  <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
  <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
  <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
  <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
- <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li>
- <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
+ <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">ウェブサイトの公開</a></li>
+ <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a></li>
 </ul>