HTTPについて


# HTTP 【HyperText Transfer Protocol】 

## 【HTTPとは？】  
- Webサイトを閲覧時にクライアント（Webブラウザ）とサーバ（Webサーバ）間においてWebコンテンツを送受信するためのプロトコル（手順や規約）である。  

## 【HTTPでやりとりするための仕組み】  
①　クライアントにて閲覧したいWebサイトのURLやブックマークなどのリンクをクリック
②　URLやリンク情報にもとづいてサーバに対してデータを要求
　　クライアント「ファイルをくれ！」
③　要求を受け取ったサーバは要求内容を解析
④　解析した結果より、要求されたデータをクライアントへと応答
　　サーバ「ほらよ！」
⑤　クライアントはサーバより受け取ったデータを解析し、Webページとして表示

- 上記の②と④のステップがWebコンテンツの送受信の部分であり、この際にHTTPが利用される。
- クライアントとサーバでのやりとりは「HTTPリクエスト」と「HTTPレスポンス」の2種類のHTTPメッセージが利用される。  

## 【HTTPリクエスト】  
HTTPリクエストは以下の3つの要素で構成されている。  

- リクエスト行  
サーバに対してどのような処理をして欲しいかという要求が記述してある。
- リクエストヘッダー（メッセージヘッダー)  
Webブラウザの種類や対応するデータ形式などの情報が記述してある。
- リクエストボディ（メッセージボディ)  
Webページ内のフォーム欄などに入力したデータを送る時に使用される。  

## 【HTTPレスポンス】
HTTPレスポンスは以下の３つの要素で構成されている。  

- ステータス行  
クライアントから受け取ったリクエストに対して処理の結果を伝える。
- レスポンスヘッダー（メッセージヘッダー)  
サーバの種類や送信するデータ形式などの情報が記述してある。
- レスポンスボディ（メッセージボディ）  
クライアントから送られたデータを格納する場所。  

## 【HTTPメソッド】  
HTTPリクエストを用いてサーバに具体的な要求内容を伝えているのがHTTPメゾットである。
Webサイトを閲覧する際に主に利用されるHTTPメソッドは「GET」と「POST」の２つである。  

| メソッド名 | 説明 |
| --- | --- |
| GET | HTMLファイルや画像といったデータを取得する場合に利用する。|
| POST | フォームに入力したパスワードなどのデータをWebサーバーに転送する場合に利用する。|  

- 「GET」と「POST」の違い  
GETとPOSTではデータの送信方法が異なり、GETはURLの後ろにデータを付与して送り、POSTはHTTPリクエスト内のリクエストボディ内にデータを含めて送る。    
例えば、会員サイトへログインする際にGETではURLにデータが組み込まれるため  
ユーザーIDやパスワードがWebブラウザの閲覧履歴に残ってしまう・・・。  
一方、POSTではリクエストボディ内にデータが組み込まれるため閲覧履歴には残らない。  
そのため、ログイン情報や個人情報をWebサーバーに送る場合はPOSTが利用る。  

## 【ステータスコード】  
HTTPレスポンス内にはHTTPリクエストに対するサーバ内での処理結果が含まれている。それがステータスコードである。
3桁の数字からなり、処理内容によって100番台から500番台までの5つに分類される。 

|  分類   | 処理結果 |
| --- | --- |
| 100番台 | HTTPリクエストを処理中 |
| 200番台 | Webサイトが正常に表示されている |
| 300番台 | 転送処理などの追加の処理が必要であることを通知 |
| 400番台 | Webブラウザのエラーであることを通知 |
| 500番台 | Webサーバのエラーであることを通知 |

## 【メッセージヘッダー】  
HTTPリクエストとHTTPレスポンスはメッセージヘッダーを利用することで、詳細な情報を送信することが可能である。
メッセージヘッダーは複数のヘッダーフィールドと呼ばれる行から成り立っており、それぞれのヘッダーフィールドはフィールド名、フィールド値で構成される。
ヘッダーフィールドは情報の種類によって以下の4つに分けることができる。  

