[node.js + express]フォームで送信されたデータにアクセスする

実行環境
OS Mac OS X 10.8.2
node v.0.8.3
express v3.0.3

bodyParser ミドルウェア

クライアントから express アプリケーションへ HTTP の POST メソッドでデータ送信した場合、( 正確には Content-Type が application/x-www-form-urlencodedか multipart/form-data のリクエストを送信した場合) リクエストが bodyParser ミドルウェアを経由すると、req.body オブジェクトにメッセージボディの値が追加されます。

また、メッセージボディの各パラメータ名が JavaScript のオブジェクトとして解釈できる場合は、オブジェクトにパースしてから req.body に追加してくれます。
もちろん、配列やネストしたオブジェクトでも問題なくパースしてくれます。

例として、entry というリソースを生成するフォームを jade で作成しました。

_form.jade

form(method="POST", action="/entries")

  label お名前
    input(type="text", name="entry[author][name]", id="entry[author][name]")
  br
  label タイトル 
    input(type="text", name="entry[title]", id="entry[title]")
  br
  label 本文 
    textarea(name="entry[body]", id="entry[body]")
  br
  lebel　カテゴリ(複数可)
    input(type="checkbox", name="entry[category][]", value="diary")
    | 日記
    input(type="checkbox", name="entry[category][]", value="memo")
    | メモ 
  br
  input(type="submit")

上記フォームからのリクエストが bodyParser ミドルウェアを経由すると、 req.body.entry は下記のようなオブジェクトになります。

{ entry:
   { author: { name: 'takeshi' },
     title: 'test',
     body: 'This is test.',
     category: [ 'diary', 'memo' ] 
   }
}

関連性のある値をまとめることで、コードの可読性が上がるとともに、新しいオブジェクトを生成する際など、以下のような簡潔な記述が可能となります。

app.js

app.use(express.bodyParser());

var Entry = require('./models').Entry; 
app.post('/entries', function(req, res){

  //mongoose で Entry オブジェクトを生成
  var new_entry = new Entry(req.body.entry);
  new_entry.save(function(err){
    res.redirect('/entries');
  });
})

まとめ

• bodyParser ミドルウェアを使うと、 req.body にリクエストボディの値が追加される。
• リクエストボディのパラメータ名を JavaScript のオブジェクトとして解釈できる値にすると、オブジェクトにパースして req.body に追加してくれる。

[node.js + express]フォームデータ を PUT や DELETE で送信する

実行環境
node v0.8.3
express v3.0.3

HTTPメソッドの書き換え

methodOverride ミドルウェアを使うと、フォームのデータを PUT や DELETE といった、POST, GET 以外の HTTPメソッドで(擬似的に)サーバーに送信することが可能になります。

設定は簡単で、送信したい HTTPメソッド名を、_method という名前でフォームから POST で送信するだけです。下記は、フォームデータを DELETE メソッドとして送信する jade のサンプルです。

form(method="POST", action="/entries/#{entry._id}")
  input(type="hidden", name="_method", value="DELETE" )

  input(type="submit", value="削除" )

このフォームで設定されているメソッドはあくまで POST のため、フォームデータは通常通り POST メソッドで送信されます。
しかし methodOverride を使用しているアプリケーションは、送信された _method の値から、リクエストは DELETE メソッドで送信されたと解釈します。(実際には、req.method の値を _method の値で上書きしています。methodOverride の詳しい処理は こちら のソースコードを確認してみてください。)

そのため、上記のフォームから送信されたリクエストは、app.post() ではなく、app.delete() でマッピングされたルートとマッチします。

app.delete('/entries/:id', routes.entries.destroy);

RESTful な URL

methodOverride の HTTPメソッド書き換え機能を利用することで、以下のような RESTful な URL を構築することができます。

app.js

app.get ('/entries', routes.entries.index);
app.post('/entries', routes.entries.create);

app.get('/entries/new'     , routes.entries.new);
app.get('/entries/:id/edit', routes.entries.edit);

app.get   ('/entries/:id', routes.entries.show);
app.put   ('/entries/:id', routes.entries.update);
app.delete('/entries/:id', routes.entries.destroy);

まとめ

methodOverride　ミドルウェア を使うと、 form から 任意の HTTP メソッドでデータをサーバーに送信できる。
HTTPメソッド名は、_method という名前で送信する。

[node.js + express] 環境ごとに設定を切り替える

実行環境
node.js v0.8.14
express v3.0.3

環境変数 NODE_ENV

express は、アプリケーションの実行環境を、app.settings.env の値で判断しています。
app.settings.env は、 expressアプリケーション実行時に、環境変数 NODE_ENV の値で初期化されます。（環境変数 NODE_ENV が定義されていない場合は、'development' で初期化します。）

以下のコマンドで、アプリケーションの実行時に環境を指定できます。

$ export NODE_ENV=production && node app.js

