Hogan.jsの使い方
ExpressのテンプレートエンジンHogan.jsの使い方です。
テンプレートエンジンを使用すると、静的なテンプレートファイルの変数を実際の値に置き換え、クライアントへ送信できます。
Hogan.jsのインストール
npm install hjs
使い方
サーバサイド(抜粋)
viewsディレクトリにテンプレートファイルを置く場合。
/
- views
- main.html
- index.js
const express = require('express');
const app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');
app.get("/", (request, response) => {
// ファイルパス指定の場合.
response.render(path.join(__dirname, 'views/main'), { title: 'welcome', name: 'カモメ' });
});
app.get("/template", (request, response) => {
// テンプレートディレクトリの場合.
response.render('main', { title: 'welcome', name: 'カモメ' });
});
'views'はテンプレートファイルが置かれているディレクトリです。
記述しない場合はアプリケーションのルートディレクトリ内のviewsディレクトリになります。
response.render()がレンダリングメソッドです。第２引数がオプションのパラメータになります。
クライアントサイド
<!doctype html>
<html>
<head>
<meta charset="charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
ようこそ{{ name }}さん。
</body>
</html>
書式
変数の内容を出力
{{ 変数名 }}
変数の内容をHTMLエスケープせずに出力
{{{ 変数名 }}}
コメント
先頭に!を付けます。
{{! コメント}}
ループ
次のように記述します。
{{}}の中はスペース無しにします。
{{#配列名}}
<div>{{ 配列内要素のプロパティ名 }}</div>
{{/配列名}}
サンプル
サーバサイド
const array = [
{ eng: 'January', jp: '１月' },
{ eng: 'February', jp: '２月' },
];
response.render('list', { title: 'test', optArray: array });
クライアントサイド
<!doctype html>
<html>
<head>
<meta charset="charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hogan Sample</title>
<style>
.tcell-1 {
border: 1px solid #ddd;
padding: 4px 10px;
}
</style>
</head>
<body>
<p>{{ title }}</p>
<table>
<thead>
<tr>
<th class="tcell-1">English</th>
<th class="tcell-1">日本語</th>
</tr>
</thead>
<tbody>
{{#optArray}}
<tr>
<td class="tcell-1">{{ eng }}</td>
<td class="tcell-1">{{ jp }}</td>
</tr>
{{/optArray}}
</tbody>
</table>
</body>
</html>
クライアントの表示
分岐
分岐の記述例を以下に記載します。conditionやvariableは判定する変数名です。
{{}}の中はスペース無しにします。
変数が true の場合に処理を行う
{{#condition}}
// condition = true の場合の処理.
{{/condition}}
変数が false の場合に処理を行う
{{^condition}}
// condition = false の場合の処理.
{{/condition}}
変数がbool以外で値が入っている場合に処理を行う
{{#variable}}
// variableに値が設定されている場合の処理.
{{/variable}}
Partials
Partialsは別ファイルの内容をテンプレートに埋め込む場合に使用します。Partialsによって各テンプレートで共通な部分を別ファイルにできます。
サーバサイド
response.render('template', {
partials: {
menu: 'user-menu',
},
});
ここで、'user-menu'は.hjsファイル名です。
クライアントサイド
>で埋め込むファイルを指定します。
{{> menu }}
上記では、テンプレートファイルの{{> menu }}の位置にuser-menu.hjsの内容が挿入されます。
user-menu.hjsではサーバサイドで'template'に渡された変数も参照可能です。
scriptタグ内での使用
scriptタグ内でも同じ記述で利用できます。
// 文字列
console.log("{{ message }}");
// ループ
{{#records}}
console.log('{{ id }}');
{{/records}}
ただし、ループ内で変数の定義はできません。(多重定義になる)
NG
{{#records}}
let id = '{{ id }}';
{{/records}}
OK
let id;
{{#records}}
id = '{{ id }}';
{{/records}}
