【基礎】HTTPリクエスト、HTTPレスポンスとは

 ## はじめに

 Webサイトを閲覧するとき、私たちは普段意識することなくインターネットを使っていますが、その裏では「HTTP（HyperText Transfer Protocol）」という通信ルールが働いています。この記事では、Web通信の基本となるHTTPメッセージの仕組みについて、リクエストやレスポンス、メソッドに触れながら解説します。
 
  ## HTTPとは
  HTTPは、WebブラウザとWebサーバーの間で情報をやり取りするための通信プロトコル（規約）です。
  ユーザーがブラウザでWebページを開くと、ブラウザがサーバーに「リクエスト（要求）」を送り、それに対してサーバーが「レスポンス（応答）」を返します。
  
  URLの先頭に「http://」と表示されているリンクに飛んだり、クリックで画像を表示させたりするには、この一連の要求⇒応答のやり取りが、すべてHTTPメッセージという形式で行われています。
  このやり取りを繰り返し行うことで、Webサイトが閲覧できます。

  ## 2種類のHTTPメッセージ

HTTPメッセージは、ブラウザ（クライアント）とWebサーバーが通信するときに交わす「手紙」のようなものです。HTTPメッセージには大きく分けて以下の2種類があります。

    HTTPリクエスト（要求）：ブラウザからサーバーに送るメッセージ

    HTTPレスポンス（応答）：サーバーからブラウザに返すメッセージ

## HTTPリクエストの構造

HTTPリクエストは、ブラウザからサーバーに必要な情報を要求する際に送るメッセージで、
以下の3つの要素で構成されます。

    ・リクエスト行
    ・ヘッダー
    ・ボディ

### HTTPリクエスト：リクエスト行
リクエスト行は、ウェブサーバーに対してどのような要求をするか、その処理方法が記載されています。
リクエスト行は下記の３つの要素があります。

    ・HTTPメソッド ※詳細はのちほど記載
    ・リクエスト対象のパス
    ・HTTPバージョン
 
**リクエスト行の例**
    <font color="red">GET</font> /<font color="blue">index.html HTTP</font> /<font color="yellow">index.html HTTP/1.1</font>   
    
**内訳**
    <font color="red">HTTPメソッド</font>/<font color="blue">リクエスト対象のパス</font>/<font color="yellow">HTTPバージョン</font>

### HTTPリクエスト：ヘッダー

通信に必要な追加情報が書かれています（たとえば「どのブラウザを使っているか」など）

### HTTPリクエスト：ボディ
フォーム送信などで必要なデータが使われます。

## HTTPレスポンスの構造

HTTPレスポンスは、サーバーからブラウザに必要な情報を返送するメッセージで、
以下の3つの要素で構成されます。

    ・ステータス行
    ・ヘッダー
    ・ボディ

### HTTPレスポンス：ステータス行
ステータス行は、HTTPリクエストに対して、ウェブサーバー内の処理の結果が記載されています。
ステータス行は下記は、３つの要素で構成されています。

 
**ステータス行の例**
    <font color="red">HTTP/1.1</font> /<font color="blue">200</font> /<font color="yellow">OK</font>   
    
**内訳**
    <font color="red">バージョン</font>/<font color="blue">ステータスコード</font>/<font color="yellow">テキストフレーズ</font>

### HTTPレスポンス：ヘッダー

通信に必要な追加情報が書かれています。

### HTTPレスポンス：ボディ
受け取ったHTMLや画像が格納れます。

## HTTPメソッド
HTTPリクエストのリクエスト行の冒頭には、HTTPメソッドがあります。
任意のHTTPメソッドを用いることでどのような処理を要求するか指定することができます。

その中でも特によく使われるのがGETとPOSTです。似ているようで役割は異なります。以下でわかりやすく説明します。

### GETメソッドとは？
GETは「情報を取得する」ためのメソッドです。
たとえば、ニュースサイトの記事を開くとき、天気予報をチェックするときなど、情報を見る操作はすべてGETで行われます。

特徴として下記があげられます。

    ・URLにデータが表示される：たとえばexample.com/search?q=appleのように、検索キーワードなどの情報がURLに含まれます。
    
    ・ブックマーク可能：URLが変わらないため、あとでそのページを再訪するのに便利。
    
    ・安全性に注意：URLに個人情報を含めると、履歴やログに残ってしまうため注意が必要です。

### POSTメソッドとは？
POSTは「情報を送信する」ためのメソッドです。フォームの送信やログイン処理などで使われます。

特徴として下記があげられます。

    ・データはURLに表示されない：送信内容はリクエストの本文（ボディ）に入るため、第三者からは見えにくい。
    
    ・データ量が多くてもOK：画像や長文など、大量のデータも送信できます。
    
    ・何かを「変える」操作に使われる：例えば会員登録、商品の注文など、サーバーの状態が変化する操作にPOSTが選ばれます。

### GETとPOSTの違い

GETではURLにデータが表示されるため、「見るだけ」の操作に使い、
POSTではURLにデータが表示されないため「送って何かを起こす」操作に使います。


| 項目        | GET                             | POST                  |
| --------- | ------------------------------- | --------------------- |
| リクエスト行の形式 | `GET /search?q=apple HTTP/1.1` | `POST /search HTTP/1.1` |
| パス|`/search` | `/search` |
| クエリ|`?q=apple` |URLには通常含めない |
| データ送信 |URL内に付加 | リクエストボディに `q=apple` を入れて送信 |

###  まとめ


| 比較項目   | GET           | POST            |
| ------ | ------------- | --------------- |
| 用途     | データ取得         | データ送信・登録・更新     |
| 使用例     | 検索、一覧表示       | ECサイト等の登録、ログイン、注文     |
| データの送信 | URLの一部として送信   | 本文（ボディ）に含めて送信   |
| 表示     | URLに見える       | 表示されない          |
| 安全性    | 低（URLに見えるため）  | 高（外から見えにくい）     |
| 再読み込み  | 何度も読み込んでも問題なし | 再送信に注意が必要（重複送信） |