Handlebars.jsっていうjavascriptのテンプレートエンジンを勉強したのでそのまとめ

このエントリーをはてなブックマークに追加

Handlebars.jsっていうjavascriptのテンプレートエンジンを勉強したのでそのまとめ

今日は、現場で使っているjavascriptのテンプレートエンジン、Handlebars.jsについて勉強したのでまとめます。結構、わかりやすいので学習コストが低いのがいいですね。

handlebars.jsとは

Handlebars.jsはjqueryのテンプレートエンジンです。JavaScriptのプロパティを参照してそれをHTMLのテンプレートとして利用できます。

jQueryではappendでhtmlなどのコンテンツを挿入できますよね。でも、appendだと複雑な構造のhtmlを挿入したい場合などにどうしてもコードを書くのが大変ですし、視認性もメンテナンス性もよくないですよね。

そこでHandlebars.jsを使用することでコードをすっきりさせて視認性もメンテナンス性もよくすることができます。

メリット

・Gruntのプラグインのため学習コストが低い
・クライアントサイド、サーバサイド両方で利用でき、プリコンパイルも可能
・サーバーにSSI、PHP等を設定しなくても簡単なインクルードやデータを元にしたテンプレート処理が行える
・独自関数を作って、テンプレート内に埋め込む事ができる。

デメリット

・gulpプラグインもあるが、動作が不安定という情報もあり?
・ページ数が増えれば、コンパイルに時間がかかってしまう
・自由度が高い分、ページが多い程分岐条件が多くなったりと複雑化しやすい。

参考:JavaScriptテンプレートエンジンまとめ

ほかのjsのテンプレートエンジンも記載されていて比べることができますね。参考になると思います。ちなみに、僕が行っている現場では、Handlebars.jsのプリコンパイルはgulpでやっていますが、動作的に問題とかはいまのところなさそうです。

handlebarsのインストール

まずはjQueryとhandlebarsをインストールします。
※例でjQueryも使うのでjQueryもインストールします。

今回は「bower」を使ってインストールしています。もし「bower」が入っていない場合はご自分のPCに入れておくといいかもです。かなり便利!!

参考:Bower入門(基礎編)

bower install jquery handlebars

これで、「bower_components」というディレクトリができていて中に、「handlebars」と「jquery」のディレクトリも出来上がっていると思います。そしたら、handlebarsを使いたいhtmlファイルに

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/handlebars/handlebars.js"></script>

を追記すればhandlebars.jsとjQueryが使えるようになりますね。

基本的にはjQueryのように、呼び出せば使えるって感じです。簡単に導入できるのもいいですよね。

基本的なhandlebars.jsの書き方

それではhandlebarsを書いてみます。

ちなみに本家サイト: handlebars.js

英語ですがかなり詳しく書いてあるので参考になると思います。ぜひ一度見てみてください。

書き方の基本は「{{}}」です。
{{name}}とかっていう書き方になります。んで、「name」の部分がjavascriptのプロパティになります。それを参照しているわけですね。わかりやすい!!では実際に書いてみます。

今回は、sample_01.htmlというファイルで作成します。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="bower_components/handlebars/handlebars.js"></script>
	<script type="text/x-handlebars-template" id="tmpl">
			<h1>{{name}}</h1>
			<div>{{team}}</div>
	</script>
	<script>
		window.onload = function(){
			var source = $('#tmpl').html();
			var template = Handlebars.compile(source);
			var values = {
				name : 'アンドレア・ピルロ',
				team : 'ユベントス'
			};

			var html = template(values);
			$('#output').html(html);
		}
	</script>
	<title>Document</title>
</head>
<body>
<div id="output">	
</div>
</body>
</html>

これでブラウザで確認するとnameとteamが表示されているはずです。簡単に説明すると、valuesの中身を参照して#tmplの中身にそれぞれ代入したら、#outputの中身にマークアップしてねというかんじです。

結構直感的にわかりやすいのがHnadlebars.jsの特徴ですね。

マークアップの部分を別個にしてみる

上記の方法だとjsの中身にマークアップしなくてはいけないので、ちょっと書きづらいですよね。なので、マークアップの部分を別個で書いてみることをやってみましょう。.hbsというhandlebars.jsの拡張子を使って書きます。さらにプリコンパイルをしておくことでさきほどのサンプルのようにコード内でコンパイルするよりも表示速度を速めることができます。

ようするに、あらかじめコンパイルしておこうってことですね。

まずは、プリコンパイルできるようにhandlebarsをnpmでインストールする

npm (Node Package Manager) を使って、Handlebars.jsをインストールします。でないと、Handlebars.jsのプリコンパイルが出来ません。

sudo npm i -g handlebars

これで、npm Handlebars.jsがインストールされたと思います。

実際に書いてみる

まずはこの部分が今回別個にしたいとこですよね。ここを別ファイルにコピーしましょう!!

<script type="text/x-handlebars-template" id="tmpl">
	<h1>{{name}}</h1>
	<div>{{team}}</div>
</script>

