web技術の基本用語

アウトプット用

## プロトコル
簡単に言うとコンピュータ同士の**約束、決まり**の事です。
例えば日本のプロトコルは以下があります。
- 交通プロトコルで、車は左側通行
- 電話通信プロトコルで110に電話を掛けると警察につながる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/e720a15a-1498-a0bc-561f-2b5b19442c3d.png)
- 金融プロトコルで、上の写真の金属は100円という価値がある

このように特定の世界での約束のことを**プロトコル**と言います。

webの世界で使われる通信プロトコルの例としては以下のようなものがあります。
web：HTTPプロトコル
メール：SMTPプロトコル
ファイル転送：FTPプロトコル
それぞれ、~~の場合は**ルールで通信しようねってことです。

## ステートフル↔︎ステートレス
2つを紹介する前に言葉の意味から確認しましょう。
stateという単語を直訳すると「状態」という意味です。
つまり通信の状態を維持するか否かということ。

**ステートフル**は、**状態を維持すること**
**ステートレス**は、**状態を維持しないこと**を意味します。
ちなみにWebの通信で使われているHTTPプロトコルは**ステートレス**です！

概念については以下をご覧ください。
例えばスタバで以下のものを頼む際にステートレスとステーツフルではどのようになるでしょうか？
- 抹茶クリームフラペチーノのトールサイズでチョコレートチップ入り

#### ステートレスの場合
![スクリーンショット 2024-11-07 10.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/033e01f8-7669-a5f7-6cdb-c5973eeed413.png)
サイズを聞かれたのでトールサイズと言うと...

![スクリーンショット 2024-11-07 10.51.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/6a993936-6ed3-9d4c-6b0f-f8abb0742414.png)

ステートレスはこのように今までの情報を保持しないのです。
これでは注文できませんね。

#### ステートフルの場合
しかしステートフルでは以下のように注文を覚えてくれるのです。

![スクリーンショット 2024-11-07 10.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/033e01f8-7669-a5f7-6cdb-c5973eeed413.png)
![スクリーンショット 2024-11-07 10.54.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/eb8962b4-9f4e-7308-2262-c8778ebb7956.png)
![スクリーンショット 2024-11-07 10.57.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/ac82fb43-a4d4-a8e6-d863-91caa3b2ebd7.png)

このような通信の状態のことを**ステートフル、ステートレス**と言います。

## リクエスト↔レスポンス
**リクエスト**とは、Webブラウザ側がWebサーバーに対して行う**要求**の事。
**レスポンス**とは、Webサーバー側がWebブラウザ側に対して行う**要求に対しての応答**の事。

例えば[google.com](https://www.google.com/)が表示されるまでの流れを解説します。

![スクリーンショット 2024-11-06 23.48.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/7f2337d1-9cb8-17b2-bed2-745d7df53033.png)

順番は①→②→③で行われます。
1. Webブラウザ側が「google.com」をください！と要求します
1. Webサーバー側が①に対して処理を行います
1. 最後にWebサーバー側が「これがgoogle.com」だよ！と要求に対しての応答を行い最終的にWebブラウザ上でgoogle.comが出力されます

以上を踏まえた上で、HTTPではリクエストとレスポンスに以下のようなものがあります。

### リクエストの例
- GETリクエスト
→Webサーバーから情報を取るための要求
- ヘッダー情報
→クライアント側からサーバーに送られる情報や認証、リクエスト内容の事
Accept-Language, Cookie, Content-Typeなど
### レスポンスの例
- ステータスコード
→サーバーから返ってくる3桁の番号。レスポンス結果によって番号が変わる
## CookieとSession
### Cookie
Cookieは簡単に言うと情報を覚えておいてくれるもの
HTTP通信はステートレスな通信の為、Cookieなしでは通信の度にクライアント側の情報が必要になってしまいます。

そこで活躍するのがCookieです！ショッピングサイトでログイン後、カートに商品を追加して数分後、再びショッピングサイトに訪れてもカートに商品が残っているのはCookieがあるからです。

例　X
![スクリーンショット 2024-11-07 9.52.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/6bf05165-4adb-e156-259d-f1d7b6d748a8.png)
順番は①→②→③で行われます。
Xにログインして唐突に大谷翔平の発信が気になりプロフィールを見たくなりました。
その後、大谷翔平のプロフィールをクリックしてCookieなしの場合、以下のようになります。

[Cookieなし]
![スクリーンショット 2024-11-07 9.54.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/87cf0bc9-531d-b198-3598-3b16d212483d.png)

純粋に不便ですよね。
「さっきログインしたはずなのに...」
こんな時にCookieがあるとすんなり大谷翔平のプロフィールを見ることができます

[Cookieあり]
![スクリーンショット 2024-11-07 10.12.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/5a6c0b77-c7c6-cdd8-088c-e9d111202df6.png)
<br>
これはCookie使ったほうがステートフルになり便利ですよね！

ただCookieには欠点があります。
それはセキュリティ面で弱いと言うことです。
例えば、ショッピングサイトのCookieにユーザID、パスワード、クレカ情報を保存しておくと
少しセキュリティに詳しい人ならば簡単にログインと購入することができます。

### Session
そんなCookieの脆弱性のために考えられたのが**Session**です

![スクリーンショット 2024-11-07 15.00.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/8af0b6bc-2bcb-d098-2b0c-f95cb7996093.png)

概念としては上記の画像です。
**SessionId**でクライアント側からの情報を**サーバー側**で管理している状態です。

ただ、ずっと1つのSessionIdでしか使えないようにすると意味がないので
一定時間しか使えなくします。
そうすることで再度クライアント側からリクエストが来た際に新しいSessionIDを発行してセキュリティ面を強固にすることが可能なのです。

## ポート番号
ポート番号は、ネットワークとコンピュータ間でのデータ転送時に使用される「玄関」に割り当てられる識別番号です。

役所を例とすると役所の住所がまでがIPアドレス目的の課がポート番号です。

![スクリーンショット 2024-11-07 15.45.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918502/04722ea6-c771-2a3a-c405-d23c6352f21d.png)

例えば役所の都市開発課に書類を提出したい場合は
住所の最後に「385」をつけると
役所の受付が都市開発課に書類を渡してくれるってことです。

これをネットの世界でもどの玄関口に通信したいかをわかりやすくするために使われています。

| プロトコル | ポート番号 |
|:-:|:-:|
| 20,21  | FTP(ファイル転送)  |
| 25  | SMTP(メール送信)  |
| 80  | HTTP(Webブラウジング)  |
| 443  | HTTPS(暗号化したHTTP)  |