Webプロデューサーのノート

デジタルマーケティング、Webサイト開発を生業としているWebプロデューサーのTipsとかポエムとか

Webに携わる人なら非エンジニアも知っていて欲しい、HTTPのGetとPost

Webの仕事をしている人はHTTPのGet、Postは絶対覚えるべきです、エンジニア以外も。

反論は受け付けません。なぜなら弊害があるからです。

HTTPとは?

HTTPというのはHyper Text Transfer Protocolの略になり、Webサーバとブラウザ(ChromeやSafariなど)とのデータフォーマット通信方法ルール・手順を定義したものになります。

最後のProtocolというのは規約とか手順といった意味があるので、

「あいつとはコミュニケーションのプロトコルが合わない」

って言っとけばIT業界人っぽく見せることが可能です(´▽`)

HTTPのデータフォーマット

その中のデータフォーマットでメジャーなのが、みなさんご存知のHTMLになるわけです。

もちろん画像や動画なんかもデータとして認められているので、文字だけじゃなくて綺麗な写真がみえたり、Youtubeで動画が見れたりするわけです。

HTTPの通信方法

そして通信方法の中に今回のテーマのGet、Postが定義されています。 そして通信というのは、Webサーバとお使いのPCやスマホで利用しているブラウザ間の通信を指します。

Getとは?

これは文字通りですが、情報を取得する(ゲッツ!)という意味です。

この時、

  1. ブラウザがWebサーバに対して目的のURLの情報(www.hogehogehoge,xyz/get.html)を要求する。
  2. Webサーバがブラウザに対して、要求された情報を送る。

すごく当たり前のように聞こえますね。 そして我々がブラウザでやっている操作のほとんどはGetになります。

大事なのはPostとの違いなので、先に進みます。

Postとは?

Postとはサーバに対して情報を送信することを指します。 ここで気付いたと思いますが、GetやPostの主語はブラウザなどのクライアント側になります。 ブラウザがGetする(情報を取得する)、ブラウザがPostする(情報を送信する)ということです。

Postを使う時の代表的な例として、通販サイトで商品を購入するために、メールアドレスや住所などの個人情報を入力するケースがあります。 もちろんテキストだけでなく、HTTPは動画や画像も扱えますから、最近はそれらを送信することが多いかもしれません。

この時の動きとして、

  1. 会員情報を入力するための画面(www.hogehogehoge,xyz/post.html)を要求する。
  2. Webサーバがブラウザに対して、要求された情報を送る。ここまでGetと一緒。
  3. メールアドレスや住所などを入力して、Webサーバに対して情報を送信する。そのときのURLは1.と同じかもしれないし、違うかもしれないが、URLには入力した情報は含まれない。
  4. Webサーバ側で受け取った情報をもとに、新たな情報を返却する。入力情報が間違っているかもしれないし成功するかもしれないので、入力内容によって返却内容は異なる。

GetとPostの違い

Getで情報を取得する際に、情報を区別するためのキーは基本的にURLだけです。 そしてWebの特徴であるリンクはURLで情報がユニーク、一意ということでが成立しています。

ですから

“www.hogehogehoge,xyz/a.html”

“www.hogehogehoge,xyz/b.html”

で同じ情報を表示されても困りますし、アクセスするたびに違う情報を送信されても困ります。

当たり前ですけど、ちゃんとルールがあるから気軽にリンクが張れるわけです。

一方Postは、ユーザが入力した情報をもとに画面の情報を切り替えて返却します。ただし、入力情報によってURLが変わるわけではないです。

URLが変わらないのに、表示されている画面が違うとも言えます。

Postのありがちなミスとその弊害

楽天の検索画面を思い出して欲しいのですが、検索条件に商品のカテゴリやブランド、あとフリーのキーワードや送料無料の条件など、いろんな条件が入力できると思います。 それらの条件は確かにユーザが入力するものですが、基本的には情報を取得する、Getする行為なので、Getで書くのが正しいです。

これをユーザが入力するからといって、Postで書いたらどんな弊害があるか?

先に述べた通り、ユーザが入力した情報はURLには含まれませんから

  • リンクを友人などに共有しても同じ情報が見れません
  • ブラウザの閲覧履歴というのは基本的にはURLの履歴です。ブラウザの[戻る]ボタンで前の情報を出そうとしてもうまくいきません。使いにくいUIになってしまいます。
  • Googleなどのクローラがサイトを巡回しても、URLで一意な情報が作れないわけですから、適切にインデックスを作成できません。つまりSEO対策が出来ていません
  • URLで一意にならないわけですから、どの画面が良く見られているかなどのアクセス解析が出来ません

結構な弊害がありますよね。Webサービスとしては完全にアウトです。

今ではほとんど見かけなくなりましたが、これを理解していないエンジニアがいることもまた事実です。

なのでエンジニアに発注する側も理解すべきです。

また、Postはブラウザの[戻る]ボタンに弱いことも言及しました。 例えば会員登録などの仕組みは複数画面にわたる場合があり、[戻る]ボタンをユーザが使ってしまうケースがあると思います。 その対策にPRGパターン(Post Redirect Getの略)と手法があります。

これ非エンジニアに理解はつらいんですが、これも見ておくことをお勧めします。

itpro.nikkeibp.co.jp

もう一声!

HTTPのCookieとSessionについても書きました。 これもWebに携わる人は理解すべき内容です。

kinjo.hiroshi.world

理解すると、むしろ武器になりますので是非ご一読ください!