体感!JavaScriptで超速アプリケーション開発 -Meteor完全解説

第12回 [最終回]Meteorが指し示すWebアプリ開発の未来

この記事を読むのに必要な時間:およそ 2.5 分

さて,これまで10回以上に渡って続けさせていただいたこの「Meteor完全解説」ですが,今回が最終回となります。「完全解説」を銘打っておきながら,説明できていない機能を残していることが大変心苦しいのですが,どうかご容赦ください。

ただ前回までの連載により,Meteorのエッセンスとも言える部分についてはほとんど説明を終えたといっても良いかと思います。これまでの記事を振り返ってみても,やはりMeteorは非常に先進的なフレームワークです。Webアプリ開発にかつてないような生産性をもたらすだけでなく,「リアルタイムWeb」の時代をぐっと手元に引き寄せるような手応えを感じます。

今回は最終回ということで,Meteorのさまざまな機能を振り返りつつ,Meteorという先進的なフレームワークが指し示す,Webアプリケーションの未来を探ってみたいと思います。

Nodeを利用した「フルスタックフレームワーク」であること

Meteorの一番の特徴は,なんといっても,クライアントもサーバも同じ言語(JavaScript)で記述することができる「フルスタックフレームワーク」であるという点でしょう。これは,Node.jsを利用することで実現されています。

Meteorは,クライアントとサーバのコード共有を最大限促進するために入念な設計が行われています。それは,server/client/public以外の場所に置いたJavaScriptファイルはクライアントとサーバのどちらからも参照できるという実行環境や,Meteor.method()などのAPIに表れています。

また,フルスタックフレームワークだからこそ実現可能な,さまざまな機能があります。 たとえばサーバ上のコードを更新するための処理は,クライアント側でコレクションを操作することだけです。サーバサイドのDBとのデータ同期は,Meteorによって自動的に行われます。

他にも,今回の連載では触れることができませんでしたが,MeteorではOAuthも包含した認証システムも利用できます。簡単なコンフィギュレーションを行い,Meteor.loginWithTwitter()のようなAPIをクライアント側で呼び出すだけで,魔法のように認証処理が行われるというものです。これはOAuthのコールバックをMeteorが自動的に処理して,アクセストークンをDBに格納することによって実現されています。これはサーバとクライアントをどちらも包括している,フルスタックフレームワークならではの機能と言っても良いでしょう。

余談ですが,筆者はMeteorに出会うまでは,サーバ側のコードをJavaScriptで書けることに,正直それほどの価値を感じていませんでした。しかし現在では,サーバサイド・プログラミングにおいてNode.js以外の選択肢を考えることができないほどに,「クライアントとサーバを同じ言語で書けること」に価値を感じています。

WebSocketの積極的な利用

Meteorは,WebSocket (実際に内部で使用されているのはSockJSというライブラリです)をデフォルトで使用し,クライアントとサーバを常に「つなぎっぱなし」の状態にしています。

このことによるメリットは計り知れません。

たとえば,Meteorで構築されたシステムにおいては,あるクライアントが行った変更は,即座に全てのクライアントに対して伝えられます。まるで,クライアント全員が1つのデータを「一緒に」操作しているような感覚を味わうことができます。このレベルのリアルタイムアプリケーションを,Meteorでは容易に実現することができます。通信処理を意識する必要はほとんどありません。

またMeteorアプリケーションの開発中は,ソースコードを編集すると勝手にブラウザがリロードを行い,常に最新の状態で開発を行うことができます。これも,クライアントとサーバが常に接続状態だからこそ実現できる機能です。細かな点ではありますが,実際にこの機能をためしてみると,驚くほど開発がリズムよく行えるようになるため,クセになってしまうほどです。

リアクティビティ

リアクティブ・プログラミングとは,あるデータに対して行った変更が自動的に伝播し,その他の部分に影響をおよぼすようなプログラミング・パラダイムのことです。たとえば表計算ソフトの一般的な機能として,セルの値に応じて,そのセルを参照している部分の値も自動的に変更されるというものがありますが,これはリアクティブ・プログラミングの典型的な例です。Meteorがサポートするリアクティブ・プログラミングについては,第10回の記事を参照してください。

データを変更するだけで自動的にビューが書き換わるというのは,バインディング機能を備えたMVCフレームワークを利用していれば一般的な機能ですが,Meteorの場合はひと味違います。

まず,サーバデータのキャッシュをクライアントが常に保持しており,キャッシュへの操作がサーバデータの更新を直接引き起こします。そして全てのクライアントが「つなぎっぱなし」で,高いリアルタイム性能を備えています。こうしたMeteorの他の機能と合わせると,「クライアント側でデータを更新するコードを1行書いただけで,サーバデータも更新されるだけではなく,全クライアントのビューが自動的に更新される」ということになります。

