Meteor 1.3 React日本語チュートリアル (step09)
Meteorの日本語版のチュートリアルのstep09です。
目次
- 最初のアプリを作成する
- Reactコンポーネントでビューを定義する
- コレクションにタスクを格納する
- フォームを使ってタスクを追加する
- タスクにチェックマークをつける・削除する
- アプリをAndroidやiOSで動かす
- 一時的なUIデータをステートに格納する
- ユーザアカウントを追加する
- メソッドによるセキュリティ (本記事)
- パブリッシュとサブスクライブによるデータフィルタリング
- テストについて
- その後の学習法について
メソッドによるセキュリティ
このステップより前では、アプリのすべてのユーザがデータベースの任意の部分を編集可能でした。これは小さな内部アプリやデモの場合は問題ないかもしれませんが、実際のアプリの場合はデータに対する権限を制御する必要があります。Meteorでは、このためにmethodsを定義するのが一番よい方法です。クライアントコードから直接insertやupdateやremoveを呼び出すのではなく、ユーザにそのアクションの権限があるかを確認してからデータベースに変更を加える処理をするメソッドを呼び出します。
insecureパッケージを削除する
新しく作られたMeteorプロジェクトにはデフォルトでinsecureパッケージが追加されています。これはクライアントから直接データベースを編集することを可能にするパッケージです。これはプロトタイピングには便利ですが、そろそろ便利なものを外すことにしましょう。このパッケージを削除するには、アプリディレクトリで下記を実行してください。
|
|
このパッケージを削除してからアプリを使おうとすると、入力フィールドやボタンが機能しないことに気づくはずです。これは、すべてのクライアンサイトのデータベース操作の権限が無効になったためです。そこでメソッドを使って、アプリの一部を書き直す必要があります。
メソッドを定義する
まず、いくつかのメソッドを定義する必要があります。クライアントで行いたいデータベース操作毎に1つのメソッドを定義する必要があります。メソッドはクライアントとサーバで実行されるコードの中で定義すべきです。これについては本記事後半の「オプティミスティックUI」にて解説します。
imports/api/tasks.jsを下記のように修正してください。修正後のファイルはこちらのようになります。
上記でメソッドを定義したので、コレクションを操作している箇所を代わりメソッドを使うように変更する必要があります。
imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
続いて、imports/ui/Task.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
これにより、入力フィールドやボタンが再び機能するようになったはずです。これらの修正によって何ができたかでしょうか。
- タスクをデータベースに追加する際に、安全にバリデーションできるようになりました。バリデーション内容は、ユーザがログインしていること、
createdAtフィールドが正しいこと、ownerフィールドとusernameフィールドが正しく、かつ、ユーザがなりすましをしていないこと、です。 setCheckedとdeleteTaskにも同様のバリデーションを追加することができます。後半のステップでタクスをプライベートにする機能を追加する際に行います。- クライアントコードはデータベースロジックと分離されました。イベントハンドラ内で多くの処理が行われていたのを、どこからでも呼び出せるメソッドに分けることができました。
オプティミスティックUI
さて、なぜメソッドをクライアントとサーバの両方で定義するとよいのでしょうか。これは「オプティミスティックUI」のためです。
クライアントがMeteor.callを使ってメソッドを呼び出すと2つのことが同時に起こります。
- クライントがサーバにリクエストを送り、安全な環境でメソッドを実行する。これは、通常のAJAXリクエストと同様。
- クライアントで直接メソッドをシミュレーションして実行する。これはクライアントにある情報を使ってサーバでの実行の結果を予測することになる。
これが意味することは、新しく追加されたタスクは、サーバから結果が返ってくるより前に、画面上に現われるということです。
もしサーバからの結果がクライアントでのシミュレーション結果と同一であれば、すべてはそのままです。一方、もしサーバからの結果がシミュレーション結果と異なればクライアント側はサーバ結果に合わせて修正され、UIも修正されます。
メソッドとオプティミスティックUIに関する詳細は、Meteor GuideのMethodsの記事やオプティミスティックUIに関するブログ記事を参照してください。
次のステップへ
step10: パブリッシュとサブスクライブによるデータフィルタリング