# Web の仕組み 1

普段閲覧しているインターネットで Web サイトや YouTube を見ることは生活の中で当たり前となっています。今では需要は高まりエンジニアが不足しています。 Web サイトや YouTube のようなアプリを作るために、まず Web の仕組みを知りましょう。

# Web サイトが表示されるまでの流れ

Web サイトが表示されるまでの大まかな流れは以下の通りです。

ユーザー ブラウザに URL を入力する。
ブラウザ DNS サーバーに URL に含まれるドメインの解決をお願いする。
DNS サーバー ドメインを IP アドレスに変換して返答する。
ブラウザ IP アドレスを使用して Web サーバーにデータを要求する。
Web サーバー URL 等の情報を確認し、それに応じたデータを返答する。
ブラウザ 受け取ったデータを表示する。

コンピュータやスマートフォンを利用して、インターネットを通してサーバーにアクセスしてサーバーを通じてレスポンスがあるという流れです。ネットワークを通じてデータがやり取りされる流れを抑えておきましょう。

# 専門用語

# Web ブラウザ

Web ブラウザとは、インターネット上ある様々なデータにアクセスするためのアプリケーションです。種類としては以下のようなものがあります。

Google Chrome（グーグルクローム）
Mozilla Firefox（モジラファイアーフォックス）
Microsoft Edge（マイクロソフトエッジ）
Internet Explorer（インターネットエクスプローラー）
Safari (サファリ)

ほとんどのブラウザで、インターネット上のデータを表示した場合の表示結果や挙動は同じですが、機能によっては、使用できなかったり、挙動が異なったりする場合があります。

プログラミングを行う上では、ブラウザは Google Chrome を使用することをおすすめしています。また、この学習サイトでは、 Google Chrome を使用することを前提に解説しています。

Google Chrome のインストール方法は開発環境構築編で紹介しています。

# IP アドレス

IP アドレスとは、インターネットなどの IP ネットワークに接続する端末や機器に割り当てられる識別番号です。接続中の端末や機器の 1 台 1 台に値が割り当てられます。

IP アドレスのイメージは、簡単に言うと実世界における住所のような存在です。皆さんの使用しているコンピュータやスマートフォンにも 1 つ以上の IP アドレスが割り当てられており、それを住所のように取り扱っています。皆さんが郵便物を送る際に宛名に住所を書くように、コンピュータは、Web サイトのデータを要求する際に IP アドレスを指定して遠く離れた場所にある目的のコンピュータと通信しています。

住所として使用されるためには、IP アドレスが（識別を試みる範囲に）重複して存在することは許されません。 IP アドレスが重複して割り当てられることがないように、世界的には IANA(ICANN) (opens new window) が、日本では JPNIC (opens new window) が管理しています。詳しくは JPNIC の IP アドレスの管理 (opens new window) を参照してください。

# IPv4 と IPv6

現在、 IP アドレスには IPv4 と IPv6 の 2 つのバージョンが併存しています。 IPv4 アドレスは、例えば 192.168.0.1 のように 0 ～ 255 (数字) を .(ドット) でつなげて表現されます。IPv6 は例えば 2001:DB8::8:800:200C:417A のように 0 ～ 9 (数字)、A ～ F、: (コロン) を組み合わせて表現されます。

もともと IPv4 のみが使用されていましたが、 IPv4 が表現できる数は約 43 億個しかなく、コンピュータの台数増加により、 IPv4 が枯渇しそうになったため IPv6 が誕生しました。 IPv6 は約 340 澗かん個もの表現できる数があります。しかし、IPv6 は表記が長く取り扱いづらい点と、バーチャルドメインの技術、サブネットマスクの登場等、 IPv4 を節約して使用する技術が発達したため、 IPv6 への移行が急務ではない状況となり、IPv6 がそれほど普及していない状況にあります。このような状況ですが、今後コンピュータの台数は爆発的に増加する可能性があるため、各サービスプロバイダーは契約者に IPv6 も付与する等、徐々に対応が進んでいます。 IPv4 のみ対応、 IPv4 / IPv6 両対応、 IPv6 のみ対応(一部) 等、アプリケーションサービスや、サービスプロバイダーによって様々のため、現在では IPv4 を主とし、IPv4 / IPv6 が併用されています。

# IP アドレスの確認

今ご自身がインターネット上のコンテンツを見るために使用しているグローバル IP アドレスを確認することができます。 https://www.infobyip.com/ (opens new window) にアクセスして、確認してみましょう。

# 主要部分の見方

