フルスタックエンジニアのノウハウ
2020.03.07    2020.03.17

Web開発の基本!リクエスト/レスポンスを理解する

Web開発の基本!リクエスト/レスポンスを理解する

こんにちは、徳田 啓です。
Webプログラマー歴20年、【フルスタックエンジニア マスター講座】を運営しています。(生徒数1,800名突破)


今回は、Webプログラミングの基本である「リクエスト/レスポンス」についてご説明します。

この考え方は、Webプログラミングを行う上で「超基本」となりますので、この機会にしっかり理解しておきましょう!


この記事の動画版はこちら

チャンネル登録お願いします!


サーバーとクライアント


まず、Webプログラムは、インターネット上にある「サーバー」の中に設置されています。

そして、世界中のユーザーは、自分のPCのブラウザからURLを入力し、サーバーのWebプログラムにアクセスします。

この、各ユーザーのPCのことを「クライアント」と言います。

Webプログラムでは、クライアントとサーバーが要求応答のやり取りを繰り返しています。


※サーバーについて分からない方はこちらの記事も併せてご覧ください。

関連記事

プログラマーのためのサーバーの基本【基礎編】


要求(リクエスト)と応答(レスポンス)


例えば、ユーザーがブラウザから「このページを見せて」という【要求】を行うと、サーバーはそのページのHTMLを返してくれます。【応答】

そして、クライアントのブラウザでそのHTMLが解析され、ユーザーに画面として表示されます。


さらに、表示された画面上でリンクをクリックしたり、フォームの送信ボタンをクリックすると、その「要求」がまたサーバーに送信され、それに対する「応答」が返されるといった具合です。

Webアプリケーションは、基本的にこの繰り返しで動いています。

要求(リクエスト)を送って、応答(レスポンス)が返される、この1回分のやり取りを「1リクエスト」と言います。

ブラウザで画面遷移が行われるとき、毎回このリクエストが発生しているのです。

これが画面遷移の仕組みです。

実際のリクエストの手段としては、主に以下の方法があります。
  • ・URLに直接アクセスする。(アドレスバーに直接URL入力、ブックマークからアクセス)
  • ・画面内のリンクやボタンをクリックする。
  • ・入力フォームに入力して送信ボタンをクリックする。

サーバーはこれらのリクエストを受け取り、その要求に応じて以下のような処理を行います。
  • ・そのままHTMLを返す。
  • ・DBからデータを取得してHTMLを生成して返す。
  • ・要求と一緒に受け取ったデータを元に、DBに登録・更新・削除して結果を返す。

この時、サーバーが処理を行うために、クライアントから何らかのデータを受け取らなくてはならない場合があります。

例えば、DBからデータを取得する際に「どのデータを取得すれば良いのか?」を判別するための「ID」や、DBに登録するための「ユーザーが入力したデータ」などです。

こういった、サーバーに受け渡すデータのことを「パラメータ」と言います。

リクエストの種類


技術的な観点で言うと、リクエストの送り方には2種類あります。

それが「GETメソッド」と「POSTメソッド」という方式です。

両者の違いは、サーバーへのパラメータの渡し方にあります。

GETメソッド


GETはURLの末尾にパラメータをくっつけて渡す方法です。

以下のような「?」「&」がたくさん付いたURLを見たことがあると思います。
  • http://example.com/item/modify?id=10&type=12

これはURLの「?」以降がパラメーターになっており、【パラメータ名】=【値】がセットになっています。(各パラメーターセットは「&」で区切られます)

上の例の場合は、以下のような構成になっています。

  • 【URL】 http://example.com/item/modify
  • 【パラメータ1】id 【値】10
  • 【パラメータ2】type 【値】12

サーバーに対して「id」と「type」という2種類のパラメータを渡しているわけですね。

URLの直接入力、お気に入りからアクセスされた場合、リンクタグからリンクされた場合は、通常このGETリクエストになります。

GETは、URLにパラメータが埋め込まれているので、そのページの状態をブックマーク出来ることがメリットですが、パラメータが丸見えになってしまうので、パスワードや個人情報入力などの重要なパラメータを含むリクエストには向いていません。


POSTメソッド


一方、POSTはパラメータがURLに表示されません。

formタグの属性で「method="POST"」と指定した場合、POST形式での送信となります。

基本的には、入力フォームからのリクエストはセキュリティ上の観点からPOSTを使います。

POSTの弱点は、POSTリクエストによって返されたレスポンスページを「再読み込み(リロード)」したり、そのページに「ブラウザの戻るボタンで戻ったり」した場合、「フォーム再送信の確認」画面が表示されてしまうことです。

これは、ブラウザが勝手にフォームを再送信(POST再送信)することになるため仕方のない確認メッセージなのですが、頻発するとユーザーの利便性が悪くなってしまいます。

例えば、検索ボックスにワードを入力して検索結果が表示される画面などの場合は、その検索結果画面に「ブラウザの戻るボタン」で戻ってくることが想定されますが、検索をPOSTメソッドにしていると、戻る度に上記の確認メッセージが表示されてしまいます。

こういった場合は、フォーム送信でもあえてGETメソッドにします。

こうすることで、再送信のメッセージも表示されませんし、検索結果ページをブックマークすることも出来ます。

Googleの検索もGETメソッドになっていますね。


逆に、本当に再送信されてほしくないような画面(例:注文完了画面など)や、個人情報やパスワードを入力するフォームは必ずPOSTメソッドにします。

サーバーへのリクエスト方法には「GET」と「POST」という2種類の方法があり、上記のように画面のタイプによって使い分ける。ということを覚えておきましょう!

まとめ


  • ・URLにアクセスしたり、リンクをクリックする度にリクエスト/レスポンスが発生。
  • ・リクエスト時は、パラメーターとしてサーバーにデータを渡すことが出来る。
  • ・リクエストにはGET/POSTの2種類の方法がある。

まずはこれらが基本となりますので覚えておきましょう!


おすすめ記事
無料メルマガ配信中