HTTP通信に関して

HTTP通信について初学者の方に説明する用として例え話を思いついたのでメモっとく。
感覚だけ掴んでもらうための説明。

## HTTP通信
そもそもHTTP通信ってなんやねんというと、インターネットを使ってどこかのサイトにアクセスする時に、まずブラウザ(Chrome, Safari, IE)を起動して検索窓に何かしら文字を打って検索ボタンを押すと思う。
例えば、`Qiita`とか。

そうすると何件も検索結果が出てきて、お目当のサイトにアクセスすると思う。
その時に、ブラウザの上の方に表示されてるURLが変化するのだが、このURLがよく言うリクエストで、表示された結果がレスポンスである。

要するに、ブラウザからサーバにリクエストが飛んで、サーバから返ってきたレスポンスを表示するのが、HTTP通信の基本的なプロセスである。
例えば、ホテルの予約をする時に電話で問い合わせをして、予約可能であれば予約してもらうというような、一連の問い合わせのプロセスのこと。

## 通信プロセス
ざっくりとHTTP通信がわかったと思うので、URLとリクエストの対応関係を解説しながら、もう少し詳細に説明する。
例えば、ある予約システムに対して以下のhttpリクエストで予約状況の確認を行うとしよう。
これをプログラミングと実際にホテルに行って確認する方法の関係性で説明する。
実際のリクエストやレスポンスはもっと複雑だが、分解すると以下の要素で構成されてる事に代わりはない。

### メソッド
先ほど、`このURLがよく言うリクエスト`という言い方をしたけど、実はリクエストの種類はこれだけではなくていろんな種類のリクエストの仕方がある。これを`HTTPメソッド`という。
例えば、先ほどの`Qiita`を表示する例は人間の言葉で言うと、**Qiitaのbelionのページを見ーせて！** だがその他にも、

- **Qiitaに新しい記事を投稿して！**
- **Qiitaにさっき投稿した記事を編集したい！**
- **Qiitaにさっき投稿した記事を削除したい！**

とか色々ある。
このようなリクエスト、もう少し噛み砕くと**お願いの種類**がHTTPメソッドだと考えてくれればいい。
じゃあ、ざっくりとHTTPメソッドの種類を紹介していきましょう。

#### GET
最もよく使われるリクエストメソッド。**○○○見せて！ちょうだい!**って時に使います。まさにGET。

#### POST
データを登録したり投稿する時に使うリクエストメソッド。**○○○登録して！投稿して!**って時に使います。

POSTを使った場合は、**リクエストの詳細な内容はURLには含まれません**。なのでURLだけ見てもどんなリクエストをしたいのかは分かりません。

**じゃあ、どこに入るの？**って言うと、**リクエストボディという部分**に含まれます。

これは例えばアカウントの作成ページとかで、メールアドレスとパスワード、年齢とかを入力して送信ボタンを押すと、ブラウザがリクエストを作ってくれて入力した内容をリクエストボディに入れてサーバーにPOSTでリクエストしてくれます。

ブラウザ頭良いですね。

#### PATCH
データを編集したり更新する時に使うリクエストメソッド。**○○○更新して!編集して!**って時に使います。POSTでお願いすることも多い。

リクエストボディの使い方はPOSTと同じ。

#### DELETE
データを削除する時に使うリクエストメソッド。**○○○消して！滅して!**って時に使います。まさにDELETE。POSTでお願いすることも多い。

DELETEでお願いする場合はURLに削除したい対象のID(一意になる名前)を指定する。

## リクエストとレスポンス
ここからは分かりやすい例を使ってブラウザとサーバーのやりとりを説明していく。
代表的な`GETリクエスト`と`POSTリクエスト`について説明するよ。

### GETリクエスト
例えば、`HOGEホテル`に`2018/10/10`の空席確認をするとしよう。
そのためのURLが下記のようであったとする。

```
http://hoge.hotel.com/vacancy?date='2018/10/10'
```

URLを分解して説明すると、

- `http` : 問い合わせ方法(プロトコル)。 例) 電話、メールとか
- `hoge.hotel.com` : 問い合わせ先(ドメイン)。 例) `HOGEホテル`
- `vacancy` : 問い合わせ内容(ディレクトリ)。 例) 空席確認
- `date='2018/10/10'` : 問い合わせ詳細(パラメータ)。 例) 日付

このようなリクエストに対して、サーバーからは`空室ですよ`や`埋まってます`という返答が返される。

### POSTリクエスト
次に、予約確認ができたので、実際に`HOGEホテル`に`2018/10/10`に`hoge`という名前で予約をするとしよう。
そのためのURLとリクエストボディが下記のようであったとする。

URL

```
http://hoge.hotel.com/reservation
```

リクエストボディ

```
{ "name":"hoge", "date":"2018/10/10" }
```

URLを分解して説明すると、

- `http` : 問い合わせ方法(プロトコル)。 例) 電話、メールとか
- `hoge.hotel.com` : 問い合わせ先(ドメイン)。 例) `HOGEホテル`
- `reservation` : 問い合わせ内容(ディレクトリ)。 例) ホテル予約

リクエストボディを分解して説明すると、

- `date='2018/10/10'` : リクエスト内容(ボディ)。 例) 日付
- `name='hoge'` : リクエスト内容(ボディ)。 例) 名前

このようなリクエストに対して、サーバーからは`予約できましたよ`や`予約できませんでした`という返答が返される。

### レスポンス
上記のリクエストに対してホテルからなんらかの返答がくるはず。それがレスポンス。
レスポンスには、　`HTML`,`XML`,`JSON`,`IMG`などなどいろんなタイプがある。
お問い合わせの返答が、電話でくるのか、メールでくるのか、郵送でくるのか、といったような違いである。

#### HTML

```html
<!DOCTYPE html>
<html>
  <body>
    <h1>reservation</h1>
    <p>true</p>
  </body>
</html>
```

#### JSON

```json
{
 "body" : {
   "reservation" : true
 }
}
```

#### XML

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<body>
  <reservation>true</reservation>
</body>
```

## HTTP通信のデメリット
上記のHTTP通信は便利だけど弱点があって、通信が保護されていないため、ブラウザとサーバとのやり取りが丸見えになってしまう。
例えば、ログインする時の名前やパスワードなどもHTTP通信であれば第三者が割と苦労もせずに傍受できてしまう。

### HTTPS通信
そこで、HTTP通信を暗号化して第三者が解読できない様にした通信がHTTPS通信という。
Chromeなどで保護された通信ですとアドレスバーに表示されるものはHTTPS通信。

## 最近の動向
今までだと、ログインや決済などの秘匿すべき情報通信に関してだけHTTPSを使い、他のページではHTTPで通信することが多かったが、今ではどのサイトからどのサイトに遷移したか、何を検索したかって情報も有益な情報であるとみなされてくる様になったので、全てのページでHTTPS(常時SSL)で通信することが求められる様になってきてる。

最近はGoogleが明確にSEOでもHTTPS通信を優遇しますよって言ってるし、HTTPからHTTPSに変えてねって風潮になってるので、合わせて覚えておくといいと思う。