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

JavaScriptのテンプレートエンジン「Handlebars.js」を使ってみよう
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

『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/

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。