Web開発を始めたい人必見：「Web技術の基本」で学ぶ現代の必須スキル Chapter(2) 〜Webとネットワーク技術〜

## はじめに  
こんにちは！Naoと申します。普段は<a href="https://corp.xincere.jp/" target="_blank" rel="noopener noreferrer">株式会社xincere</a>でWebアプリケーションの開発をしています。主にReactやTypeScriptを使い、日々モダンな技術を活用した開発に取り組んでいます。  
今回の記事では、書籍「この一冊で全部わかる Web技術の基本」をテーマに、その内容を深掘りしてご紹介します。エンジニアを目指す方やジュニアエンジニアはもちろん、Web技術に興味のある方にも役立つ内容を目指しました。最後には学んだ知識を振り返る理解度チェックテストもご用意しています。ぜひ楽しみながら挑戦してみてください！

<a href="https://corp.xincere.jp/" target="_blank" rel="noopener noreferrer">株式会社xincere</a>では、実務未経験のエンジニアの方や学生エンジニアインターンを採用し一緒に働いています。
※ シンシアにおける働き方の様子はこちら

https://www.wantedly.com/companies/xincere-inc/stories

シンシアでは、年間100人程度の実務未経験の方が応募し技術面接を受けます。
その経験を通し、実務未経験者の方にぜひ身につけて欲しい技術力（文法）をここでは紹介していきます。

## 前提
この記事は、書籍「この一冊で全部わかる Web技術の基本」を**読んだ方向け**に執筆しています。詳しい内容については書籍を実際に手に取って確認いただければ幸いです。

今回の記事は、前回の記事からの続きとなるので未読の方はぜひ一読ください。

## 関連記事
- <a href="https://qiita.com/Nao52/items/b75eb88fe7f48e7bed5d" target="_blank" rel="noopener noreferrer">Chapter(1) 〜Web技術とは〜</a>
- <a href="https://qiita.com/Nao52/items/bad9cb25a7bc4eb6d244" target="_blank" rel="noopener noreferrer">Chapter(2) 〜Webとネットワーク技術〜</a> ← 今回はここ

## 各内容へのリンク

