Meteor 1.3 React日本語チュートリアル (step03)

Meteorの日本語版のチュートリアルのstep03です。

目次

1. 最初のアプリを作成する
2. Reactコンポーネントでビューを定義する
3. コレクションにタスクを格納する (本記事)
4. フォームを使ってタスクを追加する
5. タスクにチェックマークをつける・削除する
6. アプリをAndroidやiOSで動かす
7. 一時的なUIデータをステートに格納する
8. ユーザアカウントを追加する
9. メソッドによるセキュリティ
10. パブリッシュとサブスクライブによるデータフィルタリング
11. テストについて
12. その後の学習法について

コレクションにタスクを格納する

コレクションはMeteorでの永続的なデータの保存法です。Meteorのコレクションの特殊なところは、それがサーバからもクライアントからもアクセスできることです。これにより、サーバコードを書かずにビューのロジックを書くことが簡単になります。コレクションは自動で更新されるため、コレクションと連携したビューコンポーネントは自動で最新のデータを表示することになります。

コレクションに関する詳しい説明はMeteor Guideの記事を参照してください。

新しいコレクションを作成するのは簡単で、JavaScriptでMyCollection = new Mongo.Collection("my-collection");のように呼び出すだけです。サーバではこれによりmy-collectionという名のMongoDBコレクションが準備され、クライレントではこれによりサーバのコレクションに接続したキャッシュが作されます。詳しい解説はチュートリアルの後半で行われますが、ここではデータベース全体がクライアントにもあることを前提にコードを書くことができます。

コレクションを作成するために新しいtodosモジュールを定義してMongoコレクションを作りエクスポートします。imports/api/tasks.jsというファイルを下記の内容で作成してください。

このファイルはimports/apiディレクトリに置かれていることに注意してください。アプリのAPIを格納するこの場所には意味があります。今のところは利用するコレクションの定義のみですが、後で読み込みためのパブリケーションと書き込みのためのメソッドを定義します。コードの構成に関する詳細は、Meteor Guideの記事を参照してください。

サーバでこのモジュールをインポートします。これにより、MongoDBのコレクションが作成されクライアントにデータを流す準備をします。server/main.jsのファイルを下記の内容で置き換えてください。

Reactコンポーネント内でコレクションのデータを使う

Reactコンポーネント内でMeteorコレクションのデータを使うには、react-meteor-dataというAtomosphereパッケージを用います。これにより”data container”を作り、MeteorのリアクティブデータをReactのコンポーネント階層に流し込むことができます。

これを利用するためのreact-addons-pure-render-mixinというNPMパッケージもインストールしなければなりません。

meteor npm install --save react-addons-pure-render-mixin
meteor add react-meteor-data

react-meteor-dataを使うには、createContainerを使ってコンポーネントをcontainerの中にラップする必要があります。

imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。

ラップされたAppコンポーネントは、Tasksコレクションからタスクデータを取得し、内側のAppコンポーネントにそのデータをtasks propとして渡します。これはリアクティブに行われるため、データベースの中身が変化した場合Appは再レンダリングします。

上記のコードの変更を行うとtodoリストが消えることになりますがそれは正常です。なぜなら、データベースが空だからです。

サーバサイドのコンソールからタスクデータを追加する

コレクション内の要素はドキュメントと呼ばれます。サーバのデータベースコンソールを使ってコレクションにいくつかのドキュメントを追加してみましょう。新しいターミナルを開いて、アプリのディレクトリに移動し、下記を実行してください。

meteor mongo

これでアプリのローカルデータベースに接続されたコンソールが開きます。下記を入力してください。

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

ブラウザでは、入力した直後に新しいデータが表示されるのが見えるはずです。サーバサイドからフロントエンドに接続するコードを書かずしてこれが実現できるのです。

textの中身を変更してもういくつかのデータを追加してみましょう。次のステップでは、データベースコンソールを使わずにアプリのUIからデータを追加する機能の作り方を解説します。

次のステップへ

step04: フォームを使ってタスクを追加する