【ITニュース解説】Building Reactive Lists with Meteor and Blaze

現代のアプリケーション開発において、ユーザーインターフェース（UI）が常に最新の情報を反映し、リアルタイムで変化に対応することは非常に重要だ。例えば、オンラインストアで在庫が更新されたり、チャットアプリで新しいメッセージが届いたりしたときに、画面が自動的に切り替わることで、ユーザーはストレスなくサービスを利用できる。このようなリアルタイム性を持ったアプリを効率的に作るためのツールの一つが「Meteor JS」というフレームワークだ。Meteorは、データベースからUIまでを一貫してリアクティブ（反応的）に動かす設計思想を持っている。

Meteorのエコシステムの中で、かつてUIを構築するための主要な技術として使われていたのが「Blaze JS」というテンプレートエンジンだ。Blazeはシンプルで使いやすく、Meteorのリアルタイム性を最大限に活用できるように設計されている。しかし、現在ではMeteor開発チームは新しいプロジェクトではReactやVue.jsといった他のUIライブラリを使うことを推奨しており、Blazeは新規開発には向かないとされている。それでも、世の中にはBlazeで構築された既存のアプリケーションが数多く存在するため、システムエンジニアを目指す上では、Blazeの仕組みを理解しておくことは非常に役立つ。既存のシステム（レガシーコードベース）を改修したり、保守したりする際にBlazeに遭遇することは十分にありえるからだ。

アプリケーションの機能の中で、リスト表示は最も一般的なものの一つだ。ユーザーの一覧、タスクリスト、商品リストなど、あらゆる場所でリストは使われている。これらのリストに表示されるデータが頻繁に変わる場合、UIを常に最新の状態に保つことが課題となる。例えば、新しいユーザーが追加されたり、既存のタスクの状態が変更されたりしたときに、リストが瞬時に更新されなければ、ユーザーは古い情報を目にすることになり、混乱を招いてしまう。

この問題を解決するために、MeteorとBlazeは「リアクティブ」な仕組みを提供している。データをリアクティブに管理する方法としては、「ReactiveVar」という仕組みを使うこともできる。これは、JavaScriptの変数に似ているが、その値が変更されると、その変数を参照しているUIが自動的に更新されるという特別な機能を持っている。しかし、Blazeには「#letディレクティブ」という便利な機能があり、特定のケースではReactiveVarよりもシンプルにリアクティブなリストを扱える場合がある。特に、データベースから直接データを取得して表示する場合にその真価を発揮する。

#letディレクティブを使ってリアクティブなリストを作る具体的な手順を見てみよう。ここでは、ユーザーリストを例に考える。まず、JavaScript側で、表示したいデータを取得するための「ヘルパー」という関数を用意する。ヘルパーは、Blazeテンプレート内でデータを渡す役割を担う。

Copy
1Template.myTemplate.helpers({
2  myList() {
3    return Users.find({}, { sort: { createdAt: -1 } }).fetch();
4  }
5});

このコードは、myTemplateという名前のBlazeテンプレートにmyListというヘルパーを定義している。myListヘルパーは、Usersという名前のデータベースコレクション（ユーザー情報を保存している場所だと考えよう）から、全てのユーザー情報を取得している。find({}, { sort: { createdAt: -1 } })の部分は、「全てのユーザーを、作成日時が新しい順に並べ替える」という意味だ。そして、.fetch()というメソッドを使うことで、取得したユーザー情報をJavaScriptの配列形式で受け取っている。ここで重要なのは、MeteorのUsers.find()というクエリは、単にデータを取得するだけでなく、その元となるデータベースのデータが変更されたことを自動的に検知し、ヘルパーが返す結果も自動的に更新される「リアクティブ」な性質を持っている点だ。

次に、このヘルパーを使って、Blazeテンプレート側でリストを表示する。

Copy
1<template name="myTemplate">
2  {{#let list=myList}}
3    {{#if list.length}}
4      <ul>
5        {{#each user in list}}
6          <li>{{user.name}}</li>
7        {{/each}}
8      </ul>
9    {{else}}
10      <p>No users found.</p>
11    {{/if}}
12  {{/let}}
13</template>

このテンプレートでは、{{#let list=myList}}という部分がポイントだ。これは、「myListヘルパーが返す結果をlistという名前の変数として、この#letブロックの中で使えるようにする」という意味になる。これにより、ヘルパーを何度も呼び出したり、複雑な構造になったりすることなく、listという変数名でユーザーの配列にアクセスできるようになる。

{{#if list.length}}では、list変数の要素数（list.length）が0より大きい（つまり、ユーザーが存在する）場合に、ユーザーリストを表示する<ul>要素を表示している。ユーザーが一人もいない場合は、{{else}}ブロックに書かれた「No users found.」というメッセージが表示される。

リストの各項目を表示するには、{{#each user in list}}ディレクティブを使う。これは「list変数の中の要素を一つずつuserという名前で取り出し、その中身を繰り返し表示する」という命令だ。それぞれのuserオブジェクトから、{{user.name}}を使ってユーザーの名前を表示している。

この#letを使った仕組みには、いくつかの優れた点がある。第一に、myListヘルパーがデータベースのfindクエリに基づいているため、データベースに新しいユーザーが追加されたり、既存のユーザー情報が更新されたりすると、list変数の内容が自動的に変わり、それに応じてBlazeがUIを再描画してくれる。つまり、開発者が手動で更新コードを書かなくても、リストが常に最新の状態に保たれるのだ。第二に、#letディレクティブを使うことで、ヘルパーの複雑な呼び出しを避け、その結果をシンプルな変数名でテンプレート内で使えるため、コードが読みやすく、管理しやすくなる。第三に、list.lengthのような単純なプロパティを使って、リストが存在するかどうかに応じて表示を切り替えることができるため、余計なヘルパー関数を用意する必要がなく、より簡潔にUIの制御が可能となる。

#letディレクティブとReactiveVarのどちらを使うべきかは、状況によって判断が変わる。データベースのコレクションから直接データを取得して、それをそのままUIに表示するようなシンプルなデータバインディングの場合には、#letとリアクティブヘルパーの組み合わせが非常に強力で、コードを簡潔に保つことができる。一方、データベースのデータから計算して得られる「派生的な状態」を管理したい場合や、データベースとは直接関係なく、ユーザーのアクションによって一時的に変わるUIの状態（例えば、フォームの入力値やモーダルウィンドウの開閉状態など）を管理したい場合には、ReactiveVarの方が適していることが多い。ReactiveVarは、よりカスタムなリアクティブロジックを実装する際に柔軟性を提供する。

まとめると、MeteorとBlazeの組み合わせは、特に既存のBlazeアプリケーションにおいて、リアルタイムなリストを効率的に構築するための強力なツールとなる。#letディレクティブを活用することで、データベースのデータ変更に自動的に追従する、信頼性の高いリアクティブなリストを、少ないコード量で実現できる。システムエンジニアとして、たとえレガシー技術であっても、その仕組みと効果的な使い方を理解しておくことは、様々なプロジェクトに対応できる能力を高める上で非常に価値があることだ。