このように,Meteorのリアクティビティをフルに活用すると,「ほとんど何も複雑な処理を書いてないのに,リアルタイムなWebアプリが出来てしまった」というレベルの生産性を得ることができます。

シングルページ・アプリケーション

シングルページ・アプリケーション(Single Page Application:SPA)というのは,昨年(2012年)あたりからよく使われるようになった単語ですWikipedia)。従来のWebサイト/アプリケーションのように,複数のWebページを遷移するのではなく,単一のWebページ上で全ての処理が行われるようなアプリケーションのことを指します。

従来のページ遷移のモデルだと,ページが遷移するたびにJavaScriptのグローバル環境がリセットされてしまいます。WebSocketで「つなぎっぱなし」にしていたとしても,ページが遷移すると切断してしまいます。また,ページの再読み込みに伴う遅延やリフレッシュ動作は,ユーザビリティを損なう原因となっています。Ajaxによるサーバアクセスが一般化し,history.pushState()によってURLも自在に扱えるようになった今,SPAがもたらす実装の簡易化や高いユーザビリティに注目が集まっているのです。

Meteorはまさに,SPAのためのフレームワークです。本番運用時においては,アプリケーションフォルダ内のHTML/JavaScript/CSSファイルは全て自動的に結合され,それぞれ1つのファイルとなります。アプリケーションはWebSocketによって「つなぎっぱなし」の状態で,全てのデータ送受信はJavaScriptを通じて行われます。

モジュール管理

これまでのWeb開発では,サードパーティのJavaScriptコードを使用する場合,サイトから個別にファイルをダウンロードして利用していました。しかしこれではモジュールのバージョンや依存性の管理に問題が生じますし,入手も面倒です。

本連載では詳しく取り上げることができませんでしたが,Meteorは自前のモジュール管理システムを構築しており,モジュールを使用するかしないかをコマンドラインで簡単にオン・オフすることができます。Meteorはフルスタックフレームワークなため,jQueryやless,bootstrapのようにフロントエンド向けのモジュールもあれば,email(Email送信用のAPIセット)などのようにサーバ側の機能を強化するためのモジュールもあります。また,npm(Node.jsのパッケージ管理システム)も併用することができるため,サーバ側のプログラミングにおいては,Node.jsの豊富なモジュールが利用可能です。

Bowerのように,Web開発にパッケージ管理の概念を取り入れる試みは他にもあり,この分野がWeb開発の最先端であることは間違いないと言えるでしょう。

PaaS/BaaSとの統合

Meteorは,meteor deployというコマンドを用いて,アプリケーションを簡単にPaaS上にデプロイすることができます。アカウント認証すら必要がないという簡便さで,リリース当初「アプリ開発から公開までを数分で行える」と世間を非常に驚かせました。筆者は,アプリケーション開発の簡便さや運用の楽さ,自動的なスケールアウトなどの機能を考えると,「PaaS/BaaSと統合された開発環境」が今後大きな存在感を示していくのは,間違いないと考えています。

特にリアルタイムアプリケーションでは,WebSocketを使用するサーバアプリを自動的にスケールアウトするようにするのは,なかなか面倒なものです。Meteorは通信や認証に関わる部分を高レベルなAPIで隠蔽しているため,ほとんどのMeteorアプリは自動的なスケールアウトにそのまま対応可能でしょう。MeteorのPaaSはまだテスト用途にしか使えませんが,正式にローンチした暁には,なかなかユニークな存在になると思われます。

おわりに

筆者は,つい最近Meteorを使用してアプリケーションの本格的なプロトタイプを作ってみました。

そのアプリケーションは,Twitterによるログイン機能と高いリアルタイム性が必要なものでしたが,ほんの2,3時間で基本的な機能を作り終えてしまい,その生産性の高さに驚かされました。皆様もぜひMeteorを試用してみて,Webアプリケーション開発の未来を体験してみていただければと思います。またその際,本連載の内容がお役に立つことを祈っています。

本連載をお読みいただいた読者の皆様,あと,限りない忍耐で本連載にお付き合いいただいたgihyo.jpの小坂様に心よりの感謝を捧げつつ。また読者の皆様にお会いできるのを楽しみにしています。

著者プロフィール

白石俊平(しらいししゅんぺい)

株式会社オープンウェブ・テクノロジー代表取締役

HTML5開発者コミュニティhtml5j.org管理人

HTML5とか勉強会主催

Web先端技術味見部 部長

読書するエンジニアの会主催

しろうと哲学部 部長

Google API Expert(HTML5)

Microsoft Most Valuable Professional 2010, 2011(Internet Explorer)

コメント

コメントの記入