JavaScript
Node.js
HTML5
ejs
gulp

EJS と gulp を利用した HTML の生成


HTML ジェネレーターを探す

HTML + JavaScript のファイルを Amazon S3 にホスティングするなどして、

REST API のクライアントアプリケーションとして利用する方法は近年しばしば用いられます。

今回、ホスティングするための静的ファイル群を効率的に開発するため、いわゆる「静的HTMLジェネレーター」を以下の要件で調査していました。


必要な機能


  • コンポーネントとして HTML を作成し、include で再利用できるような仕組みがあること

  • 変数に値を埋め込めること

  • 記法はあくまで HTML ベースであること

要するにヘッダやフッタ、サイドバーなど全ページで利用するコンポーネントを include したいだけということですね。


不要な機能


  • HTML 以外の記法で書けること

  • Markdown で書いたテキストが HTML化されること

  • 豊富なテーマがあること

ブログや CMS 的な目的では利用しないため上記の機能は利用しません。


調査結果

EJS と gulp の組み合わせが良さそうなことが分かりました。

「静的ファイルジェネレーター」や類似するワード(日英問わず)で検索すると、Jekyll を筆頭にいくつかの定番とおぼしきツールが見つかります。しかし、その多くは CMS 的に利用されることを想定した多機能なツールでした。

上述の通り、HTML を DRY で管理できると がおもな目的である今回はもっとシンプルなツールのほうが適していると考え、テンプレートエンジンを単体、または単体に近い状態で利用する手段を探した結果です。


EJS とは

EJS は、Node.js で利用するテンプレートエンジンです。HTML の中にコードを埋め込む癖のないスタイルです。外部ファイルの include も行えます。

gulp については JavaScript のモダン開発環境を求めて 〜 前編・Riot.js 導入まで - Qiita でも簡単に触れているので割愛します。gulp のplug-in として - gulp-ejs を利用します。


EJS のインストール

npm -g install gulp  

npm install ejs gulp gulp-ejs gulp-plumber --save-dev

パラメータを定義する var.json を作成します。


var.json

{

"commonTitle": "タイトルです"
}


コンポーネントの作成

HTML のヘッダ部分のテンプレートを作成します。


header.ejs

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset=UTF-8">
<title><%= commonTitle %></title>
</head>
<body>

HTML のフッタ部分のテンプレートを作成します。


footer.ejs

<div id="footer">&copy; 2015 eurie Inc.</div>

</body>
</html>

header.ejs と footer.ejs は _layout ディレクトリにでも入れておきます。

ページ本体の HTML を作成します。


index.ejs

<%- include('../_layout/header') -%>

<h1>Index ページ</h1>
<p>ヘッダとフッタを include しています。</p>
<%- include('../_layout/footer') -%>

index.ejs は _page ディレクトリにでも入れておきます。


ビルド

gulpfile.babel.js を作成します。主要部分のみ抜粋。


gulpfile.babel.js

gulp.task('ejs', () => {

var json = JSON.parse(fs.readFileSync('./var.json'));
gulp.src(['./_page/*.ejs'])
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(ejs(json))
.pipe(gulp.dest('./_build/'));
});

gulp を実行します

gulp ejs

以下の HTML build/index.html が生成されます。


index.html

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset=UTF-8">
<title>タイトルです</title>
</head>
<body>
<h1>Index ページ</h1>
<p>ヘッダとフッタを include しています。</p>
<div id="footer">&copy; 2015 eurie Inc.</div>
</body>
</html>


付録・候補にあがったツールなど


HTML ジェネレーター

Jekyll はとても有名なようです。Node.js では Metalsmith が良さそうでした。Hugo は Go言語製で、テンプレートもモダンで大変興味をそそられました。Pelican は Python 製で、Jinja2 を利用できることがよい点です。

これらはいずれも、あくまで多機能すぎて目的に沿わないため選外になったことを申し添えておきます。


テンプレートエンジン

Jade は HTML のタグや、入れ子構造をシンプルな表記で記述できるテンプレートエンジンです。今回はむしろ HTML を書きたかったので選外としました。 ectEJS は plug-in を含めた更新状況を鑑みて EJS に決定しました。


参考文献