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>