- [この書籍を読んだ理由](#この書籍を読んだ理由)
- [各単元のポイント解説](#各単元のポイント解説)
    - [2-01 【コンピューターネットワーク】](#2-01-コンピューターネットワーク)
    - [2-02 【標準プロトコル】](#2-02-標準プロトコル)
    - [2-03 【TCP/IP】](#2-03-tcpip)
    - [2-04 【IPアドレスとポート番号】](#2-04-ipアドレスとポート番号)
    - [2-05 【URLとドメイン】](#2-05-urlとドメイン)
    - [2-06 【DNS】](#2-06-dns)
    - [2-07 【HTTP】](#2-07-http)
- [章末問題 (Webとネットワーク技術)](#章末問題-webとネットワーク技術)
- [終わりに](#終わりに)
- [その他](#その他)

## この書籍を読んだ理由
実務で開発を始めて約6ヶ月が経ちました。このタイミングで改めて「この一冊で全部わかる Web技術の基本」について記事を書こうと思った理由は、すでに学習済みの基礎知識を「知っているレベル」から「いつでも引き出せて、人に説明できるレベル」に昇華させたいと考えたからです。

皆さんは「学習の5段階レベル」という言葉をご存じでしょうか？もし知らない方は、<a href="https://www.nlp.co.jp/000015.php" target="_blank" rel="noopener noreferrer">こちらのWebページ</a>をご一読ください。
実務では、基礎知識や技術を調べながら使いこなすこと（レベル3: 意識的有能）で充分開発を進められると感じています。しかし、業務効率をさらに高めるためには、これらを「いつでも自然に引き出せる状態」（レベル4: 無意識的有能）にする必要があると考えるようになりました。

そのため、誰もが知っている基礎を改めてしっかり学び直すべく、この書籍を手に取りました。今回の記事が、私自身の学びの振り返りだけでなく、読者の皆さんにとっても有益なものになれば幸いです。

## 各単元のポイント解説
### 2-01 【コンピューターネットワーク】
1. コンピューターがお互いに接続してやりとりする仕組みをなんというか？
1. 下記の2つはそれぞれなんと呼ばれるか？
a ネットワーク上で情報やサービスを提供する役割を持つコンピューター
b 提供された情報やサービスを利用する役割と持つコンピューター
1. 下記の(　A　)と(　B　)に入る適切なものを答えなさい。
スマートフォンやパソコンをインターネットに接続するサービスを提供しているものを(　A　)といい、単にプロバイダーや(　B　)とも呼ばれる。
1. 自宅や会社など限られた範囲で利用されるネットワークをなんというか？

<details>
<summary>解答</summary>

1. コンピューターネットワーク
1. a: サーバー / b: クライアント
1. A: インターネットサービスプロバイダー / B: ISP
1. LAN

</details>

<details>
<summary>ワンポイント解説</summary>

:::note info
### 「LAN」「WAN」「ISP」について理解を深めよう！
#### 1. LAN (Local Area Network)
⇨ LANは、限られたエリア内で使用されるネットワークを指します。家庭、オフィス、学校、工場など、物理的に近いデバイスを接続するためのネットワークです。
#### 2. WAN（Wide Area Network）
⇨ WANは、地理的に離れたエリアを接続するための広域ネットワークです。LANを複数接続して大規模なネットワークを構築します。
#### 3. ISP（Internet Service Provider）
ISPは、インターネットへの接続サービスを提供する事業者です。個人や企業に対して、インターネットアクセス、メールサービス、ドメイン管理、サーバーホスティングなどを提供します。

##### 上記のイメージ
[デバイス（PC, スマホ）] → [LAN（家庭やオフィス）] → [ISP] → [WAN（インターネット全体）]

:::

</details>

### 2-02 【標準プロトコル】
1. ネットワークに接続された機器同士が通信をするとき、あらかじめ決められた共通のルールや手順のことをなんというか？
1. インターネットにおけるさまざまなサービスを実現するためのプロトコルの標準として広く使われているものは何か？

<details>
<summary>解答</summary>

1. プロトコル
1. TCP/IP

</details>

### 2-03 【TCP/IP】
1. 下記はTCP/IPの説明です。(A)〜(D)に入る適切な語を答えなさい。
TCP/IPは役割ごとに上から、4つの階層に分かれている。具体的には、アプリケーションごとのやりとりを規定している(　A　)、データの分割や品質保証を規定している(　B　)、ネットワーク間の通信を規定している(　C　)、コネクタ形状や周波数といったハードウェアに関する規定をしている(　D　)がある。
1. 扱うデータをネットワークで転送するのに適したデータ形式に変換したり、ネットワーク経由で受け取ったデータを私たちが理解できるように変換する役割も持っている階層はどれか？
1. データの転送処理を担当しており、TCPやUDPといったプロトコルを利用している階層はどれか？

<details>
<summary>解答</summary>

1. A アプリケーション層 / B トランスポート層 / C インターネット層 / D ネットワークインターフェース層
1. アプリケーション層
1. トランスポート層

</details>

<details>
<summary>ワンポイント解説</summary>

:::note info

### TCPとUDPの違いについて理解しょう！
### TCP (Transmission Control Protocol)
コネクション型と呼ばれ、分割されたデータの順序や欠落をチェックしているため、Webサイトやメールなどデータ損失が起きると困るようなアプリケーションで利用されている。
### UDP (User Datagram Protocol)
コネクションレス型と呼ばれ、分割されたデータの順序や欠落を保証していない。通信が簡略化されている分、効率よく通信できるため、動画ストリーミングなどで利用されている。

:::

</details>

### 2-04 【IPアドレスとポート番号】
1. インターネットに接続されたコンピュータを特定し、データの行き先を管理するために利用されている識別番号をなんというか？
1. コンピュータが提供するサービスを指定するために利用されている識別番号をなんというか？
1. 下記はIPアドレスの説明です。(A)と(B)に入る適切なものは何か？
IPアドレスはインターネットでの通信の際に利用される(　A　)と自宅や会社内といったLAN内での通信で利用される(　B　)に区別される。

<details>
<summary>解答</summary>

1. IPアドレス
1. ポート番号
1. A グローバルIPアドレス / B プライベートIPアドレス

</details>

<details>
<summary>ワンポイント解説</summary>

:::note info

### ポート番号について理解を深めよう！
ポート番号は「0 〜 65535」までの数字の範囲で利用用途が決められている。特に「0 〜 1023」を(**ウェルノウンポート**)といい、**HTTP**は「80」、**HTTPS**は「443」といったようにポート番号が決まっていることによって、サービスを識別できる。

:::

</details>

### 2-05 【URLとドメイン】
1. Webサイトを閲覧する際は **`http://example.com/test.html`** といった文字列を利用する。このような文字列をなんというか？
1. Webサイトに接続する際はIPアドレスを利用するが、数字で表記されるIPアドレスは人間にとって覚えにくく扱いにくいため、 **`example.com`** のような文字列を別名として利用する。この文字列をなんというか？

<details>
<summary>解答</summary>

1. URL
1. ドメイン

</details>

<details>
<summary>ワンポイント解説</summary>

:::note info

### URLについて詳しくみてみよう！

`http://example.com/test.html`というURLを例にそれぞれの構造について詳しくみていきましょう。
1. httpの部分をスキーム名といい、**プロトコル**を指定します。 (例:http, https)
1. example.comの部分をホスト名やドメインといい、**接続先のサーバー**を指定します。
⇨ この部分には**IPアドレス**を指定することも可能です。
1. test.htmlの部分をパス名といい、接続先サーバーの**ディレクトリやファイル**を指定します。

#### 補足
ドメインとパス名の間には**ポート番号**が存在しますが、通常は省略されます。
省略せずに記述すると`http://example.com:80/test.html`となります。

:::

</details>

### 2-06 【DNS】
1. URLでWebサイトを閲覧する際、人間にとって理解しやすいドメインを利用するが、このドメインをIPアドレスに変換する仕組みをなんというか？
1. DNSのサービスを提供するサーバーのことをなんというか？
1. ドメインとIPアドレスを紐づけることをなんというか？

<details>
<summary>解答</summary>

1. DNS (Domain Name System)
1. DNSサーバー
1. 名前解決

</details>

<details>
<summary>ワンポイント解説</summary>

:::note info

### URL(ドメイン)を利用してWebサービスにアクセスするための流れを整理しよう！

1 クライアントが「`http://example.com`」のような**URL**にアクセスする。
2 クライアントはDNSサーバーに「`www.example.com`」のような**ドメイン**の**IPアドレス**を問い合わせる。
3 DNSサーバーは「`18.182.225.171`」のような**IPアドレス**をクライアントに返す。
4 クライアントは取得した**IPアドレス**で接続先のサーバーを特定して接続する。

※ こちらについてイメージしづらい場合は書籍のイラストで復習することを推奨します。

:::

</details>

### 2-07 【HTTP】
1. 下記はWebサイトを閲覧する際のやりとりや手順についての説明です。(A)〜(C)に入る適切なものは何か？
Webサイトを閲覧する際、Web(　A　)がWeb(　B　)に要求を送り、Web(　B　)はその要求に対して応答を返すといった単純なやりとりで実現している。このやりとりや手順を決めているものを(　C　)という。

<details>
<summary>解答</summary>

1. A クライアント(ブラウザ) / B サーバー / C HTTP

</details>

<details>
<summary>ワンポイント解説</summary>

:::note info

### WebブラウザとWebサーバーのやりとりを整理しよう！
Webサイトを閲覧する際、下記のようなステップが行われている。

1. アドレス欄にURLを入力　or　リンクをクリック
1. DNSサーバーでドメインとIPアドレスの紐付け(名前解決)
1. WebブラウザがWebサーバーにデータを要求
1. Webサーバーは要求内容を解析し、レスポンスデータを用意
1. WebサーバーがWebブラウザにデータを返す
1. Webブラウザは受け取ったデータを解析し、私たちが理解しやすい形で表示

Webコンテンツの送受信は「3と5」の部分で行われており、HTTPのようなプロトコルが利用されています。


:::

</details>

## 章末問題 (Webとネットワーク技術)
### 1 下記の問いに対して最も適切なものを「語群」から選びなさい。 【配点(3×14)】
1. 家庭、オフィス、学校、工場など、物理的に近いデバイスを接続するためのネットワークをなんというか？
1. インターネットに接続されたコンピュータを特定し、データの行き先を管理するために利用されている識別番号をなんというか？
1. データの転送処理を担当しており、TCPやUDPといったプロトコルを利用している階層は何か？
1. コンピュータが提供するサービスを指定するために利用されている識別番号をなんというか？
1. DNSのサービスを提供するサーバーのことをなんというか？
1. ネットワークに接続された機器同士が通信をするとき、あらかじめ決められた共通のルールや手順のことをなんというか？
1. Webサイトを閲覧する際は`http://example.com/test.html`といった文字列を利用する。このような文字列をなんというか？
1. 扱うデータをネットワークで転送するのに適したデータ形式に変換したり、ネットワーク経由で受け取ったデータを私たちが理解できるように変換する役割も持っている階層は何か？
1. コンピューターがお互いに接続してやりとりする仕組みをなんというか？
1. ドメインとIPアドレスを紐づけることをなんというか？
1. 地理的に離れたエリアを接続するための広域ネットワークをなんというか？
1. インターネットにおけるさまざまなサービスを実現するためのプロトコルの標準として広く使われているものは何か？
1. Webサイトに接続する際はIPアドレスを利用するが、数字で表記されるIPアドレスは人間にとって覚えにくく扱いにくいため、`example.com`のような文字列を別名として利用する。この文字列をなんというか？
1. URLでWebサイトを閲覧する際、人間にとって理解しやすいドメインを利用するが、このドメインをIPアドレスに変換する仕組みをなんというか？

<details>
<summary>語群　(見ないで解けるようになるとGoodです！)</summary>

- コンピューターネットワーク
- LAN
- WAN
- プロトコル
- TCP/IP
- アプリケーション層
- トランスポート層
- IPアドレス
- ポート番号
- URL
- ドメイン
- DNS
- DNSサーバー
- 名前解決

</details>

### 2 下記の空欄に入る適切なものを答えなさい。 【配点(6×4)】
1. Webサイトを閲覧する際は、(　A　)と呼ばれる「ネットワーク上で情報やサービスを提供する役割を持つコンピューター」と(　B　)と呼ばれる「提供された情報やサービスを利用する役割と持つコンピューター」によってやり取りが行われている。また、インターネットに接続する際に、スマートフォンやパソコンをインターネットに接続するサービスを提供しているものを(　C　)といい、単にプロバイダーや(　D　)とも呼ばれる。
1. TCP/IPは役割ごとに上から、4つの階層に分かれている。具体的には、アプリケーションごとのやりとりを規定している(　A　)、データの分割や品質保証を規定している(　B　)、ネットワーク間の通信を規定している(　C　)、コネクタ形状や周波数といったハードウェアに関する規定をしている(　D　)がある。
1. IPアドレスはインターネットでの通信の際に利用される(　A　)IPアドレスと自宅や会社内といったLAN内での通信で利用される(　B　)IPアドレスに区別される。
1. ポート番号は「0 〜 65535」までの数字の範囲で利用用途が決められている。特に「0 〜 1023」を(　A　)といい、HTTPは「(　B　)」、HTTPSは「(　C　)」といったようにポート番号が決まっていることによって、サービスを識別できる。

### 3 下記はTCPとUDPの違いについて説明しています。空欄に入る適切なものを答えなさい。 【配点(6×2)】
1. TCPは(　A　)型と呼ばれ、分割されたデータの順序や欠落をチェックしているため、(　B　)や(　C　)などデータ損失が起きると困るようなアプリケーションで利用されている。
1. UDPは(　A　)型と呼ばれ、分割されたデータの順序や欠落を保証していない。通信が簡略化されている分、効率よく通信できるため、(　B　)などで利用されている。

### 4 下記の説明として、異なるものを全て答えなさい。 【配点(8×1)】
1. `http://example.com/test.html`の`example.com`の部分をホスト名やドメインといい、接続先のサーバーを特定するために利用する。
1. `http://example.com/test.html`ではポート番号が省略されているが、`https`を利用する場合は省略できない。
1. TCPは通信が簡略化されている分、効率よく通信できるため、動画ストリーミングなどで利用されている。
1. LANは家庭、オフィス、学校、工場など、物理的に近いデバイスを接続するためのネットワークである。
1. インターネット上においてコンピューター同士のやりとりにはIPアドレスが必要であり、ドメイン名のみではWebサーバーに接続できない。

### 5 下記はWebブラウザとWebサーバーのやりとりを説明しています。後の問いに答えなさい。 【配点(Q1:4×2 / Q2:6×1)】
Webサイトを閲覧する際、下記のようなステップが行われている。
1. アドレス欄にURLを入力　or　リンクをクリック
1. (　A　)サーバーでドメインとIPアドレスの紐付け ⇨ ※これを(　B　)という
1. WebブラウザがWebサーバーにデータを要求
1. Webサーバーは要求内容を解析し、レスポンスデータを用意
1. WebサーバーがWebブラウザにデータを返す
1. Webブラウザは受け取ったデータを解析し、私たちが理解しやすい形で表示

Q1. 空欄(　A　)、(　B　)に入る適切なものを答えなさい。
Q2. HTTPが利用されるのは1〜6のどのステップか？(全て答えなさい)

## 章末問題(解答)
### 1　配点(3×14)
1. LAN
1. IPアドレス
1. トランスポート層
1. ポート番号
1. DNSサーバー
1. プロトコル
1. URL
1. アプリケーション層
1. コンピュータネットワーク
1. TCP/IP
1. ドメイン
1. 名前解決

### 2　配点(6×4)
1. A サーバー / B クライアント / C インターネットサービスプロバイダー / D ISP
1. A アプリケーション層 / B トランスポート層 / C インターネット層 / D ネットワークインターフェース層
1. A グローバル / B プライベート
1. A ウェルノウンポート / B 80 / C 443

### 3　配点(6×2)
1. A コネクション / B Webサイト / C メール
1. A コネクションレス / B 動画ストリーミング

### 4　配点(8×1)
2, 3

### 5　配点(Q1:4×2 / Q2:6×1)
Q1 A DNS / B 名前解決
Q2 3, 5

## 終わりに
Chapter(3)以降についても今後記事を作成していきたいと思っています！(作成した際はこの記事にリンクを追加していきます。)
問題ですが、何度も挑戦して満点(100点)を取れるように頑張ってみてください！この記事が少しでも多くの方のお役に立てれば光栄です。

## その他

https://naminori.xincere.jp/

https://portfolio.xincere.jp/