Hogan.jsの使い方

ExpressのテンプレートエンジンHogan.jsの使い方。
テンプレートエンジンを使用すると、静的なテンプレートファイルの変数を実際の値に置き換え、クライアントへ送信できます。

Hogan.jsのインストール

npm install hjs

記述例

サーバサイド(抜粋)

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()がレンダリングメソッドです。第2引数がオプションのパラメータになります。

クライアントサイド

<!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>

構文

変数の内容を出力

{{ 変数名 }}

変数の内容をアンエスケープで出力

{{{ 変数名 }}}

コメント

先頭に!を付けます。

{{! コメント}}

ループ

次のように記述します。
{{}}の中はスペース無しにします。

{{#配列名}}
  <div>{{ 配列内要素のプロパティ名 }}</div>
{{/配列名}}

サンプル

サーバーサイド
const array = [
  { eng: 'January', jp: '1月' },
  { eng: 'February', jp: '2月' },
];
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ループ

分岐

分岐の記述例を以下に記載します。conditionvariableは判定する変数名です。
{{}}の中はスペース無しにします。

変数が 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'に渡された変数も参照可能です。

このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

関連コンテンツ

スポンサードリンク

コメント

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