サンプルコードで学ぶ、Web2.0の核心技術〜HTMLフォーム、クエリパラメータ、リクエストボディ〜

watanabe_kf1983

2022年8月5日 12:26

プログラム自学案内の23回目です。今回は、Webブラウザの画面で入力された情報を、Webサーバで受けとる方法を紹介します。なお、これまでの記事はこちらからご覧ください。

まずは昔話から：Web2.0 とはなにか

今回の記事では趣向を変えて、サンプルコードの紹介の前に、昔話から始めてみます。

Webの始まりは、1990年ごろのこと。このときWebは、Webサイトの開設者が情報の発信者として、それを閲覧するWebブラウザの利用者が情報の受信者として、振舞うことを想定したものでした。すなわち、コミュニケーションの方向は一方向だったのです。

ところが、その10年後、2000年を過ぎたころから、Webを用いたSNSやネット通販などの普及により、それまで受信者としてのみ振舞ったWebブラウザの利用者が、一転、情報の発信者として振舞うようになります。一方向から双方向へ、Web技術の使われかたが変容したわけです。この、双方向コミュニケーションを支えるWebは、のちにWeb2.0と呼ばれることになります。

ここからは余談ですが、Web3.0という言葉もあるようです。どうも、気の早い人がWeb2.0の次なるものとして、この言葉を使いはじめているらしいです。

しかしこれについては、今の私は相当冷ややかに思っています。まだ、利用者間コミュニケーションや社会の変容は全くおきていないのに、こんな言葉だけ先につくって、色めき立つのは馬鹿げていませんか、と。そもそもですが、次に時代や社会を変えたり、ビジネスチャンスを生み出すような変革が、あいも変わらずWeb技術に基づいて起きると予想して血眼になるのって、そうとう視野の狭い、貧しい発想の持ち主なんじゃないかと、私は思っているのです。

HTMLフォーム：Web2.0を支える技術

話をもどします。

Web2.0の世界では、ブラウザ利用者がWebサイトに情報を発信できなければいけません。 具体的に言うと、Googleにせよ、TwitterなどのSNSにせよ、利用者がWebブラウザの画面で入力した「検索ワード」「投稿内容」が、GoogleやTwitterに送信されないことには、話は始まらないのです。

ブラウザからWebサイトへの情報発信技術のなかで、最も古典的なものが、今回の記事で紹介するHTMLフォームです。

この仕組みでは、HTMLフォーム内のボタンがクリックされると、Webブラウザが、画面入力された内容を埋めこんでHTTPリクエストを作成し、Webサーバにそのリクエストを送信します。絵にするとこんな感じです。

入力内容のHTTPリクエストへの埋め込まれかたには、2つのパターンがあります。

GETメソッド＋クエリパラメータ（上図の例1）
Google検索の検索ワードなど、利用者が取得する情報を選ぶために、画面入力を送信する場面で使われます。
POSTメソッド＋リクエストボディ（上図の例2）
SNSへの投稿や通販サイトでの注文など、利用者がWebサイトに対して情報を登録するために、画面入力を送信する場面で使われます。

この記事では両方のパターンを紹介します。

サンプルコード

では、サンプルコードを紹介しますので、実際に読者の手元で動かしてみてください。

準備

今回は、前回の記事で作成したflatter-webに機能を追加します。したがって準備として、前回の記事のサンプルコードを動かし、桐島かれん、滝沢カレンをおだてる画面が表示されることを確認してください。前回の記事の課題への解答はできていなくても構いません。

Webブラウザから送信

まずは views/list_view.html にコードを追加します。ここでは二つのformタグとその子要素が追加されています。このformタグと子要素がHTMLフォーム、すなわち画面で入力された内容をHTTPリクエストに埋め込み、Webサーバに送信する仕組みとなります。

views/list_view.html (抜粋)

