HTMLテンプレートエンジン EJSを触ってみる

EJS

EJSはJavaScriptでHTMLを作成する事ができるHTMLテンプレートエンジン。

いろんな記事を見ているとだいたいGulpとセットで使われている記事ばかりだったので

そういう余計なものは使わず、とりあえずEJS単品の動作について見ていこうと思う。

ブラウザでも動作するみたいだけど、ここではNode.js環境を使っている。

インストール

yarn add -D ejs

とりあえず動かしてみる

index.jsを作成:

let ejs = require('ejs');

// 適当なデータを作成
let enemies = ['スライム', 'ドラキー', '魔法使い'];

// ↑で用意したデータを使ってレンダリング
let html = ejs.render('<%= enemies.join(", "); %>', { enemies : enemies });

// 結果を表示
console.log(html);

実行

node ./index.js

結果

スライム, ドラキー, 魔法使い

ejs.render(str, data, options)がEJSのテンプレートで書かれた文字列をHTMLに変換する。

strにはEJSのテンプレート文字列を指定して、dataには描画に使うデータを渡すみたい。

optionsは特に指定していないけど、いろいろ指定できるっぽい。

テンプレートファイルとデータファイルを分けてCLIからHTMLファイルを作る

EJSではテンプレートになるファイルとデータを定義したファイルを別で用意しておいて

CLIからHTMLファイルを作る方法も用意されている。

正直なところ、公式のドキュメントが簡素すぎてもっと説明が欲しい。

ファイル構成

こんな感じでテンプレートとなるファイルとデータファイルを用意してみた。

root
 ┣━ template.ejs
 ┗━ data.json

template.ejs

<%= enemies.join(", "); %>

data.json

{
  "enemies": ["スライム", "ドラキー", "魔法使い"]
}

CLI

npx ejs ./template.ejs -f data.json -o ./output.html
  • コマンドでテンプレートファイルとデータファイルと出力先のファイルを指定して実行。
  • output.htmlが作成される。

output.html

スライム, ドラキー, 魔法使い

ほんとにこれで動くか心配だったけどうまく動いたみたい。

今回はこんなところにして、次回はもう少し細かくEJSについて見ていこう。