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

目次

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

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

このステップでは、ユーザがタスクをリストに追加するためのインプットフィールドを追加します。

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

(メモ: JSXコード内では {/* ... */}でコメントを入れることができます)

上記修正で、form要素にonSubmit属性がつきそこにコンポーネントのhandleSubmitが指定されているのが分かるでしょう。Reactでは、このようにしてフォームのイベントなどブラウザのイベントを受け取ります。input要素にはref属性を付与することでコードから要素へのアクセスが簡単になります。

それでは、handleSubmitメソッドをAppコンポーネントに追加しましょう。imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。

これでアプリに入力フィールドができました。タスクを追加するには、フィールドに入力してエンターを押すだけです。新しいブラウザウィンドウを開いてアプリを開けば、リストが同期しているはずです。すべてのクライアントで自動同期します。

Reactでイベントを受け取る

すでにやったように、Reactではコンポーネントのメソッドを直接指定することでDOMのイベントを処理します。イベントハンドラでは、ref属性を指定した要素をReactDOM.findDOMNodeで参照することができます。Reactがサポートするその他のイベントやイベントシステムの仕組みについては、React docsを参照してください。

コレクションに追加する

イベントハンドラでは、Tasks.insert()を呼び出してtasksコレクションにタスクを追加しています。コレクションのスキーマは定義しないため、タスクオブジェクトには作成時間など任意のプロパティを割り当てることができます。

クライアントから任意のデータをデータベースに追加できることは実は安全ではありません。しかし、現時点ではよしとします。チュートリアルの後半のステップで、アプリを安全にするためのデータベースへのデータの追加を制限する方法を解説します。

タスクデータをソートする

現状では、新しいタスクはリストの最後に追加されて表示されます。これはあまり好ましくなく、新しいタスクは最初に見えるようにしたいでしょう。

そこで、createdAtプロパティを自動で追加し、それをもとにソートするようにしましょう。Appコンポーネントをラップしているコンテナにあるfind呼び出しにソートオプションを追加します。imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。

ブラウザに戻って想定通りになっているか確認してください。新しいタスクがリストの最初に追加されるようになったはずです。

次のステップでは、TODOリストの重要な機能を追加します。それはタスクの完了を示すチェックマークをつけることと、タスクを削除することです。

次のステップへ

step05: タスクにチェックマークをつける・削除する