Node：EJSテンプレートを使った開発の始め方

Nodeを少しさわってみようと思ったのですが最新バージョンではデフォルトの拡張子が『.jade』となっていました。『.jade』のビューの書き方が少し特殊な感じだったのと以前購入しておいた参考書籍では『.ejs』をつかったサンプルコードとなっていたので、『.ejs』を使った開発の始め方について調べてみました。

参考になったサイトがこちらです。

Node Setup

次のコマンドでpackage.jsonを作成します。

$ npm init

f:id:tyoshikawa1106:20150926190154p:plain

EJSテンプレートを使いたい場合、package.jsonに次の宣言を追加すればいいみたいです。

"dependencies": {
  "ejs": "^1.0.0",
  "express": "^4.6.1"
}

f:id:tyoshikawa1106:20150926190425p:plain

package.jsonの準備ができたら次のコマンドを実行します。

$ npm install

f:id:tyoshikawa1106:20150926190558p:plain

続いてViewとserver.jsを用意します。上記サイトのサンプルでは次の構成になっていました。

- views
----- partials
---------- footer.ejs
---------- head.ejs
---------- header.ejs
----- pages
---------- index.ejs
---------- about.ejs
- package.json
- server.js

こんな感じになります。
f:id:tyoshikawa1106:20150926191018p:plain:w300

server.jsの内容です。

// server.js
// load the things we need
var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page 
app.get('/', function(req, res) {
    res.render('pages/index');
});

// about page 
app.get('/about', function(req, res) {
    res.render('pages/about');
});

app.listen(8080);
console.log('8080 is the magic port');

f:id:tyoshikawa1106:20150926191233p:plain