<body>
    <h1> Hello flatter-web !!! </h1>
    <ul>
        {{#namelist}}
        <li><a href="flatter/{{.}}">{{.}}をおだてる</a></li>
        {{/namelist}}
    </ul>

    <hr>

    <form method="GET" action="/flatter-by-query">
        おだてる人：
        <input type="text" name="name"> さん
        <button type="submit">クエリパラメータで送信</button>
    </form>

    <form method="POST" action="/flatter-by-post">
        おだてる人： 
        <input type="text" name="name"> さん
        <button type="submit">リクエストボディで送信</button>
    </form>

</body>

Webサーバで受信

つぎに、送信された内容を受け取るために、 controllers/router.js にコードを追加します。次にあげるサンプルでは、 '/flatter-by-query', '/flatter-by-post' のルーティングを追加しています。そして、それぞれ req.query、req.body というコードで、HTTPリクエストに埋め込まれた画面入力の内容を取り出しています。

controllers/router.js (抜粋)

router.get('/', function (req, res, next) {
    const data = namelist();
    console.log(data);
    res.render('list_view.html', data);
});

router.get('/flatter/:name', function (req, res, next) {
    const data = flatter(req.params.name);
    console.log(data);
    res.render('flatter_view.html', data);
});

router.get('/flatter-by-query', function (req, res, next) {
    const data = flatter(req.query.name);
    res.render('flatter_view.html', data);
});

router.post('/flatter-by-post', function (req, res, next) {
    const data = flatter(req.body.name);
    res.render('flatter_view.html', data);
});

動かしてみる

入力欄に好きな内容を入れて、ボタンをクリックしてください。

ボタンをクリックしたとき、画面がどう変わるかだけでなく、ブラウザのアドレス欄がどうなるか確認してみてください。また、Chrome DevToolsで、HTTPリクエストの内容を確認してみてください。

HTMLフォームの要素いろいろ

サンプルでは入力欄として最も基本的なこちらのみ利用しています。

<input type="text">

しかし、Webサイトでの入力欄は、他に様々なものを目にしたことがあるはずです。どんなものがあり、どの様なタグを書けば実現できるか、ぜひ調べてみてください。

課題：ラジオボタンでおだてる人を選択

さいごに練習として、HTMLフォームの要素のうちの一つ、ラジオボタンを使ってみましょう。

HTMLフォームのラジオボタンの利用方法を調べ、画面を次のとおり改造してください。そして、ラジオボタンで選択したおだて相手を送信すると、その人がおだてられることを確認してください。

注意点です。

変更するのは views/list_view.html だけです。
"桐島かれんをおだてる" リンクの要領で、namelistの内容からラジオボタンの選択肢を作ってください（htmlファイルに直接 "桐島かれん" という名前は書かないでください）
前回の課題を実施済みの場合は、選択肢に"カレン・カーペンター" が入ってしまうと思いますが、それで構いません。

まとめと次回予告

今回はHTMLフォームを用いて、ブラウザに表示されている入力欄の内容をWebサーバに送信する方法と、それを受け取る方法を紹介しました。

次回の記事では、Webアプリケーションでもう一つ大事な要素、セッションとクッキーについて紹介します。お楽しみに。

#コラム #プログラミング #独学 #案内 #Express .js #HTMLフォーム #Web2 .0 #Web3.0

前回記事の課題の解答例

さいごに前回の記事の課題の解答例です。変更箇所のみ抜粋します。

課題1 「カレン・カーペンター」をおだてるページを増やす

models/namelist.js

function namelist() {
    return { namelist: ['桐島かれん', '滝沢カレン', 'カレン・カーペンター'] };
}

課題2 おだてるページの見栄えを改善

views/flatter_view.html

<body>
    <h1> {{flatteree.name}} さんって !!! </h1>
    <ul>
        {{#words}}
        <li>{{.}}</li>
        {{/words}}
    </ul>    
    <hr>
    <a href="/">ホームへ</a>
</body>

課題3 リチャードもおだてる

models/richard.js (ファイル追加)

function namelist() {
    return { namelist: ['リチャード・カーペンター', 'リチャード・ギア', 'キース・リチャード'] };
}

module.exports = namelist;

controllers/router.js

const namelist = require('../models/namelist');
const richardlist = require('../models/richard');

router.get('/', function (req, res, next) {
    const data = namelist();
    console.log(data);
    res.render('list_view.html', data);
});

router.get('/richard', function (req, res, next) {
    const data = richardlist();
    console.log(data);
    res.render('list_view.html', data);
});

以上です。

この記事が気に入ったらサポートをしてみませんか？