Node.js | Expressによるリクエスト処理の基本

Node.jsのExpressで、クエリパラメータ、POSTフォーム、Ajaxレスポンス、Cookieを扱う基本を説明する。

クエリ文字列を扱う

Expressでは、クエリ文字列で渡された値をreq.queryから参照できる。たとえば/helo?name=devkumaとしてアクセスされた場合、req.query.nameで値を取り出し、res.renderでEJSテンプレートへ渡せる。

router.get("/", function(req, res, next) {
  res.render("helo", {
    title: "Hello",
    message: "Hello, " + req.query.name
  });
});

URL経由で送られた値を受け取る最も簡単な方法である。express-generatorを使う場合、ルートは通常routes/に、テンプレートはviews/に配置する。

POSTフォームを受け取る

HTMLフォームからmethod="post"で送られた値は、router.postでPOST用の処理を定義して受け取る。送信されたフォーム値はreq.bodyにまとめられる。

router.post("/", function(req, res, next) {
  res.render("helo", {
    title: "Posted",
    message: req.body.name + " / " + req.body.mail
  });
});

ビュー側には、同じルートへPOSTするフォームを用意する。

<form method="post" action="/helo">
  <input type="text" name="name">
  <input type="text" name="mail">
  <input type="submit">
</form>

フォーム表示はGET、送信値の処理はPOSTに分けると、リクエスト処理がわかりやすくなる。

Ajax用のデータを返す

Expressではテンプレートを描画せず、文字列やJSONを直接返すこともできる。res.sendは本文をそのまま送り、res.jsonはオブジェクトをJSONとして返す。

router.get("/data", function(req, res, next) {
  res.json({
    name: "devkuma",
    mail: "dev@example.com"
  });
});

ブラウザ側のJavaScriptはこのURLへリクエストし、返されたJSONを解析して、ページを再読み込みせずに画面を更新できる。これがExpressアプリケーションでAjaxアクセスを扱う基本形である。

Cookieを使う

Cookieは、アプリケーションでcookieParserを使っていると扱える。値はres.cookieで書き込み、req.cookiesから読み取る。

res.cookie("name", req.body.name);
var name = req.cookies.name;

Cookieは、クライアントごとの小さな状態を保持するために使える。フォームから受け取った値をCookieに保存し、後のリクエストで読み出して表示内容を変える、という流れが基本になる。