JavaScriptのテンプレートエンジン「Handlebars.js」を使ってみよう

JavaScriptのテンプレートエンジン「Handlebars.js」を使ってみよう

『Handlebars.js』はJavaScriptのテンプレートエンジンの一つです。

そしてテンプレートエンジンとはプログラムロジックとプレゼンテーション階層を分離するための手段であり、「Mustache.js」を基盤に具現したテンプレートになります。

また、「Mustache」は口ひげの形をした{{}}Bracketを利用してdataを表現することを意味しています。

一番最初にやること

http://handlebarsjs.com/
上記の本家サイトから「Installation」→「Download***」ボタンをクリックしてライブラリファイルをダウンロードします。

『Handlebars.js』の基本的な構造

ハンドルバーテンプレートはscriptタグ中のtypeに対し、「”text/x-handlebars-template”」といったような記述を加えることが前提となります。そしてテンプレート内の構造に「{{}}」で覆われた部分がデータのバインディングとなる部分です。

「{{#users}}」と「{{/users}}」の中に入っているhtmlタグusersという配列が長ければ長いほど、繰り返すことになります。そして、その内部の「{{id}}」は配列要素オブジェクトのid属性の値がバインディングになることを意味しています。

具体的には任意のHTML内に以下ようなソースを記述します。

名前IDメールアドレス
小倉okuraokura@aaa.com
中村nakamuranakamura@aaa.com
渡辺watanabewatanabe@aaa.com

つまり最初にhtmlを定義し、その後に記述したJSでhtml をコントロールしているわけなんですね。JSプログラム内に記入されたJSONデータがテーブルに反映されていることがお分かりいただけましたでしょうか。

ロジックをユーザ定義できる『Handlebars.js』、用途に幅も広がる

前記冒頭でお伝えしたとおり、『Handlebars.js』は「Mustache.js」をベースに開発されていますが、そもそもの「Mustache」との違いは明確です。

「Mustache」は様々な言語に対応しているため、シンプルにデータをバインディングするだけであれば、かなり有力なテンプレートエンジンです。しかし、「if」文やロジックを入れるにはいささか非力だったりします。

その点、『Handlebars』は「if」文や「unless」文などの基本的なものだけでなく、ユーザ定義文を追加することにより、テンプレートエンジン内に簡単なロジックを組ませることができるのです。当然ながら「Mastache」ベースということもあり、互換性は十分。とっても便利です。

次に前回と同じ結果になることが想定されますが、「{{ID}}」の値を元にメールアドレスを動的に作り出してみようと思います。

最初のパラメータとヘルパーの名前を入れ、二番目のパラメータでヘルパーの動作を定義する。下記のコードではidを受けて「’@bbb.com’」という文字列を与えるロジックになります。

そしてその結果は。。。

名前IDメールアドレス
小倉okuraokura@aaa.com
中村nakamuranakamura@aaa.com
渡辺watanabewatanabe@aaa.com

最初の検証と同じ結果にはなりますが、JSプログラム内のJSON構造が異なることが確認できました。

ハンドルバーで提供する基本ヘルパー

ハンドルバーは「if」、「unless」などの基本ヘルパーとユーザ定義ヘルパーを利用して簡単なロジックを実装することができます。

名前IDメールアドレス情報
小倉okuraokura@aaa.com0番目
中村nakamuranakamura@aaa.com1番目
渡辺watanabewatanabe@aaa.com2番目

予定どおり、ちゃんと「情報」項目に*番目という動的値が入ってくれましたね。

配列を繰り返してくれるヘルパーの場合に@記号とともに数番目のインデックスかも区分が可能です。「@first」に最初のインデックスを知ることができ、「@last」で最後のインデックスを確認することができます。

また、当該インデックスが何番目のインデックスか、オブジェクトならどんなオブジェクトかを「@key」を通じて知ることができます。

しかし、「if」はとてもシンプルな「true/false」であれば判別可能であり、「else」と「elseif」を支援します。

また、「unless」は「if」の反対の意味を持つヘルパーになります。つまり、ヘルパー内部で再びヘルパーを使用することも可能ということになります。

まとめ

Githubの普及により、スニペットが大量に普及してきてはいます。

レポートデータなどを仕事で構築する事が多い当社(ショーケース・ティービー)では、tableデータをhtmlをベースにコントロールできるこうしたライブラリは非常に重宝するツールなのです。

作ってくれた開発者に感謝!!

参考

本家ページ
Handlebars.js
http://handlebarsjs.com/

Mastache.js
https://github.com/janl/mustache.js/

【週刊bitWave】(メルマガ)始めました!
登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...