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

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

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

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

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


今回は、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メソッド


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


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


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


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




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


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


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


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


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



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



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



まとめ


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


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



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