初めてのMeteor Mongoコレクション

本記事は公式チュートリアル3の内容に沿って説明するものです。

チュートリアルの目次

ここからがMeteorのすごいところです。sample-app.jsの先頭に次のように書きましょう。

Tasks = new Mongo.Collection("tasks");

これがコレクションの定義です。コレクションとはデータ(ドキュメント)を入れる「箱」のようなものです。ここに書くとサーバ側でもクライアント側でも使えるようになります。

mongoのシェルを起動するには、新しいターミナルを開いて次のようにしてください。Meteorのプロジェクトフォルダに移動してから実行する必要があります。

meteor mongo

これで起動します。Meteorではアプリ毎に異なるポート番号でmongodが起動するため、このように起動します。

さて、mongoシェル内で次のようにデータを追加してみましょう。

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

dbのあとに来るtasksがコレクションです。insertの中身はJSONのオブジェクトになります。ここで、下記のようにすると追加したデータを見ることができます。

db.tasks.find({});

コレクションの詳しいAPIは、Meteorのドキュメントにありますので、今後参照にするとよいでしょう。また、基本的には、MongoDBのコレクションと同じですので、MongoDBのドキュメントや解説も参考になります。

mongoシェルは、

exit

と打つと終了することができます。

上記で追加したデータをMeteorのアプリ上で表示させたいと思います。まず、Meteorアプリは立ち上げておきましょう。sample-app.jsのtasksの定義を次のように変更します。

Template.body.helpers({
  tasks: function () {
    return Tasks.find({});
  }
});

正確には変更するのは3行のみです。以前あった配列での定義を置き換えています。この修正をしてファイル保存すると、コードホットプッシュにより、アプリ側の表示も更新されているはずです。”Hello World!”の一つになったら成功です。

変更されたsample-app.jsは、こちらと同じになっているはずなので確認しましょう。

もう一度mongoシェルを起動しましょう。Meteorアプリは起動したままがよいので、新しいターミナルを立ち上げることになります。

meteor mongo

で起動したらtasksコレクションに新しいデータを追加してみましょう。

db.tasks.insert({ text: "task 1 from shell", createdAt: new Date() });

これの入力が終わると即座にMeteorアプリ側に反映されるはずです。ブラウザ上の表示が変わったことに気づいたでしょうか。"task 1 from shell"の部分を変更してもう何件かデータを追加してみてください。ブラウザに反映されるまでの時間も体験できるかと思います。

今回はmongoシェルでデータを入力しましたが、次のステップではアプリのUIから新しいデータを入力するやり方を見ていきましょう。