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

目次

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

一時的なUIデータをステートに格納する

このステップでは、アプリにクライアントサイドのデータフィルタリングの機能を追加します。具体的には、ユーザがチェックボックスをonにすることで未完のタスクのみを表示するようにします。Reactのコンポーネントステートを使ってクライアントのみで使う一時的な情報を格納する方法を学びます。

まず、Appコンポーネントにチェックボックスを追加しましょう。imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。

チェックボックスの状態はthis.state.hideCompletedから取得しています。Reactコンポーネントはstateという特殊なフィールドを持ち、そこにコンポーネントデータを格納することができます。このthis.state.hideCompletedの値をコンポーネントのコンストラクタで初期化する必要があるため、imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。

this.stateはイベントハンドラからthis.setStateを呼び出すことで更新することができます。これにより、ステートは非同期に更新され、コンポーネントは再レンダリングされます。imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。

さて、renderTasks関数を修正してthis.state.hideCompletedがtrueの場合に完了したタスクを表示しないようにしましょう。imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。

チェックボックスをonにするとタスクリストが完了していないものだけになるはずです。

もう一つの機能: 未完のタスクの数を表示する

未完のタスクだけを取得するクエリが書けたので、同じクエリを使って未完のタスクの数を表示することができます。このためには、データコンテナでその数を取得して、renderメソッドでそれを表示するようにする必要があります。データ自体は既にクライアントサイドのminimongoのコレクションにあるため、この数を数えるためのクエリはサーバに対して追加の処理を要求するわけではありません。

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

想定通り動いているか、アプリを確認しましょう。

次のステップへ

step08: ユーザアカウントを追加する