Node.js/TemplateEngine

Node.js｜TemplateEngine

テンプレートエンジンとは

テンプレートエンジンとは、テンプレートファイルと呼ばれる HTMLの雛形に、<% %> や {{ }} などのスクリプトデリミタ*1を使って書かれた変数部分にデータを埋め込んでHTMLを生成する仕組みです。テンプレートファイルは、サーバーにリクエストがある都度必要なデータを読み込んで HTMLに変換・応答します。Node.js で利用できるテンプレートエンジンには以下のようなものがあります。テンプレート特有の表現があるので、それぞれ、学習コストがかかります。

EJS：http://ejs.co/　Apache License, Version 2.0
Hogan.js：http://twitter.github.io/hogan.js/　Apache License, Version 2.0
Mustache：http://mustache.github.io/　MIT License
Handlebars：http://handlebarsjs.com/　MIT License
Swig：http://paularmstrong.github.io/swig/　独自ライセンス

↑

EJS で体験

↑

EJS の概要

EJS は Node.js では定番のテンプレートエンジンです。Node.js に標準で同梱されるものではないので、パッケージマネージャを使ってインストールすることが必要です。

テンプレートファイルの拡張子は .ejs です。

スクリプトデリミタは、以下のようなパターンで、任意の値を埋め込むことができます。
- ＜%= キー名 %＞
  サーバーサイドでキー名に指定した値を書き出します。
  HTMLタグが含まれていた場合はエスケープされます。
- ＜%- キー名 %＞
  サーバーサイドでキー名に指定した値を書き出します。
  HTMLタグが含まれていた場合もエスケープされません。
- ＜% 処理 %＞

以下、実際に簡単なプロジェクトを作ってみましょう。

↑

プロジェクトの準備

適当な場所に myProject フォルダを作って下さい（どこでも可）
ターミナルでそこへ移動します。
```
$ cd /Users/XXXX/myProject
```

↑

プロジェクトの初期化（package.json の生成）

プロジェクトの初期化作業を行います。以下のコマンドは、当該ディレクトリをプロジェクトの現場にするのに必須の作業です。
```
$ npm init
```

タイトルのみ入力して（ここでは sample_site）、その他はそのままエンターで構いません。ディレクトリー内には、package.json という名称のファイルが出来上がります。

{
  "name": "sample_site",
  "version": "1.0.0",
  "description": "sample",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "koichi inoue",
  "license": "ISC"
}

package.json はパッケージのバージョン情報を保持したJSON形式のデータで、この存在によってフロントエンドで使用するパッケージのバージョン管理を一元化することができます。

↑

EJS のインストール

$ npm install ejs

node_modules フォルダ内に ejs フォルダができ、そこに ejs パッケージがインストールされます。

package.json にはインストール情報が蓄積される仕組みになっていて、このタイミングで、以下のコードが追加されています。
```
"dependencies": {
   "ejs": "^2.6.2"
}
```

↑

.ejsファイルの作成

myProject フォルダに以下のコードを template.ejs として保存します。

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title><%= title %></title>
</head>
<body>
  <%- heading %>
  <ul>
    <% arr.forEach(function(val) { %>
    <li><%= val %></li>
    <% }) %>
  </ul>
</body>
</html>

↑

index.js （サーバー）の作成

myProject フォルダに以下を index.js として保存して下さい。
index.js は、 package.json に記載された "main": "index.js", のことです。
Node.js で実行させるファイルになります。

var http = require('http');
var fs = require('fs');
var ejs = require('ejs');

var temp = fs.readFileSync('./template.ejs', 'utf-8');

var server = http.createServer(function(req, res) {
  // 第一引数：テンプレート、第二引数：値
  var data = ejs.render(temp, {
    title: 'SampleSite',
    heading: '<h1>EJS Sample</h1>',
    arr:['美術', 'デザイン', '写真']
  });
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.write(data);
  res.end();
});

//Localhost の 8000 ポートで待機
server.listen(8000);
console.log('Server running at http://127.0.0.1:8000.　QUIT > [CTRL + C]');

↑

起動と動作確認

起動するには、node コマンドを使う方法と、package.json に起動コードを書いて npm コマンドを使う方法があります。

1. node コマンドで、index.js を起動

$ node index.js
Server running at http://127.0.0.1:8000.　QUIT > [CTRL + C]

2. npm コマンドで起動
package.json に、以下のように起動コードを追加すると、npmコマンドからの起動ができます。

　：
  "scripts": {
    "start":"node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
　：

起動は以下のコマンドです。

$ npm start 
Server running at http://127.0.0.1:8000.　QUIT > [CTRL + C]

ブラウザでローカルサーバーにアクセスしてみます
```
http://localhost:8000
```

以下のように表示されるはずです

EJS Sample

   1. 美術
   2. デザイン
   3. 写真

↑

参考：package.json のプロパティー

name：モジュールの名前（必須）
npmモジュールは name と versionで一意となる前提なので、他のライブラリと名前が重複してはいけません。
version：モジュールのバージョン（必須）
private：true になっていると非公開
description：モジュールの説明
main：モジュールの中で最初に呼ばれるファイルを指定＞ index.js
scripts：任意の shell script を実行するエイリアスコマンドの定義
repository：ソースコードが管理されている場所

author：作者名。一般に以下のように記載

{ "author": "Koichi Inoue <xxxx@gmail.com> (https://github.com/koichi-inoue/)" }

license：ライセンス情報
dependencies：依存するモジュールとバージョンを記述
devDependencies：npmに公開するモジュールを開発するときに定義