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

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

JSON

{
 "body" : {
   "reservation" : true
 }
}

XML

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

HTTP通信のデメリット

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

HTTPS通信

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

HTTP通信に関して