項目	説明
ISP	インターネットサービスプロバイダです。契約している回線の会社の情報が表示されることが多いです。
IPv4	`xxx.xxx.xxx.xxx` の形式で表示されているはずです。
IPv6	もしご自身のコンピュータ、ルーター、サービスプロバイダーの契約等の全てが IPv6 に対応している場合、IPv6 の欄にアドレスが表示されます。 N/A と表示されている場合は対応していません。

# 補足

IP アドレスチェックページ (opens new window) または「IP check」と検索して出てきた適当なチェックサイトを、コンピュータとスマートフォンの両方で開いて、IP アドレスがどのように表示されるか確認してみましょう。家の Wi-Fi につないでいる場合は、もしかすると同じ IPv4 アドレスが表示されるかもしれません。 IPv4 は全体数が限られているため、節約して使用される傾向があります。その方法で最も身近なものに、ルーターの「複数のデバイスで 1 つの IPv4 アドレスを共有する機能（ NAPT ）」があります。スマートフォンの Wi-Fi をオフにし、モバイル回線に変更してページを更新し、もう一度 IP アドレスを確認してみましょう。そうすると異なる IP アドレスを使用していることがわかると思います。公共 Wi-Fi や学校の Wi-Fi 、モバイル回線の場合は場所の変更（使用する電波塔を変える）等、いくつかの環境で試して、IP アドレスを実感してみてください。

# ドメイン

ドメインは英語で「範囲・領域」を意味し、 Web 業界、特にネットワークでは IP アドレスに対応する 愛称 として取り扱われます。コンピュータが、ネットワーク越しにある目的のコンピュータと通信するためには、 IP アドレスが必要ですが、意味のない文字の羅列で表現される IP アドレスは人間にとって扱いにくいです。そのため、人が認識しやすく、取り扱いやすいドメインという概念が作られました。ブラウザのたいてい上のあたりに表示されている文字列は、 URL または URI と言いますが、その一部にドメインが含まれています。

https://techselect-sample.careerselect.jp/guides/website1.html?p=123#sample

上記のような URL の場合、careerselect.jp の部分がドメインです。

# DNS / DNS サーバー

Domain Name System（ DNS ）とはドメイン名と、 IP アドレスとの対応づけを管理するために使用されているシステムです。また、そのシステムが実装され動作するコンピュータのことを DNS サーバーと言います。 DNS は、ドメイン名と IP アドレスを変換する作業を担います。ドメイン名から IP アドレスを検索する事を正引きといい、 IP アドレスからドメイン名を検索することを逆引きといいます。また、俗に DNS サーバーのことを ネームサーバー といったり、ドメイン名と IP アドレスの変換を行うことを 名前解決 ということもあります。

careerselect.jp

例えば、上記のドメイン名を DNS で正引きすると以下の IP アドレスに変換されます。

27.133.155.85

# localhost / 127.0.0.1

ドメイン名と IP アドレスの中には特別な意味を持つ IP アドレスがいくつか存在します。その中でも、Web 開発を行う際によく登場するものに、localhost と 127.0.0.1 があります。 localhost はドメイン名です。 127.0.0.1 は IP アドレスです。 localhost を名前解決すると 127.0.0.1 となります。

127.0.0.1 とは自分自身のコンピュータを指す IP アドレス（ IPv4 ）です。つまり、特定のコンピュータを指し示す絶対的な IP アドレスではなく、「自分自身」を指し示す相対的な IP アドレスです。

Q. 「相対的に自分自身を指す」とは？

A. 例えば、玉子さんが言う「私」と由紀さんが言う「私」は、どちらも同じ「私」という言葉ですが、玉子さんが言うと玉子さんのことを指し、由紀さんが言うと由紀さんのことを指す、ということです。「私」は相対的な単語であり、「玉子」や「由紀」は絶対的な単語と言えます。

Web アプリケーションを開発する際には、手元のコンピュータをサーバーと見立ててサービスを起動し、 Web ブラウザから自分のコンピュータ宛にデータの要求を行う手法を用いることがあります。その際に、URL には http://127.0.0.1 または http://localhost と入力し、自分のコンピュータ宛にリクエストが来るように指定します。

# Web サーバー

Web サーバーとは、インターネット上から要求されたリクエストに応じて、表示に必要な文章や画像などのデータを返却（レスポンス）するコンピュータのことです。私たちが Web サイトを閲覧しようとするとき、 Web サーバーはリクエストの内容に応じて、サーバー内の適切なデータを返却します。

# ポート番号

このセクションの説明は JPNIC (opens new window) の引用です。

ポート番号とは、TCP/IP 通信において、コンピュータが通信に使用するプログラムを識別するための番号です。ポート番号は 16 ビットの整数であり、 0 番～ 65535 番まであります。

