体感!JavaScriptで超速アプリケーション開発 -Meteor完全解説

第5回 Handlebarsの使用法

この記事を読むのに必要な時間:およそ 4 分

今回は,Meteorアプリケーションのビューを作成する上で必要とされるHandlebarsについて解説します。

前回お伝えした通り,MeteorのHTML内ではHandlebarsを用いたテンプレートが利用できます。MeteorにおけるHandlebarsは,Meteorと緊密に統合されており,特別なインストール作業などを必要とする事なく利用できます。

式の実行

前回もお伝えしていますが,テンプレート内では{{式}}という構文で式を実行し,結果をテンプレート上に書き出すことができます。たとえば,⁠personName」という変数を参照するための記述は以下のようになります。

{{personName}}さん,こんにちは!

また,ピリオドを用いて入れ子になっている変数を参照することもできます。以下のコードを実行すると,personという変数のnameプロパティを参照します。

{{person.name}}さん,こんにちは!

また,⁠../」というパス指定により,親のスコープ変数を参照することもできます。これはたとえば,すぐ後に説明するwith句とともに用いるなどの利用シーンが考えられます。

{{#with family}}
  {{#with mother}}
    お母さんの名前は{{name}}です。
    <!-- ../により,family変数を参照できる -->
    お父さんの名前は{{../father.name}}です。
  {{/with}}
{{/with}}

上のテンプレートに対応するJavaScriptコードは以下になります。

if (Meteor.isClient) {
    // 式personNameに対応する値
    Template.simpleVar.personName = 'こうたろう';
    // 式personに対応する値
    Template.nestedVar.person = {
        name: 'ちほ'
    };
    // 式familyに対応する値
    Template.parentVar.family = {
        father: { name: 'しゅんぺい' },
        mother: { name: 'たえこ' }
    };
}

実行結果は以下のようになります。

図1 サンプル5-1の実行結果

図1 サンプル5-1の実行結果

サンプルは以下からダウンロードできます。

ブロック構造の使用

Handlebarsには,条件分岐や繰り返しを行うためのブロック構造が組み込みで提供されています。 こうしたブロック構造は,⁠{{#if}} {{/if}}」のように, ⁠#」で始まり「/」で終了するという形式を取ります。

#withブロック

#withブロックは,引数で渡した変数を現在のコンテキストに設定します。テンプレート内で,入れ子のメンバーが持つ数多くのプロパティにアクセスする場合などに便利です。 たとえば,以下の様なテンプレートがあるとします。dateは日時の情報を格納したオブジェクトです。

現在時刻は
{{currentDate.year}}年
{{currentDate.month}}月
{{currentDate.date}}日
{{currentDate.hours}}時
{{currentDate.minutes}}分
{{currentDate.seconds}}秒
です。

#withブロックを使用すると,以下のようにオブジェクトアクセスを簡略化して記述することができます。

現在時刻は
{{#with currentDate}}
  {{year}}年
  {{month}}月
  {{date}}日
  {{hours}}時
  {{minutes}}分
  {{seconds}}秒
{{/with}}
です。

#withブロックのサンプルは以下からダウンロードできます。

#ifブロック

条件分岐を行うためのブロックです。引数の真偽値に応じて,ブロック内を実行するかどうかが決定されます。

以下のテンプレートは,oddSecondsという式を評価した結果に応じて,実行されるブロックが変わります。また,見ておわかりの通り,間に{{else}}節を含めることができます。

現在時刻は
{{#if oddSeconds}}
  <span style="color: green;">{{dateString}}</span>
{{else}}
  <span>{{dateString}}</span>
{{/if}}
  です。

このテンプレートに対応するJavaScriptファイルは以下のとおりです。テンプレート内で使用されているoddSecondsdateStringといった式の値を返します。

if (Meteor.isClient) {
  // 現在の秒が奇数かどうかを返す
  Template.currentTime.oddSeconds = function() {
      return new Date().getSeconds() % 2 === 1;
  };
  // 現在の日時を文字列にして返す
  Template.currentTime.dateString = function() {
      var date = new Date();
      return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日 '
          + date.getHours() + '時' + date.getMinutes() + '分' + date.getSeconds() + '秒';
  };
}

#ifブロックのサンプルは以下からダウンロードできます。ちなみに,サンプルは「秒の値が奇数の時は文字を緑にする」というもので,あまり意味はありません。

著者プロフィール

白石俊平(しらいししゅんぺい)

株式会社オープンウェブ・テクノロジー代表取締役

HTML5開発者コミュニティhtml5j.org管理人

HTML5とか勉強会主催

Web先端技術味見部 部長

読書するエンジニアの会主催

しろうと哲学部 部長

Google API Expert(HTML5)

Microsoft Most Valuable Professional 2010, 2011(Internet Explorer)

コメント

コメントの記入