Webの基礎概念を超簡単にまとめてみた

今回は、エンジニア(というより、Webに関わるすべての人)にとって大変重要な基礎概念をピックアップしてまとめてみました。

そこで、エンジニア界隈で大変評判がよい良書である[プロになるためのWeb技術入門](https://www.amazon.co.jp/%E3%80%8C%E3%83%97%E3%83%AD%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AEWeb%E6%8A%80%E8%A1%93%E5%85%A5%E9%96%80%E3%80%8D-%E2%80%95%E2%80%95%E3%81%AA%E3%81%9C%E3%80%81%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AFWeb%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E9%96%8B%E7%99%BA%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%AE%E3%81%8B-%E5%B0%8F%E6%A3%AE-%E8%A3%95%E4%BB%8B/dp/4774142352)を読んで内容を簡単にまとめてみました。

本当は以下に挙げた項目以外にも基本的な知識・概念は山ほどありますが、**まずはこれ！** というものを即席で挙げさせてもらいました。

Webの基礎概念のとっかかりを掴んでいただけますと幸いです。

![alt](https://m.media-amazon.com/images/I/61YVe2oD4CL._AC_SY1000_.jpg)


## ステートフル(Stateful Protocol)

+ リクエストに伴って状態が変わっていくプロトコル、つまり**状態をもつプロトコル**
+ 直前のやりとりを次回へ反映できる
+ 同じ入力に対する出力が同じとは限らず、内部の状態次第で変わることがある
+ 床屋さんの例だと、**高級な美容室**
    + 来店したお客さんの情報を記録していて、`誰が対応してどんな髪型にしたかなどがわかるようになっている`
    + なので、「この前と同じ髪型で」といえば通じる
+ 例) **FTP(File Transfer Protocol)** などの対話型シェル
    + Webサイトの更新などファイルの転送を行うためのプロトコル
    + 前回のリクエスト結果を覚えていて、それを踏まえて次のリクエストを実行してくれる


## ステートレス(Stateless Protocol)

+ 内部に状態を保持せずに入力のみから出力を決定する方式、つまり**状態を持たないプロトコル**
+ 前回までのやり取りを次回へ反映できない
+ 履歴や内部状態に左右されず、同じ入力には必ず同じ出力を返す
+ 床屋さんの例だと、**1カット1000円の床屋さん**
    + 手早くたくさんのお客さんを捌いてコストを下げる為に、`「お客さんがいつ来店してどんな髪型にしたのか」などは記録していない`
+ 例) **HTTP(Hypertext Transfer Protocol)**
    + HTTPリクエストに対してレスポンスを返すやり取りの繰り返し



## 要求(リクエスト)と応答(レスポンス)　の流れについて
ユーザーがWebブラウザから **「このページを見せて」** という`要求`を行うと、Webサーバーは**そのページのHTMLを返してくれる。**`(応答)`

そしてWebクライアントのブラウザでもらったHTMLが解析され、ユーザーに画面として表示される。

さらに、表示された画面上でリンクをクリックしたり、フォームの送信ボタンをクリックすると、その要求がまたサーバーに送信され、それに対する応答が返されるといった仕組み。

**1. ブラウザにURLを打ち込む(要求)**
**2. 該当のHTMLを返す(応答)**
**3. ブラウザによってHTMLが解析され、画面が表示される**

+ Webアプリケーションでは、基本的にこの**繰り返し**で動いている
+ **リクエスト/レスポンスは、Web開発において非常に重要**であり、WebアプリケーションやWebサイトの開発において、**HTTPリクエストやHTTPレスポンスの概念を理解すること**は必須となる

## リクエスト(request)

+ WebクライアントからWebサーバーやアプリケーションサーバーに対する要求のこと
+ 一般的に、**URL(Uniform Resource Locator / 統一資源位置子)** と呼ばれるWebサイトやWebアプリケーションのアドレスを含む`HTTPリクエスト`として送信される
+ HTTPリクエストは、リクエストライン、ヘッダー、ボディの3つのセクションから構成される
    + リクエストラインは、HTTPメソッド、URL、およびHTTPバージョンを含む
    + ヘッダーは、リクエストに関する追加情報を含む
    + ボディは、リクエストに含まれるデータを含むことができる




## レスポンス(response)

+ リクエストに対して、サーバーからWebクライアントに対する応答のこと
+ レスポンス(HTTPレスポンス)には、HTTPステータスコード、ヘッダー、コンテンツの3つの要素が含まれる
    + HTTPステータスコードは、リクエストが正常に処理されたか、何らかのエラーが発生したのかを示す
    + HTTPヘッダーには、ブラウザに対して送信する追加情報が含まれる
    + コンテンツには、HTML、画像、JavaScriptなどの実際のページコンテンツが含まれる

