tyoshikawa1106のブログ

- Force.com Developer Blog -

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


これでローカルサーバを起動できるようになりました。

$ node server.js

f:id:tyoshikawa1106:20150926191346p:plain

EJS Partialsについて

Node.jsの開発でもRailsのようにパーシャルをつかった共通化ができるみたいです。

head.ejs

f:id:tyoshikawa1106:20150928024013p:plain

header.ejs

f:id:tyoshikawa1106:20150928023941p:plain

footer.ejs

f:id:tyoshikawa1106:20150928024100p:plain


パーシャルはこんな感じで用意します。使用するときは次のように宣言します。

<% include ../partials/head %>
index.ejs

f:id:tyoshikawa1106:20150928024218p:plain

about.ejs

f:id:tyoshikawa1106:20150928024552p:plain


これで準備完了です。次のコマンドでローカルサーバを起動して画面にアクセスしてみます。

$ node server.js


無事に画面を表示できました。
f:id:tyoshikawa1106:20150928025008p:plain

追記

expressコマンドで作成したい場合は『-e』コマンドでできたみたいです。

express express_sample -s -e

f:id:tyoshikawa1106:20150928085322p:plain