新しく「sample_tmpl.hbs」というファイルを作ってそこにマークアップ部分をコピペします。

<h1>{{name}}</h1>
<div>{{team}}</div>

sample_01.htmlの以下の部分は消してしまってOKです。

<script type="text/x-handlebars-template" id="tmpl">
		<h1>{{name}}</h1>
		<div>{{team}}</div>
</script>

ここまで、できたら後は以下のコマンドを叩くとプリコンパイルできます。

handlebars sample_tmpl.hbs -f sample_tmpl.js

同じディレクトリ内に「sample_tmpl.js」が出来上がったかと思います。そしたら、sample_01.htmlにそのjsファイルを読み込むようにしましょう。

<script type="text/javascript" src="sample_tmpl.js"></script>

を追記してくださいね。
そしたら後はsample_01.htmlのほうをちょっと修正です。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="bower_components/handlebars/handlebars.js"></script>
	<script type="text/javascript" src="sample_tmpl.js"></script>
	<script>
		window.onload = function(){
			var html = Handlebars.templates['sample_tmpl.hbs']({
					name : 'アンドレア・ピルロ',
					team : 'ユベントス'
			});
			$('#output').html(html);
		}
	</script>
	<title>Document</title>
</head>
<body>
<div id="output">	
</div>
</body>
</html>

これでブラウザで確認すると最初に確認したものと同じように表示されていますよね。これでマークアップ部分を別個にすることができてなおかつプリコンパイルされていることで表示速度も若干早くなります。今回はコードが少ないので多分体感できないと思いますが・・・。

ただ、上記の場合だとプリコンパイルのたびにコマンドを叩かないといけないので結構面倒くさいです。このへんをgulpとかgruntで自動化したいですね。

もともとhandlebarsで用意されているhelper

handlebars.jsではもともとhelperが用意されています。たとえば、「each」で要素を順番に表示をさせたり、「if」を使って条件で表示分けもできます。

each

要素を順番に表示させることができます。下記の場合ならユベントスの選手をそれぞれ参照して、順番に表示できます。

sample_01.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="bower_components/handlebars/handlebars.js"></script>
	<script type="text/javascript" src="sample_tmpl.js"></script>
	<script>
		window.onload = function(){
			var html = Handlebars.templates['sample_tmpl.hbs']({
					juventus :[
						{name: 'ピルロ', nationality: 'Italy'},
						{name: 'マルキージオ', nationality: 'Italy'},
						{name: 'ポグバ', nationality: 'France'},
						{name: 'ビダル', nationality: 'Chile'},
					]
			});
			$('#output').html(html);
		}
	</script>
	<title>Document</title>
</head>
<body>
<div id="output">	
</div>
</body>
</html>

sample_tmpl.hbs

<table>
	{{#each juventus}}
		<tr>
			<td>
				{{name}}
			</td>
			<td>
				{{nationality}}
			</td>
		</tr>
	{{/each}}
</table>

あとはコンパイルのコマンドを叩いて確認してください。

if/unless

条件をつけて出し分けたりすることができます。ifはよくあるやつですね。unlessはifの逆です。

{{#unless juventus}}
<table>
	{{#each juventus}}
		<tr>
			<td>
				{{name}}
			</td>
			<td>
				{{nationality}}
			</td>
		</tr>
	{{/each}}
</table>
{{/unless}}

の場合だったら、juventusじゃなかったらという条件になります。もちろん{{else}}も使えるので、条件に合わない場合の表示もできます。このへんは現場でもよく使っていて、たとえば「ログインしていなかったら」とか「アプリじゃなかったら」とかでバナー出し分けたいとかできます。

with

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="bower_components/handlebars/handlebars.js"></script>
	<script type="text/javascript" src="sample_tmpl.js"></script>
	<script>
		window.onload = function(){
			var html = Handlebars.templates['sample_tmpl.hbs']({
					delpiero: {
						firstname: 'アレッサンドロ',
						lastname: 'デルピエロ'
					}
			});
			$('#output').html(html);
		}
	</script>
	<title>Document</title>
</head>
<body>
<div id="output">	
</div>
</body>
</html>

上記のような場合には実際は

	<p>{{delpiero.firstname}}・{{delpiero.lastname}}</p>

って書かなければいけないところを

{{#with delpiero}}
	<p>{{firstname}}・{{lastname}}</p>
{{/with}}

というように書くだけで上記と同じ結果にできる。

コンパイルはgulpを使うのが現実的

せっかくhbsでマークアップを別々にしたのに、都度コンパイルのコマンド叩いていたらめんどくさいですよね。なので、実際現場ではgulpを使ってコンパイルをしています。今回はこのへんの詳しい説明は省かせていただきますが、コンパイルの自動化をして作業を進めるのが現実的かなと思います。

gulpでのコンパイルについても今度記事にしようと思います。

まとめ

他にもHelperは用意されているのですが、現場でよく使うのが上記のeach,if,unless,withだったので、これくらいで。あとは自分でhelperを定義することもできます。その辺はおいおいブログの記事にしていこうかなと思います。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