1.はじめに
みなさん、こんばんは。
今回はNode.jsのテンプレートエンジンである、EJS(Embedded JavaScript)に触れていきます。
EJSは前回触れたJadeと同じテンプレートエンジンです。
EJS公式ページ：http://embeddedjs.com/
2.EJS導入
EJSの導入は簡単です。
Node.jsをインストールしていれば、以下のコマンドで簡単にEJSがインストールされます。
npm install ejs
npmの説明は前回(Jadeに触れてみる)の2.Jade導入を参照してください。
3.EJS
EJSはHTMLのソースコード内に以下のタグを使用して、必要な情報を埋め込むことができます。
<%= 値 %>
この記述は、<%= %>内に記述された値を出力します。
変数等を記述すれば、変数に格納された値を出力します。
<%- 値 %>
この記述は、<%= %>と同じようなことを実現します。
違いは、HTMLタグを記述した場合に、<%= %>はエスケープ処理を行いますが、
このタグはエスケープ処理を行いません。
エスケープ処理とは、
処理系によって特別な意味を割り振られる記号や文字列を、別の記号や文字列に置き換えること。例えば、HTMLで「＜」を表示させる場合は「＆lt;」と記述する。
ということです。
参考ページ：http://goo.gl/0os1q
<% 処理 %>
この記述は、処理を解析し、その結果がレンダリングされます。
サーバ側(Node.js内)で実行され、その結果をクライアントに送られます。
レンダリングとは、
広い意味でデータの可視化一般を指す場合もあり、例えばWebブラウザがHTMLデータを解析して画面に表示することなどを指してレンダリングと呼ばれることもある。
ということです。
参考ページ：http://goo.gl/uuxSK
それでは、実際に触れてみます。
main.js
実処理が記載されている、main.jsから見ていきます。
var http = require('http');
var fs = require('fs');
var ejs = require('ejs');
var sampleEJS = fs.readFileSync('./sampleEJS.ejs', 'utf8');
var sampleEJSContent = fs.readFileSync('./sampleEJSContent.ejs', 'utf8');
var server = http.createServer();
server.on('request', doRequest);
server.listen(1337);
console.log('Server running!');
function doRequest(req, res) {
var hokuto = ejs.render(sampleEJS, {
title: "サンプルEJSページ",
brothers: "4兄弟",
content: ejs.render(sampleEJSContent, {
data: [
"長男：ラオウ",
"次男：トキ",
"三男：ジャギ",
"四男：ケンシロウ"
]
})
});
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(hokuto);
res.end();
}
初めの方の記述の
var ejs = require('ejs');
で、EJSのライブラリを読み込んでいます。この記述により、EJSを使用する準備をしています。
次に、
var sampleEJS = fs.readFileSync('./sampleEJS.ejs', 'utf8');
var sampleEJSContent = fs.readFileSync('./sampleEJSContent.ejs', 'utf8');
で、実際にEJSで記述されたデータを変数に格納します。
これにより、格納されたデータを使用することができます。
そして、
var hokuto = ejs.render(sampleEJS, {
title: "サンプルEJSページ",
brothers: "4兄弟",
content: ejs.render(sampleEJSContent, {
data: [
"長男：ラオウ",
"次男：トキ",
"三男：ジャギ",
"四男：ケンシロウ"
]
})
});
の記述で、読み込んだデータをレンダリングしています。
レンダリングすることにより、EJS内に記述されている値に対して設定した値を代入しています。
また、値には別EJSのデータを設定することも可能です。
sampleEJS.ejs
メインページを表示するsampleEJS.ejsは以下のようになります。
先ほどのmain.js内で記述したtitle、brothers、contentが記述されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body { font-size:12pt;}
h1 { font-size:22pt; color:red; }
h2 { font-size:16pt; color:green; }
</style>
</head>
<body>
<h1 id="h1"><%=title %></h1>
<h2 id="h1"><%=brothers %></h2>
<%-content %>
</body>
</html>
<%= %>、<%- %>を使用し、与えられたデータを出力します。
content部分で<%- %>を使用している理由は、代入するデータ内に
HTMLタグが含まれているため、エスケープ処理を行いたくないからです。
sampleEJSContent.ejs
sampleEJS.ejsのcontent部分にレンダリングされるsampleEJSContent.ejsを見ていきます。
<% data.forEach(function(val){ %>
<%= val %>
<% }) %>
<% %>を使用して、ループ処理を記述しています。
main.jsで与えられたデータ数だけ、表示します。
表示されるページ
最後に、main.jsを実行し、対象のページにアクセスすると以下が表示されます。
クリックすると、大きく表示されます。
4.EJS感想
EJSは私が普段使い慣れているJSP(JavaServer Pages)と記述形式が似ているため、
学びやすかったです。
これなら、JavaでのWebアプリケーション開発経験者なら容易に学べ、学習コストも低そうです。
ただ、HTMLタグを記述することになるので可視性はあまり良くない印象です。
また、同じテンプレートエンジンのJadeよりは記述するソースコードが増えてしまう印象があります。
5.最後に
EJSとJadeの比較をしてるサイトがありました。
私はまだ、EJSとJadeを深く理解できていないので、両者の比較はソースコードの量や、
可視性についてしかわかっていませんが、今後はより深く理解し、
どちらが使いやすいのかを見定めたいです。
では、ここらへんで失礼します！！
