はじめに
前回はAPIの役割についてお話しました。
送られてきたURLエンコード文字列のデータをJavaScript形式にして処理する、といった流れでした。
今回はAPIに実際にデータを送って、ちゃんと送られたか確認します。
やる内容は「名前を書いて送信する」だけ。
んではやっていきます。
まずはHTMLからですね。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PostTest</title> </head> <body> <form action="/submit" method="post"> <label for="username">ユーザー名</label> <input type="text" name="username" id="username"> <button type="submit">送信</button> </form> </body> </html>
<html lang="en">
のとこを
<html lang="ja">
こっそり変えておきました。
さて。
formのところにaction、method、inputのところにnameてのがついてます。
これは以前書いたHTMLの記事には書いてなかったものです。
なんですかね、こいつら。
なので一つずつ見ていきます。
actionとは
フォームに書き込んだことの送り先です。
つまりここでは/submitに送りますという意味です。
で、この/submitってなんぞやということになるんですけど、これはサーバー側の受け取り口のアドレスみたいなものです。
前回の記事で書きましたので、わからない方は覗いてみてください。
最初からサーバーに備わってるものではないので、APIを作るときに作る必要があります。
次にmethodです。
methodとは
methodとは、送信する方式です。
今回はpostという方式にしていますが、これは内容を隠して送信するという意味です。
隠すといっても、単に見えなくするという意味であって、セキュリティ的に安全という意味ではないので、そちらは別に対策する必要があります。
私、「内容を隠さないで送信することなんてあるのか？」と思ったのですが、普通にググったときとかには検索をした内容はアドレスバーに表示されますよね。
こんな感じの。
「search?q=こういうかんじの&rlz=1C1TKQJ_jaJP1014JP1014&oq=こういうかんじの&gs_」
あれが内容を隠さないで送信したときです。
ちなみにGETと書きます。
前回で詳しく説明してあるので、こちらを御覧ください。
useとは、ってとこに書いてあります。
最後、nameですね。
nameとは
そのまんま、名前です。
フォームに書き込んだデータに名前をつけるんです。
nameに書かれた内容がサーバーにも名前として認識されます。
同じような感じでパスワードもサーバーにパスワードとして認識させたりもします。
これで名前の送信のためのHTMLはできあがりました。
完成図はこちらです。
さて、次にサーバーでデータを受け取ります。
サーバーでデータを受け取る
HTMLのフォームに書いたデータをサーバーに送ります。
API(サーバー）の方に書くコードは以前記しましたが、リンク先に行くのも面倒な人（主に私）のためにもう一度書いておきます。
const express = require('express'); const app = express(); // 必要なミドルウェアを使用 app.use(express.urlencoded({ extended: true })); // POSTリクエストを受け取るルート app.post('/submit', (req, res) => { const username = req.body.username; // フォームから送信されたデータを取得 console.log(`送信された名前: ${username}`); // サーバー側で確認 // JSON形式でレスポンスを返す res.json({ message: `${username}、お前の前にいるのは、千年以上生きた魔法使いだ` }); }); // サーバーを起動 app.listen(3000, () => { console.log('サーバーがポート3000で稼働中'); });
一応おさらいです。
詳細は以下のリンクに記しましたのでそちらを御覧ください。
const express = require('express'); const app = express();
Expressを立ち上げています。
app.use(express.urlencoded({ extended: true }));
送られてきたURLエンコード文字列をJavaScript形式に変換しています。
app.post('/submit', (req, res) => { const username = req.body.username; // フォームから送信されたデータを取得 console.log(`送信された名前: ${username}`); // サーバー側で確認
送られてきたリクエストを処理しています。
res.json({ message: `${username}、お前の前にいるのは、千年以上生きた魔法使いだ` }); });
JSON形式にして、データをクライアントに送信します。
app.listen(3000, () => { console.log('サーバーがポート3000で稼働中'); });
サーバーを起動しています。
サーバーの起動なら最初にやれよと思うのですが、起動する前に色々設定する必要があります。
電子レンジで何ワットで何分チンするか決めてから「あたため」を押すような感じです。
これで準備が整いました。
次は実際にデータを送ってみます。
index.htmlをブラウザで開き、名前は適当に「アウラ」とでもしておきましょう。
そして送信を押します。
失敗しました。
このページは動作していません、というよく見かけるガッカリ文だけが表示されます。
原因は何なのか調べてみます。
というかChatGPT先生に訊いてみました。
「HTMLのほう、action="/submit"だけだと、どこのsubmitかわからないよ。」
「ポート3000に送るってことを書かないとだめだよ。」
なるほど。
たしかに。
ということで書き直しました。
action="http://localhost:3000/submit "
これで3000番に送ることを指定しました。
いざ送信。
出ました。
{"message":"アウラ、お前の前にいるのは、千年以上生きた魔法使いだ"}
このように表示されました。
ターミナルのほうでは「送信された名前：アウラ」になっています。
どうやら成功したようです。
ただ、なんか表示のされ方が気になりますね。
データをJSON形式にして出力するようにしていたので、そのままの形で出てしまったようです。
普通に表示するだけなら、
res.json();
ではなく
res.send();
でいいですね。
つまりブラウザがそのままJSONとして解釈して表示します。
一方、res.send()はプレーンなテキストやHTMLとして返します。
res.send(`${username}、お前の前にいるのは、千年以上生きた魔法使いだ` ); });
これでいってみましょう。
出ました。
{"message":"アウラ、お前の前にいるのは、千年以上生きた魔法使いだ"}
変わってへんやん。
まさかと思って、いったんターミナルを閉じて、サーバーを再起動（ターミナルでnode server.jsと記入）させて試してみました。
出ました。
アウラ、お前の前にいるのは、千年以上生きた魔法使いだ
一応これで成功なんですけど、おかしいですね。
たしか再起動しなくていいように、何かをインストールしたはずなんですけど。
nodeとドラえもんを足したような名前（nodemon）。
いったいどういうことなのか先生に訊いてみました。
どうやら、node server.jsで起動したのでは、nodemonは使われないそうです。
起動するときのコマンドをnodemon server.jsで起動しないといけないのだそう。
試しに、nodemonで起動して、表示を少し変えてみました。
アウラ、お前の前にいるのは、500万年以上生きた魔法使いだ
うまくいったようです。
おわりに
とりあえずデータを送ることはこれで成功しました。
ただし、これはあくまで処理したデータをそのまま表示させているにすぎません。
掲示板として、名前を送信したサイトに反映されるようにするには、またひと手間かかります。
この辺りはフロントエンドのみの掲示板を作った時と同じですね。
html-css-javascript.hatenadiary.com
次は返ってきたデータを反映させるようにします。
