[初心者]Express入門1 フォーム入力

前回[初心者]Expressでバックエンド環境を作る

Express(エクスプレス)とは

Express(エクスプレス) は、WEBサイトやアプリの「バックエンド（裏側）」を作るためのNode.jsフレームワークです。
わかりやすくレストランでイメージすると…

• お客さん（ユーザー） が注文します。
• その注文内容を キッチン（サーバー） に伝えて、料理（データ） を運ぶのがウェイター。
• この 「ウェイター」 の仕事をしてくれるのがExpress.js（バックエンド）

Expressでできること

• フォームに入力された情報を受け取って保存する。
• データベースから商品情報を取り出して返す。
• Web APIを作る
• ログイン認証やエラー処理の対処

実際のコードを見てみよう

js

const express = require('express');
const app = express();

app.get('/hello', (req, res) => {
  res.send('Hello,World');
});

app.listen(3000, () => {
  console.log('サーバーが3000番で動いてます');
});

これは、http://localhost:3000/helloにアクセスすると「Hello,World」と表示されるコードです。

• app.get()は「GETリクエスト」が来た時にどう処理するか定義するメソッドです。
• /helloはWebアドレス（URL）のパス部分です。
• res.send()でクライアントに返すメッセージを指定します。

フォームを受け取ってみよう

実際にHTMLのフォームから送られてきたデータを受け取ってみます。
まずは、コードを見てみましょう。

index.js

const express = require('express');
const app = express();

// フォームのデータを受け取るための設定（ミドルウェア）
app.use(express.urlencoded({ extended: true }));

// POSTリクエストを受け取るルート
app.post('/submit', (req, res) => {
  const name = req.body.name; // フォームのnameフィールドの値
  res.send(`こんにちは、${name}さん！`);
});

app.listen(3000, () => {
  console.log('サーバーが3000番で動いてます');
});

express.urlencoded()という関数（ミドルウェア）によってHTMLのフォームから送られてきたデータをExpressが読み取れるようになります。
以下にHTMLのフォームのコードを表示します。

html

<form action="/submit" method="POST">
  <input type="text" name="name" placeholder="あなたの名前">
  <button type="submit">送信</button>
</form>

このフォームから送信されたデータは、name=〇〇という形でサーバーに届きます。
express.urlencoded()というミドルウェアによってこのデータはreq.body.nameというExpressが読み取れる形で取得できるようになります。
node index.jsでサーバーを起動した後にHTMLファイルをブラウザで開き、フォームに名前を入力し送信すると、例えば「タロウ」と入力した場合、ブラウザには

こんにちは、タロウさん！

というメッセージが表示されます。
これはExpressのreq.body.nameにフォームの入力内容が格納され、それをres.send()でそのままHTMLに返しています。

流れの確認

もう少し詳しく、何が起きているのか見てみましょう。

1. ブラウザでHTMLファイル（form.html）を開く
2. 名前を入力して「送信」ボタンを押す
3. ブラウザが/submitにPOSTリクエストを送信
4. Expressサーバーが名前データを受け取り、req.body.nameに格納
5. res.send()で挨拶メッセージを返す→ブラウザに表示される

まとめ

このようにExpressはとても簡単なコードで、フォームの入力を受け取って処理を行い結果を返すことができます。
この仕組みがわかれば、「データベースと連携する」「複数の入力を処理する」といった応用も可能になります。