Meteorで初めてのセッション変数

本記事は公式チュートリアル8の内容に沿って説明するものです。

チュートリアルの目次

チュートリアルも後半に入りました。ここからは少し実際的な機能に入ります。

セッション変数とは

セッション変数はクライアント側のみで使う変数です。通常のJavaScript変数と似ていますが、ホットコードプッシュでアプリが更新されても変数の中身が変わらなかったり、リアクティブ性を備えていたりと使い勝手がよいです。

完了したタスクを非表示にする機能を追加する

以前のチュートリアルで実装した「完了」タスクを表示上隠すチェックボックスを追加しましょう。この表示はクライアント毎に異なる方がよいので、セッション変数を使います。

sample-app.htmlに次のコードを追加します。<h1>タグのすぐ下に追加しましょう。

<label class="hide-completed">
  <input type="checkbox" checked="{{hideCompleted}}" />
  Hide Completed Tasks
</label>

変更後のファイルはこちらと同じになっているはずなので確認しましょう。

次にsample-app.jsを修正します。1つ目は、イベントハンドラの登録です。次のコードをTemplate.body.events({})に追加しましょう。

1
2
3

"change .hide-completed input": function (event) {
  Session.set("hideCompleted", event.target.checked);
}

これによりチェックボックスを変更する度にチェックボックスの値がhideCompletedというセッション変数に設定されます。

2つ目は、bodyのへルパー関数の追加です。Template.body.helpers({})に次のコードを追加しましょう。

1
2
3

hideCompleted: function () {
  return Session.get("hideCompleted");
}

これによりHTMLで{{hideCompleted}}とするとセッション変数のhideCompletedの値がとれることになります。

3つ目は、bodyのヘルパー関数のtasksの修正です。次のコードで置き換えてください。

tasks: function () {
  if (Session.get("hideCompleted")) {
    return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}});
  } else {
    return Tasks.find({}, {sort: {createdAt: -1}});
  }
}

これによりhideCompletedが設定されている(truthy)場合は、checkedがないものだけに絞り込まれます。そうでない場合は、今まで通りになります。

これら3つの修正を終えたsample-app.jsは、こちらと同じようになっているはずです。

動作確認

“Hide Completed Tasks”のチェックボックスをクリックして完了タスクが非表示になることを確認しましょう。ブラウザのリロードをしたり、別のブラウザを用いたりして、互いに影響がないことも確認しましょう。

未完了タスク数を表示する

未完了タスクのクエリを使って数を表示するようにしてみましょう。

sample-app.htmlの<h1>タグを次のように変更します。

1	<h1>Todo List ({{incompleteCount}})</h1>

変更後のファイルはこちらです。

これを表示するためのヘルパーをsample-app.jsのTemplate.body.helpers({})に追加します。

1
2
3

incompleteCount: function () {
  return Tasks.find({checked: {$ne: true}}).count();
}

変更後のファイルはこちらです。

これで未完了タスク数が表示されるはずです。

確認項目

Hide Completed Tasksのチェックボックスが表示されていること
そのイベントハンドラが登録されていること
そのイベントハンドラが動作すること
未完了タスク数が表示されていること

次のステップ

セッション変数についてはこれで終わりです。次はユーザ管理について学びます。

Menu

Meteor Fan (日本語情報)

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