Web技術の基本3

# はじめに
これからエンジニアとして学んでいくうえで基本となる技術をまとめてみました。
間違い等があればご指摘いただけると幸いです。

# 1.HTTPメッセージ
　HTTP(HyperText Transfer Protocol)は、「Hyper Text」つまりHTMLなどのテキストファイルや、画像などのコンテンツをやりとりするときに使われるプロトコル。
 
 **HTTPの基本的動作**
 1. ユーザー(クライアント)はWebに対してHTTPリクエストを送る
 2. リクエストを受けたWebサーバーはデータを返す 
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1592334/0396e089-4b80-3446-d35b-41d7f5f4a739.png)
　HTTPメッセージは、Webブラウザからの要求である **「HTTPリクエスト」** と、Webサーバーからの応答である **「HTTPレスポンス」** の二種類に分けることができる。

## HTTPリクエスト
WebブラウザからWebサーバーに送っているHTTPリクエストは、
* リクエストライン
* ヘッダー
* ボディー

の三要素で構成されている。

**リクエストライン**
```
GET /index.html HTTP/1.1
```
Webサーバーに対してどのような処理を依頼するのかを伝える情報が含まれている。構成は
* メソッド   : GET
* パス名   : /index.html
* HTTPバージョン : HTTP/1.1

メソッドは具体的にGET(データ取得)、POST(データ登録)、PUT(データ更新)、DELETE(データ削除)等があります。

**メッセージヘッダー**
リクエストに対しての情報や属性について記載されています。
```
Host: localhost:8080
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36
Accept: */*
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: ja,en-US;q=0.8,en;q=0.6
Cookie: user_id=12345678
```

**メッセージボディ**
実際にリクエストで送るデータが入ってくる。
例えば、フォーム欄で入力したテキストデータをWebサーバーに送る目的で使用される。

## HTTPレスポンス
WebブラウザからHTTPリクエストを受け取ったWebサーバーは、リクエストを処理して、その結果を**HTTPレスポンス**として応答する。
構成は下記
* ステータスライン
* ヘッダー
* ボディー

**ステータスライン**
```
HTTP/1.1 200 OK
```
WebブラウザにWebサーバー内での処理の結果を伝える。構成は下記。
* HTTPバージョン/ HTTP/1.1
* ステータスコード/ 200
* フレーズ/ OK

よく見るステータスコード
* 2xx: リクエストが成功した
* 4xx: リクエストに誤りがある
* 5xx: サーバー側のエラー

詳しいステータスコードは下記の記事に

https://so-zou.jp/software/tech/network/tech/http/status-code/

**ヘッダー**
Webサーバーのソフトウェア情報や、返信するデータのタイプ、データの圧縮方法などの情報を伝える。
```
alt-svc: quic=":443"; ma=2592000; v="44,43,39,35"
cache-control: private, max-age=0
content-encoding: br
content-type: text/html; charset=UTF-8
date: Thu, 23 Aug 2018 15:37:28 GMT
expires: -1
server: gws
status: 200
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
```
**ボディー**
具体的なサーバー側からの応答データが返却される。
HTMLや画像など

# 2.HTTPS
HTTPSは安全性を高める！！

# 3.ステートフルとステートレス
　HTTPはシンプルなプロトコルで、特徴として**ステートレス**であるということが挙げられる。

 クライアントの状態を保持して次の処理に反映させるような方式をステートフル、状態を保持せずに次の処理に反映させない方式をステートレス。
　多数のクライアント情報を1台のサーバ内に保持するとサーバに負担がかかり処理が遅くなるので、サーバ上にクライアント情報を保持しない「ステートレス」な設計がWebの原則としてある。

 # 4.Cookie
　HTTPはステートレスなプロトコルであるため、WebブラウザとWebサーバーの一連のやり取りにおいて、状態を保持し、管理する仕組みがない。
 　そのため、ショッピングサイトなどで状態を保持し管理する必要がある場合には**Cookie**と呼ばれるデータが用いられる。

**Cookieのやりとり**
　Webサーバーへ接続してきたWebブラウザに対して、コンテンツなどと一緒にWebブラウザに保存してもらいたい情報をCookieとして送る。
 WebサーバーはHTTPレスポンスに **「Set-Cookie」ヘッダー**を含めることでCookieを送信でき、WebブラウザはHTTPリクエストに **「Cookie」ヘッダー**を含めることで送信できる。

#### セッションCookie
 
　**有効期限が設定されていないCookie**は、Webブラウザが閉じられると同時に削除される。このようなCookieを **「セッションCookie」** と呼ぶ。
 一方、有効期限が設定されたCookieは、Webブラウザを閉じても削除されず、有効期限が来るまでWebブラウザに残る。CookieはWebブラウザの識別にも利用されるため、盗まれると他人になりすまされることがある。そのため、ショッピングサイトなどでは、セッションCookieがよく利用される。

# 5.セッション
　WebブラウザとWebサーバーのやりとりにおいて、一連の関連性のある処理の流れを **「セッション」** と呼ぶ。
　例えば、ショッピングサイトで商品を買う場合の「商品を選ぶ」→「商品をカゴに入れる」→「商品を購入する」といった処理の流れがセッションという。

#### セッション管理
　Webサーバーへのアクセスは一台のWebブラウザだけでなく、多数のWebブラウザから行われる。そのため、あるWebブラウザからの処理を関連性のある一連の処理（=セッション）として扱いたい場合は、Cookieを用いて施ションを管理できます。
　セッション管理において、Webブラウザを識別するための情報を「**セッションID**」と呼び、セッションIDはWebサーバーで生成され、Cookieに含めてWebブラウザに送信される。WebサーバーからセッションIDを受け取ったWebブラウザは、次回以降、CookieにセッションIDを含めて処理を行うことで、Webサーバーとのセッションを維持できる。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1592334/199b7a00-e01a-56e1-5cf3-a496d2b47183.png)