- 一般ヘッダーフィールド  
HTTPリクエストとHTTPレスポンスの両方に含まれる。代表的なものとしてHTTPメッセージが作成された日時を示す「Date』がある。  
- リクエストヘッダーフィールド
HTTPリクエストのみに含まれる。代表的なものとしてWebブラウザの固有情報を示す「User-Agent」がある。サーバはこれを参照してスマートフォンからの接続であればスマートフォン向けのWebサイトを表示するこができる。  

- レスポンスヘッダーフィールド
HTTPレスポンスのみに含まれる。代表的なものとしてWebサーバーの固有情報を示す「Sever」がある。  

## 【実際に確認してみる】   
-  よく利用する[サウナイキタイ](https://sauna-ikitai.com/)にアクセス！ 
[![Image from Gyazo](https://i.gyazo.com/b403757b4674ddb07ae56007972c8e47.png)](https://gyazo.com/b403757b4674ddb07ae56007972c8e47)  
- パス、メソッド「GET」、ステータスコード「200」、プロトコル「h2」、スキーム「https」を確認。  

[![Image from Gyazo](https://i.gyazo.com/c2cf5ad270423e97a20e7170f9576fc2.png)](https://gyazo.com/c2cf5ad270423e97a20e7170f9576fc2)

- レスポンスヘッダーとリクエストヘッダー。「Date」、「Server」を確認。


- ログインしてみる。
[![Image from Gyazo](https://i.gyazo.com/d79d8b63a76c59886090bb0b14fb2255.png)](https://gyazo.com/d79d8b63a76c59886090bb0b14fb2255)  
- パスの変更、ステータス「302」を確認。
- 先日行ったサウナの感想を投稿してみる。
[![Image from Gyazo](https://i.gyazo.com/2fd376ff1807cd56d7eb5fcd32576bc5.png)](https://gyazo.com/2fd376ff1807cd56d7eb5fcd32576bc5)
- メソッド「POST」、データの送信を確認。
- 投稿を削除してみる。
[![Image from Gyazo](https://i.gyazo.com/bf07c387b714d40dc6562ce276863615.png)](https://gyazo.com/bf07c387b714d40dc6562ce276863615)
- メソッド「DELETE」確認。

- URLのユーザーIDを変更してみる。
[![Image from Gyazo](https://i.gyazo.com/2a84a706891c82c5fe9e021c0d626ec5.png)](https://gyazo.com/2a84a706891c82c5fe9e021c0d626ec5)
- ステータス「404」確認。

## 【フォームについて】  
- フォームを使用することにより、クライアントはサーバへデータを送信することができる。  
- 送られたデータはサーバにて処理、保存される。  
- HTML要素を使用する。  

### 【form要素】
- HTMLのでデータを送信する方法を定義する。  
- form要素には属性があり、データ送信時に重要になるのはactionとmethodである。

|属性|説明|
| --- | --- |
|action|どこにデータを送信するかを定義する。値はURLで指定する|
|method|どのようにデータを送信するかを定義する。GETとPOSTを主に利用する|

[![Image from Gyazo](https://i.gyazo.com/4937e078ada8c2840d108a7b599f09f5.png)](https://gyazo.com/4937e078ada8c2840d108a7b599f09f5)

### 【input要素】  
- 入力フィールドやボタンなどのパーツを作成するときに使用する。  
- 属性と入力型を組み合わせて使用する。

|属性|説明|
| --- | --- |
|type|所定の値を指定することで入力欄や送信ボタンを作成する|　　
|name|input要素の名前をしていする|
|value|input要素の値を指定する。テキスト入力欄では初期入力値。ボタンではボタン名を表す|
[![Image from Gyazo](https://i.gyazo.com/d6a278e39584de6f198d89518f5d852d.png)](https://gyazo.com/d6a278e39584de6f198d89518f5d852d)