TCP/IP 通信においては、 IP アドレスがあればネットワーク上のコンピュータを一意に識別することができますが、該当コンピュータのどのプログラムに通信パケットを届けるかは、 IP アドレスだけでは決定できません。どのプログラムに通信パケットを渡すのかを決定するために、ポート番号を使用します。

例えば、クライアントが HTTP を使って通信する際は、該当サーバの IP アドレスとポート番号 80 番を指定してパケットを送ります。ここで、ポート番号 80 番を指定するのは、HTTP のサーバは、 80 番ポートでパケットを待っていることが多いためです。サーバ側では、80 番ポートが宛先となっているパケットが届くと、事前に指定しておいたそのポート宛のパケットを処理するプログラム(Apache や IIS など)が動き、パケットの中身を処理します。

上記のような仕組みにより、クライアントからのパケットを受け取ったサーバは、宛先のポート番号が 80 番であることから Web サービスを提供すれば良いことがわかり、適切なプログラムで処理を行うことができます。また、サーバがクライアント端末にパケットを返す時にも、そのクライアント端末の IP アドレスとポート番号を指定して通信を行います。

このように、 TCP/IP ネットワーク上でコンピュータ同士が通信を行う際には、 IP アドレスとポート番号をセットで用いて通信を行います。

ポート番号には、下記のような三つの種別があります。

WELL KNOWN PORT NUMBERS (ウェルノウンポート番号):
0 番～ 1023 番
REGISTERED PORT NUMBERS(登録ポート番号):
1024 番～ 49151 番
DYNAMIC AND/OR PRIVATE PORTS(ダイナミック/プライベートポート番号):
49152 番～ 65535 番

上記のうち、WELL KNOWN PORT NUMBERS は、使用目的が定められたポート番号であり、 Internet Assigned Numbers Authority (IANA)が管理しています。先ほど例に挙げたポート番号 80 番も、この WELL KNOWN PORT NUMBERS に該当します。 REGISTERED PORT NUMBERS に関しては、IANA が登録を受け付け、公開しています。 DYNAMIC AND/OR PRIVATE PORTS については、誰でも自由に使用できるポートとして開放されています。なお、ポート番号の一覧は IANA の Web サイト (opens new window)で見ることができます。

実際に通信を行う際には、上記の種別を踏まえた上で、通信プログラムの性質に応じて柔軟にポート番号を使用します。

補足

よく使うポート番号の例として、例えば、HTTP は 80 番、HTTPS は 443 番を使用します。 URL の文法としてポート番号はドメインのあとに : に続けて記述します。

例: https://example.com:443/aaaa/bbbb

しかし、ブラウザの URL を見ても、そのような表記を見ることはほとんどありません。それは、大抵のブラウザで、 80 と 443 は省略されて表示されるためです。つまり、URL が http から始まる場合は、 80 番、https から始まる場合は 443 番を使用することが標準の動作となっており、標準動作の場合は URL のポート番号が非表示になるためです。

よって、直接ポート番号が記述された URL も、URL の構文としては正しいため、目的の Web ページを開くことができます。実際に URL をコピーし直接値を入力して、ページが表示されることと、ポート番号が非表示になることを確認してみましょう。

HTTP のサイト: http://abehiroshi.la.coocan.jp:80/
HTTPS のサイト: https://www.google.com:443/

Web 開発を行う際に手元のコンピュータ内部でサーバーを再現する場合、これらの標準のポートとは異なる番号を使うことがあります。 localhostと合わせて以下のような URL となることが多いです。

例1: http://localhost:3000
例2: http://localhost:8080

# OSI 参照モデル

※ このセクションは専門的のため、参考程度にご覧ください。

OSI 参照モデルとは、コンピュータネットワークで利用されているプロトコルについて、それぞれの役割を分類し、明確化するためのモデルです。国際標準化機構（ISO）によって策定されました。通信機能を 7 つの階層に分けて定義しています。

画像引用 OSI reference model (opens new window)

ちょっとむずかしいですね。しかし、インターネットで通信する際には、とても重要な図です。

# この図が何のためにあるか

データのやり取りを行う際、つまり、通信を行う際に、どのレベルの話をしているかを明確にするためです。一概に通信をすると言っても、様々な手段や考え方があります。

各層は、自身の層同士の通信方式やデータの変換のルールを確立します。そして、上（下）の層からきた信号やデータを、確実に下（上）の層に伝えます。

# OSI 参照モデルの見方

OSI 参照モデルは、2 つのコンピュータの通信のために使用される図のため、2 つ並べて表現します。この図は、左のコンピュータから右のコンピュータへデータを転送するような通信をすることを前提としています。

