「GETメソッド」と「POSTメソッド」の意味と違い

HTMLでプログラミングする時、初めてformタグを使ったら、ある疑問が出て来ました。
formタグのactionは「GET」メソッドと「POST」メソッドどちらを使った方が良いのか、という疑問が頭に浮かんだことはないでしょうか。
その疑問に答えるため、今回は「GETメソッド」と「POSTメソッド」の意味と違いについて説明します。

# 目次
1. HTTPリクエスト
1. GETメソッド
1. POSTメソッド
1. GETメソッドとPOSTメソッドの違い
1. GETメソッドとPOSTメソッドの使いタイミング


## HTTPリクエスト
GETとPOSTは、どちらもHTTPのリクエストメソッドです。
では、HTTPのリクエストとはなんでしょうか。

![擷取1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725189/2edaff9d-1624-621e-009d-e18aa62c25aa.png)
「HTTPリクエスト」とググって大体はこんなイメージが出てくると思いますが、少し分かりにくいかもしれません。では、擬人化をしましょう！
![擷取2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725189/19a48aa2-9c65-2896-cf2d-7285396e5ba9.png)
左側は大目という人（ユーザー）です。右側はサーバーという人です。
二人は会話しています。
大目さんはサーバーさんに一つお願いがあります。
そして、「サーバーさん、OOページを開いて！」と大目さんが言いました。
![擷取3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725189/30d1f5f5-e5a5-537d-ea16-37fde48e3237.png)
サーバーさんは大目さんのお願いを聞くと、OOページを準備して、大目に送ります。
「大目さん、こちらはOOページです。どうぞ！」とサーバーさんが大目さんに返事しました。

以上の会話の流れは、HTTPのリクエストとレスポンスです。
話を戻して、GETとPOSTどちらの簡単な定義もHTTPのリクエストです。
これから、詳しく説明します。

## GETメソッド
GETという英語の意味は、「取得する」や「受け取る」などです。
HTTPでのGETの意味と上の英語の意味は大体同じです。
ただ、HTTPでのGETは、Webサーバーにリクエストをして、Webサーバーからのレスポンスで欲しいものを受け取るという意味です。
もっと、詳しく説明すると、GETメソッドの仕組みは「<font color="Red">ユーザーのお願いは、HTTPのGETメソッドを通して、__お願いの内容がURLにくっつけて__、Webサーバーに送ります</font>」という意味です。

ポケモンで例えると、GETメソッドはポケモンでの「モンスターボールでポケモンの名前（お願い）を貼って、ポケモンゲットする」みたいです。
![擷取.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725189/1e3104fe-d35f-c190-9ece-ac7365d2b92b.png)
例えば、ピカチュウをゲットしたい時、まずモンスターボールの上でピカチュウという名前のシールを貼って、ポケモンにモンスターボールを投げてゲットするというイメージです。


ここのポイントは、「お願いの内容がURLにくっつけて」（名前のシールを貼って）ということです。
そうすると、<font color="Red">__URLの上でGETの内容（お願い）が見えます__</font>。

以下はGoogle検索の例です。
![圖片1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725189/8cd49a9a-4d66-9f63-7320-42c2d64c556b.png)
ポケモンとをググると、上のURLのところは「search?q=ポケモン」という文があります。
この意味は「ポケモンを検索しました」です。

## POSTメソッド
ここのPOSTの英語の意味は、「届ける」や「送る」などです。
HTTPでのPOSTは、Webサーバーにリクエストを送るという意味です。
手紙を届けると例えると、<font color="Red">ユーザーはPOSTメソッドを通して手紙の中でお願いを書いて、__封筒に入れて締めて__、Webサーバーに送る</font>というイメージです。
ポイントは、書いた内容は封筒に入れて締めるということです。
だから、外側からはユーザーのお願いは見えません。
では、POSTメソッドはどこにありますか。
答えはHTTPのBodyの中です。
だから、<font color="Red">__URLの上でPOSTの内容（お願い）が見えません__</font>。

例えば、Qiitaのログイン画面
![圖片2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725189/1437bb73-c26a-3293-a68f-1b9c3e0e5f5a.png)
ここのPOSTメソッドは「Log in to Qiita」というボタンに付いています。
IDとパスワードを入力して、「Log in to Qiita」というボタンを押すと以下の反応が出てきます。
![圖片3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725189/6bebc4f4-d6fd-f29b-85ce-af6aace71da3.png)
URLのところを見てください。
さっき入力したIDとパスワードの内容はURLで見えません。

## GETメソッドとPOSTメソッドの違い
+ <font color="Red">__URLでリクエストした内容は見えるかどうか__</font>。
    __GET__ メソッドはURLでリクエストした内容が __見えます__。
    __POST__ メソッドは __見えません__。

## GETメソッドとPOSTメソッドの使うタイミング
GETとPOSTの基本的な機能は大体同じだから、どちらを使ってもいいです。
しかし、違いはURLでリクエストの内容が見えるかどうかということです。
この違いはとても重要です。
例えば、ログインする時、もしログインとのリクエストボタンはGETメソッドを使うと、ユーザーのパスワードは見えるになってしまいます。そして、パスワードを漏洩してしまうかもしれません。
だから、ログインのリクエストボタンは必ずPOSTメソッドを使います。

「そう言うと、セキュリティーのため全部POSTメソッドを使っていいじゃん！
GETメソッドはいりませんね！」とは言えません。

URLでリクエストを見られる点にもメリットがあります。
例えば、検索したページをお気に入りをしたい時は、そのページのURLを保存する必要です。
そのため、検索した内容（リクエストの内容）は必ずURLで書かなければなりません。
だから、基本的に検索ボタンはGETメソッドを使います。

+ まとめ
    1. __GETを使うタイミング__
        - URLでリクエストした内容を表示したい時
        - お気に入りをしたい時
        - 再読み込みの必要がある時
        - SEOを作りたい時（クロールを行いたい時）
        例）検索ボタン

    1. __POSTを使うタイミング__
        - URLでリクエストした内容を見せたくない時
        - 個人情報に関すること
        - セキュリティー性を高める時
        例）ログインやパスワードがある場合
       
    * 注意！
    URLの長さは限界があります。
    そのため、リクエストの内容は長い場合は、POST文を使った方がいいです。
    理由はGETメソッドをつかうと、リクエストの内容はURLにくっつけるからです
    POSTメソッドの長さにも限界はありますが、POSTメソッドの長さの限界はURLのより長いです。

## 参考した資料
1. <a href="https://wa3.i-3-i.info/diff7method.html">「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典, 「GETメソッド」と「POSTメソッド」の違い</a>
1. <a href="https://www.sakurasaku-labo.jp/blogs/seo-get-post#:~:text=GET%E3%81%A8POST%E3%81%AE%E6%9C%80%E3%82%82,%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%81%8C%E4%BB%98%E4%B8%8E%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82&text=%E4%B8%80%E6%96%B9%E3%80%81POST%E3%81%A7%E6%A9%9F%E8%83%BD%E3%81%99%E3%82%8B,URL%E3%81%AB%E9%81%B7%E7%A7%BB%E3%81%97%E3%81%BE%E3%81%99%E3%80%82">SEO研究所サクラサクラボ, GETメソッドとPOSTメソッドの違いとSEO面からの使い分け</a>
1. <a href="https://medium-company.com/http-get-post-%E9%81%95%E3%81%84/">ITを分かりやすく解説,　HTTP GETとPOSTの違い</a>