Webアプリケーション開発に新しいパラダイムをもたらす「Meteor」

杉山貴章(オングス)
2012-05-22 14:58:00
  • このエントリーをはてなブックマークに追加

リアルタイムなページ更新

 コードの変更がリアルタイムにページに反映される機能は、Meteorのもっとも中心的な特徴となっている。この機能は「Hot Code Push」と呼ばれている。

 Hot Code Pushでは、アプリケーションのコードやデータベース上のデータに変更が加えられると、自動的にそれを検知してHTMLコードが再構築され、WebSocketのPush配信を利用してクライアントに送信される。クライアント側ではサーバからHTMLデータを受け取ったタイミングでリアルタイムにページを再描画するため、Webブラウザのリロードボタンを押す必要すらない。

 この機能の対象となるデータソース(“リアクティブ・データソース”と呼ばれている)としては、Sessionオブジェクト、Collections上のDatabaseキュー、Meteor.statusプロパティなどが挙げられている。また、リアルタイムな更新や再描画の実現は、Meteor.ui.render/Meteor.ui.chunk関数、Meteor.autosubscribe関数、テンプレートシステムなどがコンテキスト(“リアクティブ・コンテキスト”と呼ばれている)などによって行われている。

 リアクティブ・データソースは、どのデータがどのコンテキストから要求されているのかを記憶し、データが変更された場合にシグナルを送信する。リアクティブ・コンテキストは、データの依存性を追跡し、必要に応じて関数処理を再実行することができる。開発者は、Meteor.depsモジュールを使って任意のリアクティブ・コンテキストやリアクティブ・データソースを追加することもできるとのことだ。

HTMLテンプレート

 サンプルアプリケーションのコードを眺めるとすぐに気づくのは、HTMLファイルに<template>という見慣れないタグが使われていることである。これがテンプレートにあたる部分であり、このタグの位置で関連付けられたJavaScriptのコードが実行されてHTMLコードの生成が行われる。

 MeteorのHTMLテンプレートは、ライブ更新機能と組み合わせて動作する。すなわち、ページ生成の元になるデータを監視し、変更が加えられた場合には自動的にページの再生成が行われるということである。ページの生成や描画はMeteor.ui.renderおよびMeteor.ui.chunkなどといった関数によって行われるが、実際には直接これらの関数を呼び出さなくても、任意のHTMLテンプレートライブラリを通常通り使うだけでよいとのこと。本稿執筆時点では、デフォルトで利用可能なテンプレートシステムとしてHandlebars.jsが同梱されている。

データベースとクライアントキャッシュ

 Meteorでは、サーバ側のデータベースシステムとしてMongoDBが提供されているが、それとは別に、クライアント側ではインメモリキャッシュが用意されている。クライアント用のデータアクセスAPIはMongo APIに準じたものである。これは、サーバ用のコードとクライアント用のコードで、同じAPIを使ってデータアクセスができることを意味している。サーバ側ではMongo DB以外のデータベースを使用することも可能だが、クライアントとのコードの統一性を考慮すれば、MongoDBを使うのがもっともスマートと言えるだろう。

 クライアント側のキャッシュには、サーバ側のマスターデータのコピーが格納される。マスターデータとの同期は自動的に行われるため、開発者が特に意識する必要はないとのこと。キャッシュのデータが更新されたら、即座にページの表示に反映される。

データフローのイメージ データフローのイメージ
※クリックで拡大画像を表示

コードの実行場所の確認

 サーバ側のプログラムとクライアント側のプログラムを同一のコードで実装できる点は、Meteorの大きなメリットのひとつである。コードがサーバとクライアントのどちらで実行されているかは、Meteor.isserverおよびMeteor.isclientといったフラグ変数のBoolean値で判定することができるようになっている。

軽量スレッド

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]