通信は左のコンピュータの第 7 層から始まります。
第 7 層はアプリケーション層です。このアプリケーション層では、右のコンピュータの第 7 層にあるアプリケーションがデータを受け取ったときに理解できるように、予め作成したルールに沿う形式でデータを作成します。
このとき作成したデータは、大抵人間にとってわかりやすいデータであることが一般的です。
この、左のコンピュータの第 7 層のアプリケーション層で作成したデータが、魔法によって右のコンピュータの第 7 層 に飛んでいってくれれば、第 6 層～第 1 層の存在など使わずに、無事データを右のコンピュータに送ることができたことになるのですが、そのようなことはないので、一旦下の (左)第 6 層に依頼します。
(左)第 6 層では、(左)第 7 層で作成したデータを、コンピュータにとってわかりやすい符号に変換します。これを (左)第 5 層に伝えます。
矢印のとおり、後に、(右)第 5 層から(右)第 6 層にデータが渡されます。このとき渡されるデータは、(左)第 6 層で(左)第 5 層に渡したときと同じものが到着します。そして、(右)第 6 層では、(左)第 7 層 で受け取ったときと全く同じデータに戻します。(左)第 7 層 で作成したデータと同じものを(右)第 7 層に提供します。
(左)第 5 層以下も同様に、(左)上層からきたデータを(左)下層に伝えます。このとき、(右)下層から来たときに必ず元のデータに戻し、(右)上層に伝えられるように、ルールを決めておきます。
下層ほど物理的な話になっていきます。例えば 第 1 層では、光ケーブルを使うか、電話線を使うか、無線を使うかというレベルの話です。
また、長距離伝送を行う際には、第 1 層～第 3 層で上下を繰り返します。
例: 家の Wi-Fi(無線) → 家の細い光ケーブル → NTT の太い光ケーブル → 海底ケーブル → 外国の光ケーブル → データセンター
このような経路の間、第 4 層より上層のデータを壊さない形で、第 1 層～第 3 層間で変換が繰り返し行われ、データが物理的に目的地に到着します。
到着したデータは、第 1 層 → 第 7 層 へ、データを元に戻す作業が行われ、転送が完了したといえる状態になります。
これらの作業がすべての通信で毎回行われます。ここでは、左から右に転送する通信について説明していましたが、返答のために右から左に転送する通信についても同様に行われます。また、1 回あたりについては、大抵数ミリ秒ほどの時間で終わります。
ここでは説明のために、第 7 層から順にデータの流れを追いましたが、状況に応じて各層から始まる場合もあります。また複数の層にまたがってやり取りを行うものもあります。

# 用語の整理

以上をふまえて、それぞれの用語がどの層の技術かを整理します。

Web では、OSI参照モデルとは別に、TCP/IP モデルがあり、第 5 層～第 7 層をまとめてアプリケーション層と表現します。

第 7 層┐
第 6 層├─ HTTP、DNS、Web ブラウザ
第 5 層┘
第 4 層── TCP、UDP、ポート番号
第 3 層── IP アドレス、NAT、ルーター
第 2 層── MAC アドレス、イーサネット
第 1 層── 光ファイバー、LAN ケーブル、Wi-Fi の電波

OSI 参照モデルは、Web 開発において、問題が発生した際の原因の切り分けに役立ちます。どの層で問題が発生しているかを抽出し、それぞれの層に対応した適切な処理を行うことで、迅速に問題解決を行うことができます。

これらの問題は、普段のインターネットブラウジングでも遭遇することがあります。

例:

第 6 層の問題: 文字化け
第 3 層の問題: パケットロス
第 1 層の問題: ノイズによる減衰

# 全体理解

ここまで専門用語の解説をしましたが、この知識を踏まえた上でもう一度 Web サイトが表示される仕組みの画像を見てましょう。

インターネットで Web サイトが表示される流れとしては、 Web ブラウザが、 Web サーバーに宛てにリクエストを送信し、Web サーバーがリクエストに応じてデータを返却し、 Web ブラウザが受け取り、受け取ったデータを整理して画面に表示します。通信を行う際には、IP アドレスが用いられます。

これらの流れを経て、ようやくブラウザに情報が表示されます。どのような仕組みで Web サイトが表示されるか理解できたでしょうか。

# まとめ

Web ブラウザは Microsoft Edge や Google Chrome 等様々なものがある。
IP アドレスはインターネット上の住所のような役割であり、インターネットに接続して通信を行う際に必ず使用する識別番号でる。
IP アドレスを人間が認識しやすい形でアルファベット表記したものがドメインである。
DNS サーバーは IP アドレスとドメインの変換を担うサーバーである。
localhost は自分自身を指すドメインである。
Web サーバーは、インターネット上からのリクエストに応じてデータを返却するコンピュータである。
ポート番号は到達したリクエストをどのアプリケーションに渡すべきか識別するための番号である。

← 基礎編: はじめに Web の仕組み 2 →