受講料が最大70%OFF 受講料が最大70%OFF

HTMLやPHPなどに触っていると頻繁に出会す「method=”POST”」という記載。これは一体なんでしょうか。調べてみると「HTTPの通信方法」や「GETなどもある…」といった情報の氾濫に、一歩引いてしまったという方もいるのではないでしょうか。

今回の記事では、HTMLやPHPで登場するPOSTについて初心者でもわかるように説明していきます。ぜひ本記事を一読してPOST送信への理解を深めていきましょう。

HTMLのPOSTとは?

アクセスしたユーザーが投稿をできるようなウェブサイトを作成している場合、入力フォームなどを配置することがよくあります。入力フォーム自体は、「input」タグを使えば作れてしまうのですが、それだけではアクセスユーザーが入力したデータをサーバー側で受け取ることはできませんよね。そこで、入力データをサーバー側に引き渡すために登場したのが、このPOST通信というものであり、これはHTTPの通信方法の1つです。

ポテパンダの一言メモ

HTTP通信という言葉が出てきて混乱しましたか?意味を知ってしまえば、そこまで難しいものではありませんので心配しないでください。

HTTP通信とはHTTP上の入力フォームから送信したデータがサーバ側に送信されるタイプの通信方法のことです。サーバ側にユーザが入力したデータを受け取ることができれば、より対話的なウェブサイトを作ることができます。何しろユーザが入力したデータがウェブサイトに反映されて表示することもできるのですから。

このようにフロントエンドとサーバサイドが連携したウェブサイトを動的なウェブサイトなどと呼ぶことがあります。なぜなら、入力したデータがすぐに反映され、ページが動的なものとなるからです。一方でフロントエンドのみで構成され、動きのないウェブサイトを静的なウェブサイトと呼ぶことも覚えておきましょう。

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には乱英数字が並んでいるはずです。

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通信への理解を深めていきましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。