Articles

ウェブの仕組み

On 10月 15, 2021 by

ウェブはどこにでもある！

私たちは以前にも増してウェブを利用しています-それも、目に見えないような多くの場所で。

携帯電話でメールをチェックしようが、ツイートを送ろうが、あなたはインターネット（すなわち「ウェブ」）を使っているのです。 この記事とビデオ (上記参照) では、すべての技術的な詳細には踏み込みませんが、Web 開発者になるには、どのような技術が必要で、何を (どの程度) 学ぶべきでしょうか。 この記事とビデオ（上記参照）では、技術的な詳細には触れません。

# How Websites Work

インターネットを利用する最も分かり易い方法から始めましょう。 academind.comのようなWebサイトにアクセスします。

このアドレスをブラウザに入力し、ENTERを押した瞬間に、さまざまなことが起こります。

  1. URLが解決される
  2. ウェブサイトのサーバーにリクエストが送信される
  3. サーバーの応答が解析される
  4. ページが表示される

実際には、次のことが行われます。 の各ステップは、他の複数のステップに分割することもできますが、すべての動作の概要を理解するためには、ここでは無視できます。

Step 1 – URL が解決される

Web サイトのコードは明らかに自分のマシン上に保存されていないので、保存されている別のコンピュータから取得する必要があります。 この「他のコンピュータ」は「サーバー」と呼ばれます。 このサーバーは何らかの目的を果たすため、この例では、Webサイトを提供します。

あなたは「academind.com」と入力します。 (ドメインと呼ばれるもの）ですが、実はWebサイトのソースコードを格納しているサーバーは、IP（＝インターネットプロトコル）アドレスで識別されています。 ブラウザは、入力されたIPアドレスのサーバに「リクエスト」（ステップ2参照）を送ります（間接的には、もちろん「academind.com」と入力しています）。

実際には、"academind.com/learn"などともよく入力されますね。 "academind.com"はドメイン、"/learn"はいわゆるパスです。

また、ほとんどのWebサイトは"www.academind.com"経由か"academind.com"だけで訪れることができます。 技術的には、"www"はサブドメインですが、ほとんどのWebサイトでは、"www"へのトラフィックを単にメインページにリダイレクトしています。

IPアドレスは通常このような形をしています。 172.56.180.5 (ただし、IPv6と呼ばれるより「現代的」な形式もありますが、今は無視しましょう)。

ドメイン「academind.com」は、どのようにIPアドレスに変換されるのでしょうか。

インターネットには、特殊なタイプのサーバーが存在します。 いわゆる「ネームサーバー」または「DNSサーバー」（DNS = “Domain Name System”）です。

これらのDNSサーバーの仕事は、ドメインをIPアドレスに変換することです。 これらのサーバーは、翻訳テーブルを格納する巨大な辞書のようなものだと想像できます。

「academind.com」と入力すると、ブラウザはまず、そのような DNS サーバーから IP アドレスを取得します。

IP アドレスがわかったら、ステップ 2 に進みます。

Step 2 – Request Is Sent

IP アドレスが解決したら、ブラウザはその IP アドレスのサーバーに要求を出します。

「リクエスト」は単なる用語ではありません。これは本当に、舞台裏で起こる技術的なことです。 どのような種類のリクエストを行うべきか？ データは「HyperText Transfer Protocol」（「HTTP」として知られる）経由で送信され、リクエスト（およびレスポンス）がどのように見えるべきか、どのデータを含めることができるか（およびどの形式で）、リクエストがどのように送信されるかが定義された標準プロトコルです。 HTTPについては、こちらで詳しく説明しています。

HTTPを使用しているため、完全なURLは実際には次のように表示されます。 http://academind.com. ブラウザはこれを自動的に補完します。

また、HTTPと似ていますが、暗号化されているHTTPSもあります。 最近のページ（academind.comを含む）は、HTTPの代わりにこれを使用しています。 完全なURLは次のようになります。 https://academind.com.

プロセス全体とフォーマットが標準化されているので、サーバーがそのリクエストをどのように読み取るかについて推測する必要はありません。 ここでも「レスポンス」は技術的なもので、「リクエスト」と似たようなものです。

リクエストと同様に、レスポンスにはデータ、メタデータなどが含まれます。 academind.com のようなページをリクエストすると、レスポンスには、ページを画面に表示するために必要なコードが含まれます。

何がサーバー上で起こるのか。 最終的には、応答が送信されなければなりません。 その応答は「ウェブサイト」を含む必要はありません。

サーバーによっては、リクエストに基づいて動的に Web サイトを生成するようにプログラムされており (たとえば、個人データを含むプロファイル ページ)、他のサーバーは事前に生成された HTML ページ (たとえば、ニュース ページ) を返します。 あるいは、ウェブページの異なる部分に対して、両方が行われます。 また、第三の選択肢もあります。

ウェブサイトのさまざまな種類は、この記事の焦点ではありません。

この単純なケースでは、Web サイトを表示するためのコードを返すサーバーがあります。

Step 3 – Response Is Parsed

ブラウザは、サーバーから送信された応答を受け取ります。 これだけでは画面には何も表示されません。

その代わり、次のステップではブラウザがレスポンスを解析します。 サーバーがリクエストに対して行ったのと同じようにです。 ここでも、HTTP によって強制される標準化がもちろん役立ちます。

ブラウザは、レスポンスに含まれるデータとメタデータをチェックします。

ブラウザでPDFが開かれたことがあるかもしれませんね。 あれは、レスポンスが、データがWebサイトではなくPDF文書であることをブラウザに通知したために起こったことです。

Web サイトのシナリオに戻ります。

その場合、レスポンスには特定のメタデータが含まれており、レスポンス データが text/html 型であることをブラウザに知らせます。

これにより、ブラウザは HTML コードとしてレスポンスに添付された実際のデータを解析することができます。 HTML は「Hyper Text Markup Language」の略で、Web ページの構造を記述します。

<h1>Breaking News!</h1><p>Websites work because browser understand HTML!</p>

<h1> と <p> はいわゆる「HTML タグ」で、もし HTML についてもっと学びたいなら、このシリーズは最適な場所でしょう。 したがって、<h1> タグが何を意味するかについて推測する必要はありません。

ブラウザは HTML を解析する方法を知っており、今では単に応答データ全体 (「応答本文」とも呼ばれる) を調べて、ウェブサイトをレンダリングしています。

Step 4 – Page Is Displayed

前述のように、ブラウザはサーバーから返された HTML データを調べて、それに基づいてウェブサイトを構築します。 それは本当に構造を定義し、どのコンテンツが見出しで、どのコンテンツが画像で、どのコンテンツが段落であるかなどをブラウザに伝えるだけです。

HTML だけを含むページは次のように表示されます。 CSS (“Cascading Style Sheets”) です。

CSS は、Web サイトにスタイリングを追加するためのものです。

このルールは、すべての <h1> タグを青くします。

このようなルールは HTML コード内に追加できますが、通常は、個別に要求される .css ファイルに含まれます。

実際には、Web サイトは、最初のレスポンスが到着した時点で開始される多くの追加データを (追加のリクエストとレスポンスを通じて) 取得します。

さて、最初のレスポンスの HTML コードには、新しいリクエストを使用してさらにデータを取得するための指示が含まれています。 CSS についてもっと知りたい場合は、当社の完全ガイドが非常に役に立ちます！

CSS と共に、ブラウザはこのように Web ページを表示することができます：

実はもうひとつプログラミング言語があります（今回、それは本当にプログラミング言語なんです！)。 JavaScript。

