HTMLやPHPなどに触っていると頻繁に出会す「method=”POST”」という記載。これは一体なんでしょうか。調べてみると「HTTPの通信方法」や「GETなどもある…」といった情報の氾濫に、一歩引いてしまったという方もいるのではないでしょうか。
今回の記事では、HTMLやPHPで登場するPOSTについて初心者でもわかるように説明していきます。ぜひ本記事を一読してPOST送信への理解を深めていきましょう。
HTMLのPOSTとは？
アクセスしたユーザーが投稿をできるようなウェブサイトを作成している場合、入力フォームなどを配置することがよくあります。入力フォーム自体は、「input」タグを使えば作れてしまうのですが、それだけではアクセスユーザーが入力したデータをサーバー側で受け取ることはできませんよね。そこで、入力データをサーバー側に引き渡すために登場したのが、このPOST通信というものであり、これはHTTPの通信方法の1つです。
HTMLのPOSTを使ってみよう
本記事のメインは、実際にHTMLとPHPを駆使して、まさに動的なページを作成するということです。以下の指示に従い、POST通信を使ってみましょう！
example-1.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST通信の使用例</title>
</head>
<body>
<form method="POST" action="example-2.php">
<h3>あなたの名前を教えてください！</h3>
<input type="text" name="name" /><br />
<input type="submit" value="POST通信で送る" />
</form>
</body>
</html>
example-2.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST通信の使用例</title>
</head>
<body>
<?php
echo "あなたは".$_POST["name"] ."さんですね！";
?>
</body>
</html>
実際にPHPを起動してブラウザ上で動きを確かめてみましょう。すると「あなたの名前を教えてください！」と書かれた下に入力フォームがありますね。そちらに何かしらの文字を書き込み送信ボタンを押してみると…「example-2.php」のファイルにアクセスし、先ほど入力フォームに書き込んだ文字とともに「あなたは〇〇さんですね！」と表示されているはずです。
このようにユーザーの入力したデータによって動的にページの見え方が変わるものをインタラクティブ（相互的・対話的）と言います。上記のコードについて、もう少し分解して説明していきましょう。
example-1.phpの解説
まずは入力フォームが配置されているexample-1.phpについて解説をしていきます。
body要素がポイント
<body>
<form method="POST" action="example-2.php">
<h3>あなたの名前を教えてください！</h3>
<input type="text" name="name" /><br />
<input type="submit" value="POST通信で送る" />
</form>
</body>
ポイントは、body要素の子であるform要素です。このform要素の中に「method=”POST”」とあり、その他には「action=”example-2.php”」と書かれていますね。これは、「example-2.php」に対して、入力されたデータをPOST送信するという意味になります。
input要素にも注目
POST通信をおこなう際、input要素にも注目しましょう。
<h3>あなたの名前を教えてください！</h3>
<input type="text" name="name" /><br />
<input type="submit" value="POST通信で送る" />
1つ目のinput要素には「name=”name”」と書かれている通り、nameプロパティに「name」という値が設定されています。また、2つ目のinput要素には「type=”submit”」が設定されており、送信ボタンとなっています。
example-2.phpの解説
次にユーザーが入力したデータが表示されるexample-2.phpについて解説をしていきます。
PHPタグ内でPOST通信のデータが表示できる！
PHPタグ内で、ユーザーが入力したPOST通信のデータを表示することができます。
<body>
<?php
echo "あなたは".$_POST["name"] ."さんですね！";
?>
</body>
受け取ったデータを表示するには少しクセがある書き方ですが「$_POST[“name”]」という書き方をすることになります。「$_POST」でPOST通信を指定し、その中の値に受け取るデータが入力されたinputタグのnameプロパティを指定すれば、表示ができます。
GET通信とは？
さて、ここまでPOST通信について実例を用いながら説明をしてきました。POST通信と同じくらい登場するのがGET通信と呼ばれているものです。POST通信とGET通信の違いはなんでしょうか。
GET通信とは
そもそもGET通信とはなんでしょうか。簡単に言えばデータの取得をおこなうための通信方法です。たとえば、Googleなどの検索エンジンで何かしらのキーワードを検索してみましょう。するとURLには乱英数字が並んでいるはずです。
https://www.google.co.jp/search?client=safari&channel=iphone_bm&sxsrf=ALeKk019W3VHt6l9MQT0CtOJBJ2N9M7WOA%3A1584531714996&source=hp&ei=AglyXvOuOYeuUpGrnKAG&q=%E3%83%9D%E3%83%86%E3%83%91%E3%83%B3&oq=%E3%83%9D%E3%83%86%E3%83%91%E3%83%B3&gs_l=psy-ab.3..0i4l8.1584.4175..4288…4.0..0.348.3517.2-10j3……0….1..gws-wiz…..10..0i67j35i362i39.pTNTxeIZtDE&ved=0ahUKEwjzt4TQ-KPoAhUHlxQKHZEVB2QQ4dUDCAk&uact=5
このようにURLを通じて、表示すべきデータなどをサーバ側にリクエストすることができるのがGET通信なのです。日常的に目にするものなだけにあまり意識したことはなかったかもしれませんが、入力したキーワードによって表示される結果が変わるのは、動的なウェブページの証拠ですね。
POST通信とGET通信の違いは？
ここではPOST通信とGET通信の最大の違いについて1点押さえておきます。それは、POST通信しかデータベースに新規データの登録や編集がおこなえないということです。入力フォームから何かしらのデータを登録・編集したいのであれば、先ほどの実例で用いたPOST通信を必ず用いるようにしましょう。
まとめ
今回の記事では、HTMLやPHPで登場するPOSTについて初心者でもわかるように説明していきました。PHPなどサーバサイドの言語が絡みだすと難しく感じるかもしれませんが、その分、POST通信などをマスターできれば動的なサイトが作れるようになります。インタラクティブなウェブサイトを作れるようになると、一気にプログラミングが楽しくなります。ぜひ、本記事をもう1度読み返し、POST通信への理解を深めていきましょう。
HTTP通信という言葉が出てきて混乱しましたか？意味を知ってしまえば、そこまで難しいものではありませんので心配しないでください。
HTTP通信とはHTTP上の入力フォームから送信したデータがサーバ側に送信されるタイプの通信方法のことです。サーバ側にユーザが入力したデータを受け取ることができれば、より対話的なウェブサイトを作ることができます。何しろユーザが入力したデータがウェブサイトに反映されて表示することもできるのですから。
このようにフロントエンドとサーバサイドが連携したウェブサイトを動的なウェブサイトなどと呼ぶことがあります。なぜなら、入力したデータがすぐに反映され、ページが動的なものとなるからです。一方でフロントエンドのみで構成され、動きのないウェブサイトを静的なウェブサイトと呼ぶことも覚えておきましょう。