あらすじ
- 別記事で、「HTMLファイルを読み込んで表示させる」 ということをESオブジェクトでやりました
- ただ、HTMLの中身（変数とか）を変更したりするのが面倒でした
- もっと簡単に変数とか埋め込みたい！と思っていたらテンプレートエンジンに出会いました。
- 色々使えそうなので、記事は２つにしようかと思います。
- 今回は基本編です
準備するもの
- npm で EJSをダウンロードしておいてください
- もしここでnpmって何だろうかと思った方は、この記事を読む前にnpmについての記事を読んでおくことをおススメします。
- うるせぇ！ さっさとEJSダウンロードさせろ！という方は、下記コマンドでインストールできます
npm install ejs
結局・・・EJSって何よ
<%= 値 %>
↑です。
HTMLファイルに変数渡すことができます！
hello.ejs
<html>
<body>
<header>
<h1 id="h1"><%= 値 %></h1>
</header>
</body>
</html>
↑こんな感じ
EJSは、
- HTMLファイルの中で「動的に値を変えたい」時に使えます
- ファイルは「.ejs」という拡張子になります
- このファイルは、「テンプレートファイル」と呼ばれます
- テンプレートファイル内にある、「<%- %>」タグなどの特殊なタグが実際に出力されるテキストに変換されます
サンプル
- hello.ejs
- ejs.js
hello.ejs
<html lang="ja">
<body>
<header>
<h1 id="h1"><%=title %></h1>
</header>
<div role="main">
<p><%-content %></p>
</div>
</body>
</html>
ejs.js
var http = require('http');
// ファイルの読み込み(は、fsオブジェクトが担当する)
var fs = require('fs');
// テンプレートデータのレンダリング(は、ejsが担当する)
var ejs = require('ejs');
// ここは同期処理で読み込みます！
var hello = fs.readFileSync('./hello.ejs', 'utf8');
var server = http.createServer();
server.on('request', doRequest);
server.listen(1234);
console.log('Server running!');
// リクエストの処理
function doRequest(req, res) {
// ここでejsオブジェクトが働きます
var hello2 = ejs.render(hello, {
title:"title",
content:"This is made by sample",
});
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(hello2);
res.end();
}
結果(ちょっとCSSとかで飾りつけしてます)
ポイント!
var hello2 = ejs.render(hello, {
title:"タイトルです",
content:"これはサンプルで作成したテンプレートです。",
});
ejs.render( テンプレートデータ , オプション );
- 第１引数――レンダリングする対象データ（＝読み込んだテンプレートの文字列）を指定します。
- 第２引数――テンプレートに渡す変数などの情報を連想配列にまとめたものを指定します。
第2引数を連想配列（ここではオブジェクト）で渡してやることで、テンプレートファイルに変数を渡すことができます。
まとめ
EJSは、サーバサイド（js）からテンプレートファイル（html）に変数を渡すことができる！
次回に続く