常に見えるわけではありませんが、Web サイトで見られるすべての動的コンテンツ (たとえば、タブ、オーバーレイなど) は、実際には JavaScript によってのみ可能なのです。 Web 開発者が (サーバー上ではなく) ブラウザー上で実行されるコードを定義できるため、ユーザーが Web サイトを閲覧している間に JavaScript を使用して Web サイトを変更することができます。

これらは、academind.com のようなページのアドレスを入力し、その後ブラウザでウェブサイトのコンテンツを見るときに常に関与する 4 つのステップです。

# Server-side vs Browser-side

上記の 4 つのステップから、Web について話すときに、2 つのコア「側」を区別できることを学びました。 サーバー側とブラウザ側 (または、ブラウザなしでインターネットにアクセスすることもできるので、クライアント側。下記参照)。

Web 開発者になることに興味があるなら、これらの側で異なるテクノロジーとプログラミング言語を使用することを知ることが重要です。

サーバーサイド

サーバーサイドのプログラミング言語、つまり、ブラウザでは動作しないが通常のコンピューターで動作する言語が必要です (サーバーも結局は通常のコンピューターです)。

例としては、

  • Node.js
  • PHP
  • Python

重要: PHP を除いて、これらのプログラミング言語は Web 開発以外の目的にも使用することができます。js は確かにサーバーサイドのプログラミングに主に使用されますが (技術的にはその限りではありません)、Python はデータ サイエンスや機械学習にも非常に人気があります。

ブラウザサイド

ブラウザでは、学ぶべき言語/技術はまさに3つあります。

  • HTML (構造)
  • CSS (スタイル)
  • JavaScript (動的コンテンツ)

# “Behind the Scenes” Internet

ここまで、Webサイトについて述べてきましたが、Webサイトと同様に、ブラウザもまた、Webサイトを構成する重要な要素です。 すなわち、ブラウザにURL（たとえば「academind.com/learn」）を入力すると、見返りとしてWebサイトが得られるケースです。

しかし、インターネットはそれ以上のものです。 実際、あなたは毎日それ以上の目的でインターネットを使っています！

リクエストとレスポンスの核となる考え方は常に同じです。 しかし、すべてのレスポンスが必ずしもWebサイトであるとは限りません。

リクエストとレスポンスに添付されるメタデータは、どのデータが必要で、どのデータが返されるかを制御します。 もちろん、関与する両者 (すなわちクライアントとサーバー) は、要求者と送信されたデータをサポートする必要があります。

たとえば、"academind.com" から PDF を要求することはできません。 そのようなリクエストを送信することはできますが、PDF は戻ってきません。単に、この特定の URL に対して、この種のリクエストされたデータをサポートしていないためです。 このようなサービスは「API」（「Application Programming Interface」）とも呼ばれます。

たとえば、モバイル アプリはデータを取得または保存するために、このような API に「見えない」HTTP 要求を送信します（その API に知られている特定の URL に）。 たとえば、Twitterはツイートフィードを取得しています。

また、Webページでも、このような「目に見えない」要求が送信されます。 当社のニュースレターに登録しても（もちろん登録すべきです！）、新しいページはロードされません。 なぜなら、データは舞台裏でやり取りされているからです。 この場合、クライアントはブラウザですが、送信されたリクエストは、何の見返りも求めません。 その代わり、サーバーはあなたの電子メールアドレスを処理する方法を知っています。

ここでもっと詳しく説明することもできますが、これはすでに長い記事になっています。 これで、Web がどのように動作し、どのコアテクノロジーが関与しているか、十分に理解していただけたと思います。

コメントを残す

メールアドレスが公開されることはありません。