JavaScript超初心者向け Meteor メモ (7) テンプレートを使ってみる

# JavaScript超初心者向け Meteor メモ (7) テンプレートを使ってみる

[Meteor.js](https://www.meteor.com/)は、 **Webアプリづくりを楽しくする** フレームワークです。

<a href="https://www.meteor.com/"><img src="http://img.dfm.lrv.jp/meteor7/meteorlogo.png"></a>

## 1.0が出たので

ちょっと触ってない間に1.0になってました。
正直忘れてる部分もある（！）ので、リハビリを兼ねてテンプレートの使い方を見てみようと思います。

## おさらい。インストールとプロジェクト作成

> 毎回インストールの方法を書いているような。。w
> 「もう知ってるよ！」という方は読み飛ばしてください。

Meteorをまだインストールしてない場合、下記コマンドでインストールできます。(LinuxとMacのみ)

```shell
> curl https://install.meteor.com/ | sh
```

「昔インストールしたけど、忘れちゃったなぁ。」
という方は、

```shell
> meteor update
```

で、最新版にUpdateできます。（12/18現在 1.0.1でした。）

Meteorのインストールに成功したら、プロジェクトを作りましょう。

```shell
> meteor create test
```

これで、プロジェクトができます。
testフォルダの中に下記ファイルができていれば成功です。

- test.html
- test.css
- test.js

```shell
> cd test
> meteor
```

これで、実行できます。

ブラウザから、`http://localhost:3000`にアクセスしてみてください。
下記のような画面が出たら成功です。

![最初の画面](http://img.dfm.lrv.jp/meteor7/ss1.png)

# テンプレートを使ってみる。

それでは、テンプレートを使ってみましょう〜！

## {{text}} : 変数`text`に指定した文字を挿入してくれる

最初は、基本中の基本、文字列に置き換えるやつです。`{`は **2つ** です。

html側に`{{text}}`を埋め込みます。（`text`の部分は変数名なので任意）
javascript側で変数`text`テキストを格納すると、その文字を表示してくれるというわけです。

下記のように使います。

```test.html
<head><title>test</title></head>
<body>
  {{textdata}}
</body>
```

```test.js
if (Meteor.isClient) {
  Template.body.textdata = "こんなんでいいのか〜？";
}
```

## {{{html}}} : 変数`html`に指定したhtmlを挿入してくれる

次は、htmlのスニペットを挿入してくれるやつです。`{`は **3つ** です。

html側に埋め込まれた`{{{html}}}`の部分に、javascript側でスニペットが挿入できます。

```test.html
<head><title>test</title></head>
<body>
  {{{htmldata}}}
</body>
```

```test.js
if (Meteor.isClient) {
  Template.body.htmldata = "<div>こんなんでいいのか〜？</div>";
}
```
こんな感じで使います。

## {{> tname}} : `<template name="tname">`の内容を挿入してくれる

`{{> tname}}`のように書くと、htmlの`<body>`の外に書いた`<template>`タグの内容と差し替えてくれるようになります。

`index.html`とテンプレートのファイルを分けたい！といった時に使います。

```test.html
<head><title>test</title></head>
<body>
  {{> tname}}
</body>
```

```tname.html
<template name="tname">
	こんなんでいいのか？
</template>
```

```test.js
if (Meteor.isClient) {
}
```

※Meteorが`meteor create`で最初に作るサンプルのように、ファイルを分けずにやってもいいです。

また、`<template></template>`の中でも先に出て来た`{{text}}`などを使うことができます。
bodyではなく`<template></template>`の中の`{{text}}`に値を指定するには、下記のようにテンプレート名を指定してください。

```js
// <template name="tname"> 内の {{text}} に"ほげほげ"を指定するコード

Template.tname.text = "ほげほげ";
```

こんな感じになります。

```test.html
<head><title>test</title></head>
<body>
  {{> tname}}
</body>
```

``tname.html
<template name="tname">
	{{text}}
</template>
```

```test.js
if (Meteor.isClient) {
  Template.tname.text = "ほげほげ";
}
```

## {{#each arrayname}}〜{{/each}} : arraynameの要素の数だけ繰り返してくれる

繰り返してくれるやつです。
リスト表示とか作るときに便利です。

```test.html
<head><title>test</title></head>
<body>
  {{#each names}}
    <li>{{name}}</li>
  {{/each}}
</body>
```

```test.js
if (Meteor.isClient) {
  Template.body.names = [{name:"エカテリーナ"},{name:"ジョン"},{name:"いか太郎"}];
}
```

![表示結果](http://img.dfm.lrv.jp/meteor7/ss2.png)

## {{#if value}}〜{{else}}〜{{/if}} : valueで条件分岐！

条件分岐してくれるやつです。

```test.html
<head><title>test</title></head>
<body>
  {{#if value}}
    <p>ON</p>
  {{else}}
    <p>OFF</p>
  {{/if}}
</body>
```

```test.js
if (Meteor.isClient) {
  value = 1;

  Template.body.helpers({
    value:function(){
      return Session.get("tt");
    }
  });

  Template.body.events({
    'click': function(){
      console.log("click");
      value ^= 1;
      Session.set("tt",value);
    }
  });
}
```

いきなりめんどくさいコードになりました。。。

要は、`Template.body.value`を`true`にしたらONと表示し、`false`にしたらOFFと表示しているだけなのですが、イベントと絡めるとめんどくさく見えてしまいます。

`Template.body.helpers()`は、テンプレートに値を単純に設定する代わりに関数を設定したい場合に利用するものです。
以前は`Template.body.value = function(){};` のような書き方も出来たのですが、推奨されなくなったようです。

また、「クリックするとON/OFFを切り替える」という動作をさせるために、クリックイベントの中で、`Session`という同期の仕組みも使っています。

[参考: Session](http://docs.meteor.com/#/full/session)

## まとめ：参考リンクなど

Meteorのテンプレートの基本的な部分だけを見てみました。
まだまだ知りたいぞ！という方は、下記も合わせてみてください。

- [Meteor Tutorial (2) Defining views with templates: テンプレートの使い方](https://www.meteor.com/try/2)
- [Spacebars (github):テンプレートの書式についての解説](https://github.com/meteor/meteor/blob/master/packages/spacebars/README.md)をどうぞ〜！
- [Meteor Documentation (Templates):テンプレート操作するAPIについての解説](http://docs.meteor.com/#/full/templates_api)

それでは〜


## バックナンバー

下記もよろしくお願いします！

[JavaScript超初心者向け Meteor メモ (1)](http://qiita.com/tadfmac/items/a63bb85e5cfb12bbbfc8)
[JavaScript超初心者向け Meteor メモ (2) v0.8.0でのテンプレートエンジンの変更について](http://qiita.com/tadfmac/items/823fd909bf3af2f6c7b7)
[JavaScript超初心者向け Meteor メモ (3) シンプルなチャットを作ってみる](http://qiita.com/tadfmac/items/e7e0d95b2affcf2438a9)
[JavaScript超初心者向け Meteor メモ (4) ログイン画面を作る （基本編）](http://qiita.com/tadfmac/items/714654958c127c053d51)
[JavaScript超初心者向け Meteor メモ (5) ログイン画面を作る （Google/Twitterアカウント編）](http://qiita.com/tadfmac/items/5bfe73f181f9b45abe71)
[JavaScript超初心者向け Meteor メモ (6) 外部パッケージを使ってみる](http://qiita.com/tadfmac/items/48d160ecba779237c771)