Hogan.jsの使い方

Express
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>
クライアントの表示
Hogan.jsの出力

分岐

分岐の記述例を以下に記載します。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}}
にほんブログ村 IT技術ブログへ

関連記事

コメント

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です