## クッキー(Cookie)

+ **Webブラウザに情報を持たせる技術**
+ WebサイトからWebブラウザに保存される**小さなテキストファイル**のことを指す
+ WebサーバーからWebブラウザへ**HTTPレスポンスのヘッダを利用**して情報を送る
+ **HTTPの仕様を拡張**してWebアプリケーションとWebブラウザの間で**情報を交換**できるようにしたもの
+ クッキーは、Webサイトを訪れた際に、Webブラウザによって自動的に保存され、次回以降の訪問時にWebサイトに提供される
+ **ステートレスなHTTP**を使って、認証を必要とするアプリケーションを実現するために使用
+ **以下の2つの仕組み**によって、意図しない情報が他のWebサーバーに送られてしまうのを防いでいる
    + `Webサーバー`からCookieを受け取った`Webブラウザ`は、次回同じ`Webサーバー`にアクセスする際、受け取ったCookieをそのままHTTPリクエスト・ヘッダに入れて送る。`Webアプリケーション側`では、リクエスト・ヘッダに入っているCookieを調べることで、アクセスしてきた相手がどのような相手なのかを知ることができます。
    + 一方、たとえCookieを受け取った後でも、Cookieを受け取ったサーバーとは異なる`Webサーバー`に対してはCookieを送りません。


## プロトコル(Protocol)

+ インターネットには様々な種類のコンピューターがつながっており、WebサーバーとWebクライアントが通信を行うには**どのように情報をやり取りするかと言う取り決め**が必要です
+ この取り決めを **プロトコル(通信プロトコル)** と呼ぶ。
+ プロトコルはあくまで取り決めであり、そのプロトコルにしたがって実際に通信を行うプログラムが必要です。このような**プログラムを作成すること、また、作成されたプログラム**を**実装**と呼ぶ
+ 特に、HTMLの転送に適したプロトコルを**HTTP(Hyper Text Transfer Protocol)** という
+ インターネットの世界では、HTTP以外にもさまざまなプロトコルで情報がやりとりされている
    + 電子メールの送受信でしようされる**SMTPやPOP3**
    + Webサイトの更新などファイルの転送を行うための**FTP**
    + 遠隔からコンピュータを操作するための**TelnetやSSH**
+ 上記のプロトコルは全て**TCP/IP**の上に成り立っている
    + **TCP/IP(Transmission Control Protocol / Internet Protocol)**
        + ネットワーク上で情報をやり取りするための基本となるプロトコル
        + IPアドレスがわかると宛先のホストが特定できるので、そのホストへ任意の情報を届けることができる
        + 情報を`パケット(Packet)`と呼ばれる単位に分割して送受信
        + インターネットの世界でその役割を担うのがこの`TCP/IP`

## ポート番号



+ **ポート番号**とは、**コンピュータの中でアプリケーションが情報を待ち受けるための特定の番号(識別子)** のこと
+ TCP/IPによって情報を受け取るアプリケーションは、必ず`待ち受けポート`を決めて情報を待つ
+ コンピュータの中でアプリケーションが情報を待ち受けるための港のようなイメージ
+ TCP/IPプロトコルにおいては、各アプリケーションは一意のポート番号を割り当てられている
+ ポート番号は、**0〜65535の範囲内で定義**される
+ インターネットで情報を届けるにはIPアドレスに加えて、ポート番号まで指定する必要がある。
    + でないと、届いた情報をどのアプリケーションが処理すべきかわからないから
+ 通常、アプリケーションがどのポートで待ち受けるのかは自由に決めることができるが、同じプロトコルでもホストによってポート番号がバラバラだと不便
    + なので、よく使われるプロトコルについては標準で使用するポート番号が取り決められている
    + 代表的なプロトコルで使用されるポートは **ウェルノウンポート(well-known ports / よく知られたポート)** と呼ばれる


### 代表的なウェルノウンポート
|ポート番号|プロトコル|
|:---:|:---:|
|20, 21|FTP(ファイル転送)|
|22|SSH(暗号化されたリモートコンピュータとの汎用通信)|
|23|Telnet(リモートコンピュータとの汎用通信)|
|25|SMTP(メール送信)|
|53|DNS(ホスト名解決)|
|80|HTTP(Webブラウジング)|
|110|POP3(メール受信)|
|443|HTTPS(暗号化されたHTTP)|