app.configure で環境ごとの設定

app.configure では、1番目の引数で設定を反映させる環境を, 2番目の引数で設定用コールバックを指定します。
1番目の値が実際の環境( NODE_ENV, app.settings.env )と一致するときのみ、第2引数のコールバックを実行します。

また、 引数にコールバックのみ渡した場合は、すべての環境で設定用コールバックが呼び出されます。

app.js

//全環境共通の設定
app.configure(function(){
});

//開発環境用の設定
app.configure('development', function(){
});

//本番環境用の設定
app.configure('production', function(){
});

サンプル

express コマンドで生成した app.js を確認すると、development 環境のみの設定として、errorHandler ミドルウェア を呼び出しています。

app.js

app.configure('development', function(){
  app.use(express.errorHandler());
});

このミドルウェアは、エラー内容をフォーマットしてレスポンスで返してくれるため、開発時には非常に役に立ちます。
しかし、本番環境で実行してしまうと、アプリケーションの内部情報をユーザーに表示させることになってしまうため、開発環境のみに限定した設定となっています。

そのため、本番環境では、エラー時には専用のエラーページを表示させる、などの対策が必要になります。

app.js

app.configure('development', function(){
  app.use(express.errorHandler());
});

app.configure('production', function(){
  app.use(function(err, req, res, next){
    console.error(err.stack);
    res.status(500);
    res.render('500', {title: "エラーが発生しました。"});
  });
})

まとめ

express アプリケーションの環境は、環境変数 NODE_ENV で設定する。
app.configure() で、環境ごとの設定を定義する。

[node.js + express]express で エラーをハンドルするミドルウェアを作成する

エラーハンドル用のミドルウェア

エラーハンドル用のミドルウェアと通常のミドルウェアとの違いは、受け取る引数の数です。
エラーハンドル用のミドルウェアは、引数を4つ受け取ります。1番目の引数に渡されるのは、エラーオブジェクトです。

（2012/12/01 追記）エラーハンドル用のミドルウェアは、通常ミドルウェアのチェーンの最後尾で定義します。

app.js

app.configure(function(){

  //省略

  app.use(function(err, req, res, next){
    console.error(err.stack);
    res.send(500, "エラーが発生しました。")
  })
})

（2012/12/01 追記）エラーハンドル用ミドルウェアに処理を渡す

エラーハンドル用ミドルウェアに処理を渡すには、next の引数にエラーオブジェクトを渡して呼び出します。
例えば、routes 内で発生したエラーをエラーハンドルようミドルウェアに渡したい場合は、下記の用に next を呼び出します。

