Help us understand the problem. What is going on with this article?

【PHP超入門】HTTP(GET・POST)について

はじめに

PHPでメールフォームや掲示板などを作る前にWebサイトがどのような仕組みで表示されているかを理解する必要があります。
役立つというレベルではなく、必ず理解しておく必要があります。

おそらく、初心者の方は、自分が書いたコードをエラーなく動かすことに必死かと思います。(偉そうなことを言ってますが、私も同じです(´ω`;))
実際にWebサイトがどのような仕組みで表示されているかを理解していなくても、書いたコードは動作します。
そのため、なぜ理解する必要があるのかわからないという方もいると思いますが、基礎を理解する恩恵は、非常に大きいです。
Webページがどのような仕組みで表示されるのか理解することで、Webページが表示される速度を改善することができたり、メールフォームや掲示板などのWebアプリケーションを作るときに、どのようなことに気をつけるべきかもわかるようになります。

私自身、未熟ですので説明に誤りがあるかもしれません。
そのときは、ご指摘ください((_ _ (´ω` )ペコ
この記事は、HTMLとPHPの変数と配列の知識がある方が対象です。
変数と配列について理解していない方には難しい箇所もあるかもしれません。
わからない箇所があれば、各自で調べるか、読み飛ばしてください。

今回、HTTP、GET、POSTについて学ぶために

という流れでまとめてみました。

第1章のHTTPについて学ぶ前に、Web技術に関係する団体について理解しておきましょう。

IETFとRFCについて

Webの技術を知る上で、IETFとRFCについては理解しておく必要があります。

IETF(Internet Engineering Task Force)とは、インターネットで利用される技術の標準化を推進する組織の一つです。
IETFで決定された規格は「RFC」(Request For Comments)と呼ばれる文書にまとめられ、公開されています。
各規格には通し番号が与えられ、「RFC 2616」のように表記します。

簡単に言えば、IETFという組織がインターネット技術の決まり事を定め、その決まり事を文書化したものをRFCと呼んでいるということです。

この先、Web技術を学ぶときに必ずRFCが出てきますので、今のうちRFCがどのようなものか理解しておきましょう。
この記事でもRFCのどの番号に該当する内容なのか、記載しています。
詳しい技術仕様を確認したい方は、RFCの文章をご確認ください。

IETFとRFCについて詳しく知りたい方は「IETFとRFC - JPNIC」をご覧ください。

IPAについて

IPAとは、独立行政法人情報処理推進機構のことです。
Information-technology Promotion Agency, Japanを略してIPAと呼ばれています。
情報処理に関する国家試験を実施したり、コンピュータウイルスやセキュリティに関係する調査・情報提供を行っている団体です。
この先、ITやWebに従事する方なら、IPAについて必ず目にすることがありますので、覚えておきましょう。

今回の記事に出てくる団体のみ紹介しております。
WebやITに関する団体は、他にも W3C など様々な団体があります。
興味がある方は、Wikipediaの 標準化団体 (コンピュータと通信) をご覧ください。

それでは、第1章のHTTPについて学んでいきましょう。

第1章 HTTPについて

Webページってどのように表示されるの?

ブラウザにURLを入力するとWebページが表示されます。
クライアントサーバーでデータのやり取りをすることでWebページが表示されます。
クライアントとは、端的に言えば、私たちが使っているパソコン(ブラウザ)のことです。
サーバーとは、Webページのデータ(HTMLファイルや画像ファイルなど)が保存されているパソコンのことです。

クライアントがサーバーへ「このURLのWebページのデータをください」と要求することをリクエストと呼びます。
クライアントからの要求に応じて、サーバーからクライアントへWebページのデータを渡すことをレスポンスと呼びます。

pic_1_1.png

下記のようなWebページにアクセスしたときに、どのようなやり取りをしているのか確認してみましょう。

pic_1_2.png

大体ですが、Webページを表示するのに下記のようなやり取りをしています。

pic_1_3.png

図の通り、リクエストとレスポンスを繰り返すことでWebページが表示されます。
ここで注目してほしいのが、HTMLファイルをもらった後に、表示する画像の数だけリクエストとレスポンスを繰り返しております。
一見すると1ページという感覚なので、画像なども含め一度にクライアントとサーバーでやり取りしていると思いがちですが、HTMLファイルから読み込んでいるファイルの数だけリクエストとレスポンスを繰り返しております。

クライアントとサーバーがやり取りするときにクライアントが好き勝手な記述でリクエストしてもサーバー側は理解できません。
逆もまた然りです。
そのため、リクエストまたはレスポンスするときには、○行目にはこのような内容を記述しましょうなどの決まり事があります。
それがHTTPです。

HTTP(Hypertext Transfer Protocol)とは

HTTPについては、入力したことある方も多いかと思います。
http://www.yahoo.co.jp/と入力すれば、ヤフーにアクセスできます。
この最初に入力したhttpのことです。
先ほども説明しましたが、HTTPはリクエストとレスポンスするときの決まり事です。
このHTTPについてもう少し詳しく見ていきましょう。

HTTPは Hypertext Transfer Protocol (ハイパーテキスト・トランスファー・プロトコル)の略です。
ハイパーテキスト(Hypertext)とトランスファー(Transfer)とプロトコル(Protocol)の3つに分けて意味を考えてみましょう。
ハイパーテキストとは、端的に言えばHTMLなどで書かれたファイルのことです。
トランスファーは、渡すという意味です。
プロトコルは規約や決まり事という意味です。
つまり、HTTPとはHTMLファイルなどを渡すための決まり事という意味です。

HTTPで定められた決まり事に従うことで、クライアントとサーバーで意思の疎通ができるようになっています。
HTTPには、下記のバージョンがあります。

pic_table_http.jpg

HTTP/0.9から始まり、より便利に、より速くという感じでバージョンアップしています。
今は、HTTP/1.1で通信することが多いです。
2015年5月にRFCとして公開されたHTTP/2は、これから普及していくと思います。
HTTP/2は、従来のリクエストとレスポンスの繰り返しを効率化することでWebページの表示速度を改善しているそうです。
この記事では、各バージョンの詳しい説明はありません。
ここでは、HTTPには、いくつかバージョンがあり、RFCとして公開されているということだけ覚えておきましょう。
各バージョンによる違いについて、興味のある方は調べてみてください。
尚、今回説明している内容は、主にHTTP/1.1までの内容になります。

次は、実際のリクエストとレスポンスの内容を確認してみましょう。

実際のリクエストとレスポンスの内容を確認する

pic_1_2.png

先ほども出てきた上図のWebページ(以下、吾猫ページ)を表示したときに、どのようなリクエストとレスポンスがされているのか確認してみましょう。
吾猫ページのコードは下記です。
わかりやすさを重視するためにCSSなどの無駄な記述は省略しています。

吾猫ページ(neko.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>吾輩は猫である</title>
</head>
<body>
<h1>吾輩は猫である</h1>
<p>名前はまだ無い。</p>
<ul>
    <li><img src="neko1.jpg"></li>
    <li><img src="neko1.jpg"></li>
</ul>
</body>
</html>

リクエストとレスポンスの内容を確認するには、各ブラウザに搭載されている開発(デベロッパー)ツールという機能を利用すれば確認することができます。
大体のブラウザでF12キーを押せば、開発ツールが表示されます。
開発ツールだとリクエストとレスポンスの内容をわかりやすくするために整形して表示されます。
今回は、そのままのリクエストとレスポンスの内容を見るために、「Fiddler」というフリーソフトを使ってリクエストとレスポンスの内容を確認していきます。
PHPは、ローカル環境では実行されません。
ローカル環境でも実行できるように、今回はMicrosoftで提供している WebMatrix を導入し、その環境下でリクエストとレスポンスの内容を確認していきます。

クライアントからサーバーへリクエストした内容をリクエストメッセージと呼びます。
逆にサーバーからクライアントへレスポンスした内容をレスポンスメッセージと呼びます。
この2つを総称してHTTPメッセージと呼びます。

リクエストメッセージとレスポンスメッセージについて詳しく見ていきましょう。

リクエストメッセージ

吾猫ページを表示したときのリクエストメッセージです。

リクエストメッセージ
GET http://localhost:54734/neko.html HTTP/1.1
Host: localhost:54734
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://localhost:54734/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: ja,en-US;q=0.8,en;q=0.6,ru;q=0.4,zh-CN;q=0.2,zh;q=0.2,fr;q=0.2,it;q=0.2,zh-TW;q=0.2,pt;q=0.2

一見すると難しそうな感じがしますが、全部覚える必要はないですし、テンプレを羅列している感じなので、難しくありません。

リクエストメッセージは、大きく3つに分けることができます。

  • リクエストライン
  • ヘッダ
  • メッセージボディ

それぞれどのような内容を記述しているのか見ていきましょう。

リクエストライン(リクエストメッセージ)

リクエストライン
GET http://localhost:54734/neko.html HTTP/1.1

最初の1行目がリクエストラインです。
GETという記述がありますが、これはHTTPメソッドと呼ばれるものです。
メソッドとは端的に言えば、機能という意味です。
GETメソッドは、クライアントがサーバーに対して、ファイルを要求(GET)する機能(メソッド)ということです。
HTMLファイルや画像ファイルを要求するときに、よく使われます。
1行目には、HTTPメソッドの他に取得したいページのURLとHTTPのバージョンを記述します。
1行目を意訳すると、「HTTP/1.1のバージョンを使って、http://localhost:54734/neko.htmlにあるファイルを要求します」という感じです。

今回、GETメソッドを使いましたが、HTTPメソッドには全部で8つあります。
後ほど、簡単に紹介しますが、よく使うメソッドは、GETメソッドとPOSTメソッドです。
POSTメソッドはGETメソッドと似たような機能を持つメソッドです。
PHPでメールフォームや掲示板などのWebアプリケーションを作るときは、POSTメソッドがよく使われます。
それぞれの違いについては、第2章と第3章で説明します。

次はヘッダについて見ていきましょう。

ヘッダ(リクエストメッセージ)

ヘッダ
Host: localhost:54734
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://localhost:54734/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: ja,en-US;q=0.8,en;q=0.6,ru;q=0.4,zh-CN;q=0.2,zh;q=0.2,fr;q=0.2,it;q=0.2,zh-TW;q=0.2,pt;q=0.2

2行目以下がヘッダになります。
今回のリクエストメッセージの場合は、2行目から最後までヘッダになります。

ここには、利用可能な言語や使用しているブラウザの情報などを記述しています。
全て覚える必要はないので、詳しい説明はしません。
ヘッダにはリクエストするときに付随する必要な情報を記述しているとだけ覚えておいてください。

ヘッダでどのような内容を記述しているか、詳しく知りたい方は下記をご覧ください。

メッセージボディ(リクエストメッセージ)

今回のリクエストメッセージにメッセージボディはありません。
メッセージボディがある場合は、ヘッダの下に記述されます。
今回、GETメソッドだったため、メッセージボディはありません。
先ほど出てきたPOSTメソッドを使うと、メッセージボディに内容が記述される場合があります。

詳しい説明は後ほどしますが、例えば、メールアドレスやパスワードなどユーザーが入力した内容をサーバー側へ送りたい場合があります。
GETメソッドでもPOSTメソッドでも入力された内容をサーバー側へ送ることが可能ですが、送り方が異なります。
GETメソッドの場合は、1行目のリクエストラインに入力された内容を記述して、サーバー側へ送ります。
一方、POSTメソッドの場合は、このメッセージボディに内容を記述して、サーバー側へ送ります。
今回は、GETメソッドを使ったため、メッセージボディがなかったということです。
GETメソッドとPOSTメソッドの違い、それぞれの用途は、第2章、第3章で説明します。

次は、レスポンスメッセージについて見ていきましょう。

レスポンスメッセージ

吾猫ページを表示したときのレスポンスメッセージです。

レスポンスメッセージ
HTTP/1.1 200 OK
Content-Type: text/html
Last-Modified: Fri, 10 Jun 2016 11:01:38 GMT
Accept-Ranges: bytes
ETag: "015dc757c3d11:0"
Vary: Accept-Encoding
Server: Microsoft-IIS/8.0
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcaGFrb3pha2lcRG9jdW1lbnRzXE15IFdlYiBTaXRlc1xuZWtvXG5la28uaHRtbA==?=
X-Powered-By: ASP.NET
Date: Mon, 25 Jul 2016 13:51:45 GMT
Transfer-Encoding: chunked

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我輩は猫である</title>
</head>
<body>
<h1>我輩は猫である</h1>
<p>名前はまだ無い。</p>
<ul>
    <li><img src="neko1.jpg"></li>
    <li><img src="neko2.jpg"></li>
</ul>
</body>
</html>

レスポンスメッセージも大きく3つにわけることができます。

  • ステータスライン
  • ヘッダ
  • メッセージボディ

リクエストメッセージと似たような感じですね。
それぞれ、見ていきましょう。

ステータスライン(レスポンスメッセージ)

ステータスライン
HTTP/1.1 200 OK

1行目がステータスラインです。
ステータスは日本語で状態を意味します。
要求に対して、ファイルがあったよ、ファイルがなかったよ、エラーだったよなどの状態を記述しています。
この状態に対して、番号が割り振られています。
この番号をステータスコードと呼びます。
OKは結果フレーズと呼ばれています。
ステータスコードの数字だけでは判断しにくいので、結果フレーズを見ればどのような状態かわかるようになっています。
今回は、200というステータスコードが記述されています。
結果フレーズがOKなので、説明がなくてもどのような状態かわかると思いますが、リクエストは成功したので、要求に応じた情報をレスポンスしますという意味です。
Webページが問題なく表示されるときは、200のステータスコードが返ってくることが多いです。

ちなみに、ステータスコードは、100番台、200番台、300番台、400番台、500番台と分かれており、何番台のステータスコードなのかだけで、どのような状態なのか何となく把握できるようになっております。

pic_table_code.jpg

引用元: HTTPステータスコード - Wikipedia

一般の方がよく目にするステータスコードは404 Not Foundかと思います。
これは、ページが削除されたり、移動して、要求したページが存在しないときに返ってくるステータスコードです。
ちなみに、Qiitaの場合、存在しないページにアクセスすると下記のページが表示されます。
404 Not Foundとステータスコードも記述されています。

qiita_404.png

他にも様々なステータスコードがあります。
詳細を知りたい方は、引用元のHTTPステータスコード - Wikipediaをご覧ください。

ヘッダ(レスポンスメッセージ)

ヘッダ
Content-Type: text/html
Last-Modified: Fri, 10 Jun 2016 11:01:38 GMT
Accept-Ranges: bytes
ETag: "015dc757c3d11:0"
Vary: Accept-Encoding
Server: Microsoft-IIS/8.0
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcaGFrb3pha2lcRG9jdW1lbnRzXE15IFdlYiBTaXRlc1xuZWtvXG5la28uaHRtbA==?=
X-Powered-By: ASP.NET
Date: Mon, 25 Jul 2016 13:51:45 GMT
Transfer-Encoding: chunked

2行目以下がヘッダになります。

ここには、利用可能な言語や使用しているブラウザの情報などを記述しています。
全て覚える必要はないので、詳しい説明はしません。
ヘッダにはリクエストするときに付随する必要な情報を記述しているとだけ覚えておいてください。

ヘッダでどのような内容を記述しているか、詳しく知りたい方は下記をご覧ください。

メッセージボディ(レスポンスメッセージ)

メッセージボディ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我輩は猫である</title>
</head>
<body>
<h1>我輩は猫である</h1>
<p>名前はまだ無い。</p>
<ul>
    <li><img src="neko1.jpg"></li>
    <li><img src="neko2.jpg"></li>
</ul>
</body>
</html>

ヘッダの下に記述されているのが、メッセージボディです。
このメッセージボディに書かれた内容がクライアント側に表示されるようになっております。

今回、リクエストメッセージ、レスポンスメッセージともに、3つにわけて紹介しましたが、実際にはもっと細かくわけることができます。
HTTPメッセージの詳細について知りたい方は、下記をご覧ください。

次は、HTTPメソッドについて簡単に見ていきましょう。

HTTPメソッドについて

HTTPメソッドは、GETメソッド、POSTメソッドを含めて8つのメソッドが定義されています。
一応、8つのメソッドを紹介しますが、初心者の方は GETPOST 以外を使うことは、少ないかと思います。
最初はこんなメソッドがあるのかという感じで頭の片隅に置いておいてください。
GETメソッドとPOSTメソッドについては、後ほど説明します。

ここで注目すべきは、HTTPのバージョンが上がると使えるメソッドが増えているということです。
バージョンが上がるごとに、より便利になっているということですね。
また、HTTP/0.9ではGETメソッドしかなく非常にシンプルなHTTPだったということですね。

pic_table_method.jpg

引用:Hypertext Transfer Protocol - Wikipedia

次はGETメソッドについて詳しくみていきましょう。

第2章 GETメソッドについて

先ほども説明しましたが、GETメソッドは、HTTPメソッドの一つです。
HTMLファイルや画像ファイルなどを要求するときに使われるメソッドです。
今回、GETメソッドを使った実例をもとに、GETメソッドがどのようなものか詳しく見ていきましょう。

GETメソッドは、よく検索機能を実装するときに使われます。
GoogleやYahooの検索時、Qiitaの検索時にもGETメソッドが使われています。
今回は、Qiitaにある検索窓でPHPと検索したときを例に理解していきましょう。

qiita.png

当たり前ですが、検索するときにもHTTPでデータのやり取りをします。
クライアントからリクエストし、サーバーからレスポンスがあることで検索結果のWebページが表示されます。
このときにクライアント側は、サーバー側へ何のキーワードで検索したかを送る必要があります。

GETメソッドでは、1行目のリクエストラインに何のキーワードで検索したかの情報を付与してリクエストすることが可能です。
リクエストするURLの後に情報を付与してリクエストします。

実際にQiitaでPHPと検索したときのリクエストラインは下記のようになっております。

リクエストライン
GET http://qiita.com/search?q=PHP HTTP/1.1

ここで注目すべきは、URLの ? 以降の文字列です。
この文字をクエリストリング(クエリ文字列、URLパラメータ、リクエストパラメータ)と呼びます。
様々な呼び方がありますが、今回はクエリストリングで統一します。
クエリストリングの意味は、クエリとストリングの2つに分けて考えてみましょう。
クエリとは質問や問い合わせなどの意味を持ち、ストリングは文字列という意味です。
クエリストリングとは、質問文・問い合わせ文のような意味になります。
このクエリに関しは、RFC3986で定義されています。

GETメソッドでは、検索したキーワードを、URLの末尾にクエリストリングとして付与してリクエストすることで、サーバー側へ何のキーワードで検索したかを伝えています。

リクエストラインに情報を付与してリクエストするのが、GETメソッドの特徴です。

IPAの「セキュア・プログラミング講座」には、下記の記述があります。

クエリストリングはURLの一部である。そのURLはユーザが知らないうちにさまざまな個所に記録されている。次のような個所に記録されていることが一般的に知られている。

  • Webサーバのアクセスログ
  • ファイアウォールログ
  • プロキシサーバのキャッシュやログ
  • ブラウザのキャッシュや履歴

リクエストラインに記述したURLは、様々なところに残っているということです。
例えば、IDとパスワードをGETメソッドを使ってリクエストすると、下記のようにクエリストリングにIDとパスワードがそのまま記述されてしまいます。

IDをsatoと入力し、パスワードを1234と入力した場合

URL
http://xxxxxxxx.com/?id=sato&password=1234

GETメソッドは、第三者に知られてもよい情報であれば問題ありませんが、IDやパスワード、氏名や住所などの第三者に知られてはいけない情報をやり取りするのには向かないということです。
また、URLとして扱える文字数には制限があります。

使用するブラウザやサーバーなどの環境により、上限文字数は異なりますが、基本的にはIEで扱える文字数が上限と考えてよいかと思います。
そのため、多くの情報を送る場合もGETメソッドは向かないということです。

GETメソッドの利点は、クエリストリングを付与することで一つのURLとして扱われることです。
PHPというワードで検索した結果のページを別の方に伝えたいときは、http://qiita.com/search?q=PHP のURLを送れば、相手側にもPHPで検索した結果のページが表示されます。
これがGETの利点であり、特徴の一つです。

次は、クエリストリングで記述されていた q=PHP について見ていきます。
PHPの変数や配列を理解していないと、少し難しい内容ですので、わからない方は読み飛ばしてください。

クエリストリングの q=PHP とは?

QiitaでPHPと検索したときのURLの末尾が q=PHP でした。
これは、 名前=値 という書き方をしており、 q という名前に PHP という値を指定しています。

PHPの場合、q=PHP のように送られきたデータは、 $_GET のスーパーグローバル変数に連想配列として格納されます。
難しそうに聞こえますが、大したことありません。
どこからでも読み込みできる変数に配列として格納しているだけのことです。
要は下記のように $_GET という変数に配列として格納しているだけです。

PHP
$_GET = array(
    'q' => 'PHP';
)

'q' の部分をPHPの配列ではキーと呼びます。
通常の配列では、キーの部分が 01 のように数字になっています。
上述した配列は、キーの部分が文字になっておりますので、正確には連想配列と呼びます。
連想配列に格納された値を利用するときは $変数名[キー] のように記述します。
スーパーグローバル変数の $_GET に格納されている q の値を $quetion という変数に代入し、画面に出力するときは下記のように記述します。

PHP
$question = $_GET['q'];
echo $quetion;

次は、POSTメソッドについて詳しく見ていきましょう。

第3章 POSTメソッドについて

POSTメソッドは、HTTPメソッドの一つです。
GETメソッドと同様に、入力した内容をサーバーへ送ることが可能です。
先ほども説明しましたが、GETメソッドの場合は、リクエストラインにクエリストリングとして、入力した情報を付与してサーバーへ送ります。
一方、POSTメソッドの場合は、メッセージボディに入力した情報を記述してリクエストします。
メッセージボディは、URLのように様々なところに情報は残らないので、ユーザー名やパスワードなど第3者に知られたくない情報はPOSTメソッドを利用します。

入力した内容が表示される簡単なフォームを用意して、実際にどのようなリクエストとレスポンスが行われているか確認してみましょう。

実際のリクエストとレスポンスの内容を確認する

Nameを入力して「submit」のボタンを押すと、check.phpというページへ遷移して、入力した内容が表示されるというページを用意しました。

post.png

このサンプルコードは、わかりやすくするために最低限の記述しかしておりません。
コピペしないでください。

入力画面(index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input</title>
</head>
<body>
<form method="post" action="check.php">
    <p>
        Name
        <input type="text" name="name">
    </p>
    <input type="submit" value="submit">
</form>
</body>
</html>

入力画面では、この <form method="post" action="check.php"> について確認します。
これは<form>という要素にmethodactionの属性を付与しています。
action属性では、どこにデータを送信するかを指定し、method属性では、どのようにデータを送信するかを指定しています。
ここでは、action属性でaction="check.php"と指定しておりますので、check.phpへ入力されたデータを送信しています。
method属性は、先ほど説明したHTTPメソッドを指定します。
HTMLのmethod属性にはgetpostのどちらかを指定することが可能です。
今回は、POSTメソッドの場合だと、どのようなリクエスト・レスポンスが行われているか確認しますので、postを指定します。

出力画面(check.php)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check</title>
</head>
<body>
<?php
$name = $_POST['name'];
?>
<p>Name <?php echo $name ?></p>
</body>
</html>

出力画面では、入力された値が格納されている $_POST['name']$name という変数に代入して、出力しています。
氏名にsatoと入力してsubmitを押した場合のリクエストメッセージとレスポンスメッセージを確認してみましょう。

リクエストメッセージ

リクエストメッセージ
POST http://localhost:53912/check.php HTTP/1.1
Host: localhost:53912
Connection: keep-alive
Content-Length: 9
Cache-Control: max-age=0
Origin: http://localhost:53912
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://localhost:53912/
Accept-Encoding: gzip, deflate
Accept-Language: ja,en-US;q=0.8,en;q=0.6,ru;q=0.4,zh-CN;q=0.2,zh;q=0.2,fr;q=0.2,it;q=0.2,zh-TW;q=0.2,pt;q=0.2

name=sato

今回は、POSTメソッドですので、1行目のリクエストコードに入力した内容は含まれておりません。
ヘッダの下にあるメッセージボディの箇所に入力した内容のname=satoが記述されています。

レスポンスメッセージ

リクエストメッセージ
HTTP/1.1 200 OK
Content-Type: text/html
Vary: Accept-Encoding
Server: Microsoft-IIS/8.0
X-Powered-By: PHP/5.4.45
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcaGFrb3pha2lcRG9jdW1lbnRzXE15IFdlYiBTaXRlc1xwb3N0LWdldFxjaGVjay5waHA=?=
X-Powered-By: ASP.NET
Date: Mon, 25 Jul 2016 14:52:37 GMT
Transfer-Encoding: chunked

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check</title>
</head>
<body>
<p>Name sato</p>
</body>
</html>

出力画面に Name sato と表示されました。

GETメソッドの場合も確認

折角なので、GETメソッドを使った場合も確認してみましょう。

リクエストメッセージ

リクエストメッセージ
GET http://localhost:53912/check.php?name=sato HTTP/1.1
Host: localhost:53912
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://localhost:53912/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: ja,en-US;q=0.8,en;q=0.6,ru;q=0.4,zh-CN;q=0.2,zh;q=0.2,fr;q=0.2,it;q=0.2,zh-TW;q=0.2,pt;q=0.2

GETメソッドなので、1行目のリクエスト・コードに入力した内容のname=satoが含まれています。

レスポンスメッセージ

レスポンスメッセージ
HTTP/1.1 200 OK
Content-Type: text/html
Vary: Accept-Encoding
Server: Microsoft-IIS/8.0
X-Powered-By: PHP/5.4.45
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcaGFrb3pha2lcRG9jdW1lbnRzXE15IFdlYiBTaXRlc1xwb3N0LWdldFxjaGVjay5waHA=?=
X-Powered-By: ASP.NET
Date: Mon, 25 Jul 2016 14:58:43 GMT
Transfer-Encoding: chunked

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check</title>
</head>
<body>
<p>Name sato</p>
</body>
</html>

出力画面に Name sato と表示されました。
POSTメソッドの場合でもGETメソッドの場合でも、同じ表示結果なので、レスポンスメッセージも同じです。

これで、GETメソッドとPOSTメソッドの特徴とそれぞれの用途について理解出来たかと思います。

最後に今回学んだことを活用しましょう。

第4章 応用編

今回、基礎を学んだことで、どのような応用ができるのか、作るときにどのようなことに気をつけなければいけないのか確認しましょう。

リクエスト数が減れば、表示速度が速くなる?

第1章で、1ページを表示するのにリクエストとレスポンスを繰り返していると説明しました。
お気づきの方もいると思いますが、リクエストとレスポンスの回数を少なくすれば、1ページの表示速度は速くなります。
実際にWeb制作の現場では、Webページ内で使われているアイコンなどを1枚の画像にまとめることでリクエストとレスポンスの回数を減らすという方法を用いることがあります。

css_sprite.png

これを、CSSスプライトと呼びます。

他にも、CSSを記述したファイルを一つにまとめるなどリクエスト数を減らす方法があります。
ここでは、詳しい説明はしませんので、興味のある方は、調べてみてください。

今回得た知識で、このような工夫ができるし、なぜ表示速度が速くなるのか理解することができます。

原理としては説明した通りですが、現状わざわざ CSS スプライトにする効果は薄いようです。

その昔、画像をすべて1枚にまとめて、DOMのbackground-imageで位置をずらしながら表示させる高速化手法が流行りました。DOMツリーのパース時に画像を呼び出すimgタグと比べて、画像のダウンロードの開始位置は遅いし、画像自体も大きくなるからダウンロードに時間かかるしで、遅くなります。

昔はサーバが低スペックすぎてコネクションが増える負荷が大きかったのか、画像をひとつにまとめるとブラウザキャッシュがきくメリットの方が大きかったのか、理由はちょっと思い出せないのですが、古の手法です。

引用元:本当は速くならない「Webサイトの表示高速化アンチパターン」10選

引用元の記事に CSS スプライトを導入した場合と導入しない場合の比較検証がないので詳細は不明ですが、CSS スプライトは、Google、YouTube、Facebook でも利用していました。

現状も利用しているか調査はしていませんが、実際に CSS スプライトが効果があるか気になる方は検証してみてください。

この記事は高速化の話が目的ではなく、なぜ CSS スプライトを導入すると速度が早くなるのか原理を理解することが目的ですので、CSS スプライトの是非については言及しません。

jQueryで入力チェックすれば問題ないの?

メールフォームや掲示板などユーザーの入力を伴う、Webアプリケーションを作成する場合、入力された内容が正しいかチェックする必要があります。
入力チェックとは、未入力ではないか、文字や数値、メールアドレスなど想定した形式になっているかなどをチェックすることです。

PHPは、サーバーサイドスクリプトです。
サーバー側でPHPが実行され、その実行結果をクライアント側へレスポンスするという流れになります。

逆にJavaScriptやjQueryなどは、基本的にはクライアントサイドスクリプトです。
クライアント側で実行されるスクリプト言語です。

第1章でクライアントとサーバーについて学んだので、それぞれがどのタイミングで実行されているか理解できると思います。

クライアント側(jQuery)でも、サーバー側(PHP)でも入力チェックをすることが可能ですが、必ずサーバー側(PHP)で入力チェックしてください。
例外はありません。ユーザーが入力した内容は、全てチェックしてください。

なぜ、サーバー側で入力チェックする必要があるのかは、リクエストとレスポンスを学んだ皆さんなら理解できると思います。
HTTPの決まり事に従い、正しくリクエストコード、ヘッダ、メッセージボディを記述すれば、任意でリクエストメッセージを作成することも可能です。
ということは、リクエストメッセージは、偽装可能ということです。
偽装可能なので、サーバー側へ送られてくるリクエストの内容は、信用できません。
悪意のある人が不正なコードを入力して、リクエストすることもできます。
そのため、必ずサーバー側で実行されるPHPで入力内容を確認する必要があります。
GETメソッド、POSTメソッドにかかわらず、必ずPHP側でチェックしてください。

jQueryなどで入力チェックしておけば、サーバー側(PHP)では入力チェックしなくても良いと紹介しているブログなどがありますが、誤りです。
jQueryを使って入力チェックする利点は、画面遷移せずに即座に「正しいメールアドレスを入力してください」などの表示ができるため、利便性の向上につながるということだけです。

しつこいですが、必ずPHP側で入力チェックしてください。
チェックの仕方は

が参考になるので、必ずご覧ください。

HTML側でチェックボックスやプルダウンなど入力制限しておけば問題ないの?

チェックボックスやプルダウン、数値入力などHTML側で入力方法を制限している場合でも、
必ずPHP側で入力チェックしてください。

リクエストメッセージを偽装できるということは、私たちが作成した入力画面を介さなくても、サーバー側へリクエストできます。
そのため、入力方法にかかわらず、必ずPHP側でチェックしてください。

POSTメソッドを使っておけば、安全なの?

POSTメソッドは、GETメソッドに比べて、情報が残らないと説明したのでPOSTメソッドを使っておけば、安全と誤解された方もいるかと思います。
POSTメソッドを使っていても、必ずPHP側で入力チェックはしてください。

また、ユーザーが入力した内容を表示するときは、エスケープする必要があります。
エスケープとは、HTMLなどのコードとして解釈されてしまう " ' < > などの特殊文字を、コードとして解釈されない文字に変換することです。
先ほど、リクエスト内容は偽装できると説明しました。
悪意のある人は、HTMLなどのコードとして解釈される文字を入れてリクエストすることで、予期しない動作をさせようとします。
エスケープすることで、このようなことを防ぐことができるため、入力内容を表示するときは、必ずエスケープします。
PHPの場合、表示するときに htmlspecialchars 関数を使えば、エスケープして表示されます。
エスケープについても、先ほど紹介した

に記載されているので、ご覧ください。

ちなみに、第3章のサンプルコードを記載したときに、コピペしないでくださいと言ったのは、Nameに入力された内容をチェックしておらず、表示するときにエスケープ処理していないからです。

最後に

今回の記事で超初心者の理解が少しでも深まれば幸いです。
基礎を学ぶことで、応用もできるし、作る上で気をつけるべき箇所も理解できるようになります。
興味をもった箇所、疑問に思った箇所は、各自で調べて学んでください。
特にメールフォームや掲示板などWebアプリケーションを作りたいと考えている方は、セキュリティについての理解が欠かせません。
セキュリティについても学ぶようにしてください。

PHP関連の記事をまとめていますので、気になるものがあればご覧ください。
超入門というのは徹底入門ではなく、初学者向けに一つ一つ冗長に説明している超入門記事という意味です。

最後まで読んでいただき、ありがとうございました。

note

note でも記事を公開してるので、興味がある方はご覧ください。

【初学者向けコードリーディング】 PHP の TODO アプリのコードを一緒に読み解こう

7968
学んだことを投稿していきます。誤りがあればご指摘ください。 Zenn( https://zenn.dev/7968 ) と note( https://note.com/7968 )でも記事を投稿していく予定です。
https://note.com/7968
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away