MeteorのTutorialを試してみる（１

https://www.meteor.com/install
[前回](http://qiita.com/kazusa-qooq/items/b4f07b79f49924a6cdba)はMeteorがどのようなものか見ていきました。今回は実際にTutorialに挑戦していきます。環境はCloud9です。なお今回は[MongoDBを使う](https://www.meteor.com/try/3)ところまでやります。

#install
各種installerが用意されていますが、Cloud9はMeteorのWorkspaceを作成できるのでそちらを使用します。なおなおWorkspace作成に結構時間がかかりました。構築できたら`meteor --port $IP:$PORT`でサーバを起動しアクセスしましょう。デフォルトで以下のような画面が表示されます。
![image](https://qiita-image-store.s3.amazonaws.com/0/71988/dc49f46f-8020-f8d7-4667-10e19db0801f.png)

#Creating your first app
起動が確認できたら.c9フォルダ以外全て削除しましょう。MeteorはMeteorプロジェクト内に別プロジェクトを作成できないようです。
準備ができましたら以下のコマンドを実行しプロジェクトを作成します。なおcreateしないでそのまま既存のファイルを使っても問題ないと思います。

```
$ meteor create simple-todos
simple-todos: created.                        

To run your new app:                          
  cd simple-todos                             
  meteor                                      
$   
```
できましたね。さっそく起動してみましょう。

```
$ cd simple-todos/    
$ meteor --port $IP:$PORT
[[[[[ ~/workspace/simple-todos ]]]]]          

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://0.0.0.0:8080/

```

さっきと同じ画面が表示されたと思います。
ここでsimple-todos.htmlファイルを開きh1タグ内の文字列を適当に変更して保存してみてください。そうするとブラウザに変更が自動的に反映されます。これをMeteorでは"hot code push"と呼ぶそうです。

#Defining views with templates
ではToDoアプリを作成しましょう。simple-todos.htmlとsimple-todos.jsを以下のように編集します。

``` simple-todos.html
<!-- simple-todos.html -->
<head>
  <title>Todo List</title>
</head>

<body>
  <div class="container">
    <header>
      <h1>Todo List</h1>
    </header>

    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
  </div>
</body>

<template name="task">
  <li>{{text}}</li>
</template>
```

``` simple-todos.js
// simple-todos.js
if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    tasks: [
      { text: "This is task 1" },
      { text: "This is task 2" },
      { text: "This is task 3" }
    ]
  });
}
```
画面は以下のようになります。
![image](https://qiita-image-store.s3.amazonaws.com/0/71988/7b649de5-5802-8dc7-d657-567225d934ec.png)

では解説を見ていきましょう
##HTML files in Meteor define templates
Meteorはアプリケーション内の全HTMLを解析し、トップレベルにあるhead, body, templateを見つけ出します。head, body はクライアントの同タグに送られます。templateは{{>template_name}}に送られます。この場合、body内の{{>task}}です。

##Adding logic and data to templates
HTML内のコードを全てコンパイルされ、
{{#each}} や {{#if}}などはロジックとデータを提供してくれます。
ヘルパを定義することでJavaScriptからHTMLにデータを渡すことができます。上記の例ではtasksがそれにあたります。また`{{#each tasks}}`内では、tasksの各要素がもつtextフィールドを使用できます。

##Adding CSS
本チュートリアルでは、HTMLとJavaScriptに集中するため、CSSは扱いません。
https://www.meteor.com/try/2 の下のほうにCSSが用意されているのでコピーして使用してください。適応すると次のような見た目になります。
![image](https://qiita-image-store.s3.amazonaws.com/0/71988/6e7ffb19-d7cd-e12b-82f6-fca3e4299edd.png)

#Storing tasks in a collection
Meteorではデータの永続化にコレクションを使います。またMeteorではサーバサイド、クライアントサイド両方からアクセスできます。これによりビューロジックでサーバサイドのコードを大量に書かずに済むそうです。ではJavascriptをコレクションを使うように書き換えましょう。

``` simple-todos.js
Tasks = new Mongo.Collection("tasks");

if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    tasks: function () {
      return Tasks.find({});
    }
  });
}
```

現状tasksコレクションは空なので、ブラウザ画面も空になっているはずです。

##Inserting tasks from the console
さしあたり、DBにデータを手動でいれます。まずDBに接続しましょう。

```
$ meteor mongo
MongoDB shell version: 2.4.12
connecting to: 127.0.0.1:8081/meteor
Welcome to the MongoDB shell.
For interactive help, type "help".
For more comprehensive documentation, see
        http://docs.mongodb.org/
Questions? Try the support group
        http://groups.google.com/group/mongodb-user
meteor:PRIMARY> 
```
できましたね。次にinsert文を実行します。

```
meteor:PRIMARY> db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
meteor:PRIMARY>
```

ブラウザ画面をみると自動的に反映されているはずです。次に進むにあたり、いくつかデータを適当に入れといてください。

長くなりましたので一端切ります。[次回](http://qiita.com/kazusa-qooq/items/f4e9bb6cf5f3681d63b0)
Mongoを直書きするんですね。Mongo以外のDBに切り替えるときどうするんでしょう。