Node.jsを学ぶ(その10・Expressでアドレスに応じて処理を分ける・事例)

  • 投稿日:
  • by
  • カテゴリ:

一昨日の「Expressでアドレスに応じて処理を分ける」の話に基づいて、簡単な事例を作ってみます。

1.事例

「http://・・・/entry/1」「http://・・・/entry/2」「http://・・・/entry/○」(○は1と2以外)にアクセスされたときに、以下のそれぞれの情報を出力することにします。

IDタイトル(title)本文(text)
1Node.jsV8エンジンをベースにした汎用JavaScript処理系。
2ExpressNode.js用のWebアプリケーションフレームワーク。
1/2以外エラーお探しのページが見つかりませんでした。

2.app.js

アプリケーションを作成した後、app.jsに以下の網掛けの行を追加します。
なお、ビューのテンプレートエンジンとしてEJSを使います(アプリケーションを作成する際に、expressコマンドに「-e」のオプションを指定)。

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , entry = require('./routes/entry')
  , http = require('http')
  , path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);
app.get('/entry/:entry_id', entry.show);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

4行目では、「entry」のルーターオブジェクトを読み込んでいます。
また、28行目では、「/entry/ID」の形のアドレスにアクセスがあった時に、entryオブジェクトのshowメソッドを実行するようにしています。

2.entry.js

アプリケーションのディレクトリの中の「routes」ディレクトリに、「entry.js」のファイルを作り、ルーターのオブジェクトとして動作するようにします。
entry.jsの内容は以下のようにします。

exports.show = function(req, res){
  var id = req.params.entry_id;
  var entry;
  if (id == 1) {
    entry = {
      title:  'Node.js',
      text: 'V8エンジンをベースにした汎用JavaScript処理系。'
    };
  }
  else if (id == 2) {
    entry = {
      title: 'Express',
      text: 'Node.js用のWebアプリケーションフレームワーク。'
    };
  }
  else {
    entry = {
      title: 'エラー',
      text: 'お探しのページが見つかりませんでした。'
    };
  }
  res.render('entry', {
    id: id,
    title: entry.title,
    text: entry.text
  });
};

2行目の文で、変数idに、アドレスのIDの部分(/entry/○○)を読み込みます。
次に、その値に応じて、タイトル(title)と本文(text)を変数entryに代入します(3~21行目)。
そして、id/タイトル/本文を元に、「entry.ejs」というビューのファイルを使って、ページをレンダリングします。

3.entry.ejs

ビュー(entry.ejs)の内容は、以下のようにします。
ルーターから渡されたid/title/textの各変数の値を、title要素等に出力し、ページをレンダリングします。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %>(ID = <%= id %>)</h1>
    <p><%= text %></p>
  </body>
</html>

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください