Meteor Fan (日本語情報)

JavaScriptフレームワークMeteorに関していろいろ紹介する日本語情報サイト

Meteorのリアクティブ変数をスコープに閉じる方法

はじめに

Meteorの公式チュートリアルにはSessionを使ってUIの表示を切り替える説明があります。これはとても分かりやすいのですが、リアクティブ変数としてSessionしか教えられないため、目的外のシーンで使ってしまう場合があります。

Sessionはユーザ毎のUIの状態を保持するためのもので、利用シーンとしてはこれまでCookieに入れていたような状態の保持に使うのがよさそうです。それ以外のより汎用的なセッション変数としては、下記の2つがあります。

ReactiveVarは公式ドキュメントに載っていますが、ReactiveDictは載っていません。ReactiveDictの「Future work」によるとReactiveVarと統合したいようです。

使い方説明

ReactiveVarについて簡単に説明します。初めにパッケージをインストールする必要があります。

meteor add reactive-var

Sessionはグローバル変数のような感じで名前の衝突など不便な点がありますが、ReactiveVarは普通の変数のように使えます。よく使う方法はテンプレートの初期化時に作成する方法です。

Template.foo.onCreated(function() {
  this.bar = new ReacitveVar;
});

あとは、Session変数と同じように使えます。例えばヘルパー関数で、下記のようにします。

Template.foo.helpers({
  bar: function() {
    return Template.instance().bar.get();
  }
});

ReactiveVarはSession変数と違いホットコードプッシュでリセットされてしまいますが、それ以外は便利です。Sessioin変数にはセッション情報のみを入れるのに使うのがよいでしょう。

参考記事

下記は本件に関連する記事です。より詳しい説明が載っていますのでご参照ください。

おわりに

チュートリアルだけでは学びきれないことがあります。最終的にはドキュメントに目を通す必要があるでしょう。しかし、ドキュメント化されていないけどよく使われているものがあったり、発展途上のものもあったりします。しかも、そういうものが使えてこそより便利な場合があるなど、悩ましいところです。

例えば、

https://github.com/xamfoo/reactive-obj

このようなパッケージもあるようです。興味ある方は調べてみましょう。