app.get('/entries', function(req, res, next){
  Entry.find(function(err){
    if (err) next(err);

    //通常の処理
  );
);

複数のエラーハンドル用ミドルウェアを連結する

複数のエラーハンドル用ミドルウェアを連結させる場合はも、 next に err を渡して次のミドルウェアを呼び出します。
これにより、特定のエラーのみ処理するミドルウェアを作るなど、より細かくエラー処理を制御できます。

下の例では、3つのエラーハンドル用ミドルウェアを定義していますが、それぞれのミドルウェアでは、

• 標準エラー出力にエラー内容を書き出す
• XMLHttpRequest のリクエストに対する処理で発生したエラーの場合は 、 json でメッセージを返す
• それ以外のエラーでは、専用のエラーページを表示させる

という処理を行っています。

app.js

app.configure(function(){

  //省略

  app.use(function(err, req, res, next){
      console.error(err.stack);
      next(err);
  });

  app.use(function(err, req, res, next){
    if(req.xhr){
      res.json(500, {message: err.message, stack: err.stack});

    } else {
      next(err)
    }
  })

  app.use(function(err, req, res, next){
    console.error(err.stack);
    res.status(500);
    res.render('500', {title: "エラーが発生しました。"});
  })
})

Connect の errorHandler ミドルウェア

ちなみに、express new コマンドで生成したアプリケーションのデフォルトでは、エラーが発生すると、エラー内容がコンソールに表示され、見やすいエラーページが表示されます。
この処理を行っているのは、 app.configure で設定されている、 Connect の errorHandler ミドルウェア(http://www.senchalabs.org/connect/errorHandler.html)です。

app.js

app.configure('development', function(){
  app.use(express.errorHandler());
});

まとめ

エラーハンドリング用のミドルウェアは、4つの引数を受け取り、最初の引数にエラーオブジェクトが渡される。
エラーハンドリングのミドルウェアを連結させる場合は、エラーオブジェクトを渡した next を呼び出す。


参照URL
http://expressjs.com/guide.html#error-handling

[node.js + express]存在しないURLへのリクエストに対して404エラーページを表示させる

express new でアプリケーションの雛形を生成した場合、存在しないURLにリクエストを送信すると、単純に text/plain でエラーメッセージが表示されます。

Cannot GET /do_you_exist

開発段階ではこれで何の問題もないのですが、本番運用時にはこれではいくらなんでもそっけない、ということで、
今回は、存在しないURLへのリクエストに対して、常に404エラー用のページを表示させる方法を紹介します。
(以下サンプルはすべてnode v0.8.3 express 3.0.0beta4 で確認しました)

ミドルウェアでルーティング

express コマンドで生成した app.js では app.configure で設定しているミドルウェアのチェーンの最後で、app.router と　express.static をセットしています。(下記の例では、stylus もセットしています。)

app.js

app.configure(function(){

  //省略

  app.use(app.router);
  app.use(require('stylus').middleware(__dirname + '/public'));
  app.use(express.static(__dirname + '/public'));
});

これらのミドルウェアでは、リクエストに対するルーティングを行っていて、リクエストにマッチするルート（もしくはアセット）が存在すれば、設定された処理を実行してレスポンスを返し、以降のミドルウェアは呼び出さない、という仕組みになっています。

よって、これらのミドルウェアよりも後に配置されるミドルウェアは、ルーティングにマッチしないリクエストを受け取った時のみ実行される、ということになります。

つまり、ここに404ページへ誘導するミドルウェアを作成すればOKです。
下の例では、テンプレートを指定していますが、静的なhtmlでももちろん大丈夫です。(レスポンスのステータスに 404 をセットするのを忘れずに！ )

app.js

app.configure(function(){

  //省略

  app.use(app.router);
  app.use(require('stylus').middleware(__dirname + '/public'));
  app.use(express.static(__dirname + '/public'));

  app.use(function(req, res, next){
    res.status(404);
    res.render('404', {title: "お探しのページは存在しません。"});
  });

もちろん、404エラーページを表示させずに、ログインページやトップページにリダイレクトさせても問題ないでしょう。

まとめ

404エラーページへのルーティングは、middleware で制御する。
404エラーページへルーティングする　middleware は、正規のルーティングを行っている milldeware よりも後に配置する。

[node.js + express]express3.x で flash メッセージを使おう

前回の投稿からずいぶんたってしまいましたが、、最近はnode + express + mongodb でアプリケーションを作っているので、その中で学んだことを少しずつまとめていきたいと思います。

今回は、expressバージョン3.x 以降で、flashメッセージを使う方法を紹介します。

express では、バージョン2.x 以前では req.flash というメソッドが提供されていましたが、3.x では廃止されたようです。
https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x

代替手段として、 session もしくは、connect-flashモジュールを使う方法が挙げられているので、この2つの方法を使ってflashメッセージ機能を実装してみます。

session を使って実装

まずはsessionにflashメッセージをセットします。
なお、実行にはcookieParser と session ミドルウェアが必須となりますので、注意してください。

app.js

app.get('/entries', function(req, res){

    if(!req.user){
      req.session.messages = ["ログインしてください"];
      res.redirect('/login');
    }

    //省略
  });

session に格納されたメッセージを、view から参照できるようにします。
各 route でメッセージを view に渡しても良いのですが、ここでは、view から直接アクセスできる、 res.locals に flashメッセージを格納するミドルウェアを作成しています。
これで、リクエストの度に res.locals.messages は req.session.messages の値で初期化されます。
req.session.messages をクリアするのをわすれずに！

app.js

app.configure(function(){
    //省略

    app.use(express.cookieParser('your secret here'));
    app.use(express.session());

    app.use(function(req, res, next){
      res.locals.messages = req.session.messages;
      req.session.messages = null;
      next();
    });

    //省略
  });

view からは、messages にアクセスすることで、flashメッセージを取得できます。

login.jade

- if(messages)
    each message in messages
      p= message 

connect-flash モジュールを使う

connect-flash(https://github.com/jaredhanson/connect-flash)モジュールを使えば、より簡単にflash機能を実装できます。
設定方法は、connect-flash をミドルウェアとして登録するだけです。
なお、connect-flash の実行には、cookieParser と session ミドルウェア が必須なので、この2つよりも後に connect-flash を呼び出す必要があります。

app.js

var flash = require('connect-flash');

  //省略

  app.configure(function(){

    //省略

    app.use(express.cookieParser('your secret here'));
    app.use(express.session());

    app.use(flash());

    //省略

  });

以上で、req オブジェクトに flash() が追加されました。
メッセージの設定と取得方法は以下のとおりです。

flashメッセージを設定

app.js

app.get('/entries', function(req, res){
    if(!req.user){
      req.flash('alert', 'ログインしてください。');
      res.redirect('/login');
    }

    //省略
  });

flashメッセージを取得

app.js

app.get('/login', function(req, res){
    res.render('login', {message: req.flash('alert')});
  });

まとめ

express3.x 以降では、req.flash の変わりにsession を使うか、connect-flash モジュールを使う。
特別な理由がない限り、しっかりテスト済みの connect-flash モジュールを使うべきでしょう。