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

第2回 Meteorアプリケーションの実行環境

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

Meteorの実行環境

連載第2回では,Meteorアプリケーションの実行環境についてお話しします。

Meteorは,すべてをJavaScriptで書くことができるという利点を最大限に活かし,サーバとクライアントでコードを共有したり,サーバのコードをクライアントから呼び出すことができます。そうしたことを実現するには,今回の内容を理解しておく必要がありますが,幸いにも大して難しい話ではありません。

MeteorによるJavaScript/CSSの管理自動化

HTML/JavaScriptを用いたクライアントを作成する上で,いつも頭を悩ませるのがリソースの管理です。

大規模なアプリケーションともなると,JavaScriptやCSSが数十ファイルに上ることも珍しくありません。それらを通常の<script>や<link>で読み込むと,それらのファイルを読みこむごとにHTTPリクエストが発生するため,ページの読み込み速度に深刻な影響を与えます。なので,本番運用時には,それらのファイルをミニファイ(空白やコメントなどを除去するなどして,ファイルサイズを最小化すること)した上で結合し,リクエスト回数とダウンロードサイズを最小化することが望まれます。

ですが,結合とミニファイを行なってしまうと,ソースコードの可読性が著しく損なわれるため,Webブラウザ上でのデバッグはほぼ不可能になってしまいます。

なので,開発時に限っては,個々のファイルはやはり別々に読み込みたいところです。

そのため,⁠開発時は各ファイルを個別に読み込む」⁠本番運用時はファイルをミニファイ・結合する」といったリソース管理が望まれます。ですが,それを実現するには,読み込み元となるHTMLファイルのソースコードを,開発時と本番時で変更しなければならないため,管理が面倒です。

Meteorは,こうしたリソース管理をすべて自動化してくれます。このことを,Meteorのサンプルで確認してみましょう。

meteor create --example wordplayと実行すると,Meteorに付属するサンプルがひな形として生成されます。生成されたコードを見ると,複数のサブディレクトリ内にJavaScriptファイルが分散しています。

図1 wordplayサンプルのプロジェクトディレクトリ

図1 wordplayサンプルのプロジェクトディレクトリ

生成されたディレクトリに移動して,meteorコマンドを実行すると,3000番ポートでの実行が行われます。Webブラウザで http://localhost:3000 にアクセスしてみましょう。図2のような実行結果を得られるはずです。

図2 wordplayサンプルの実行結果

図2 wordplayサンプルの実行結果

このサンプルは,ランダムに並んだアルファベットを組み合わせて作れる単語を見つけ出すゲームです。Webブラウザ上でページのソースコードを表示してみると,以下のように,恐ろしいほどの数のJavaScriptファイルが読みこまれていることがわかります。

図3 ローカル環境でのHTMLソースコード

図3 ローカル環境でのHTMLソースコード

今度はこれを,Meteorが用意するテスト環境にデプロイして,同じようにコードを見てみましょう。プロジェクトのディレクトリでmeteor deploy <任意のID>.meteor.comを実行し,指定したドメインにアクセスすると,ローカルと同じ実行結果を得られるはずです。ここでページのソースを表示してみると,ローカルで実行した結果とは全く異なっています。

図4 本番環境でのHTMLソースコード

図4 本番環境でのHTMLソースコード

あれだけあった<script>が,たったひとつの<script>要素に置き換わっています。この<script>によって読み込まれているファイルを見てみると,きちんとミニファイも施されており,ファイルサイズも最小限に抑えられていることがわかります。

さらに,結合されたJavaScriptのファイルは,ファイル内容から生成されたハッシュ値が名前に付けられており,長いキャッシュ期間を割り当てられています。ファイルの内容が変化したら自動的にファイル名も変更されるため,キャッシュが更新されずに頭を悩ますこともありません。

特に設定などを施さずとも,これだけリソース管理を自動化してくれるというのは,驚異的といっても過言ではないでしょう。前回の記事でも触れたとおり,Meteorはとことん開発を楽にする点に重点を置かれているというのがおわかりいただけるのではないでしょうか。

以降は,Meteorにおけるリソース管理のルールを説明していきたいと思います。

Meteorアプリケーションのディレクトリ構造

Meteorプロジェクトは単一の親ディレクトリをルートとして,複数のHTML/JavaScript/CSSファイルやサブディレクトリから構成されています(ちなみに,プロジェクトのディレクトリ内には.meteorという隠しディレクトリが生成されています)⁠

プロジェクトのサブディレクトリのうちでも,以下の名称を持つものは,Meteorにとって特別な扱いのもとで管理されます。

client
クライアント側で実行されるJavaScriptファイルやCSSファイル,HTMLファイルを格納する
server
サーバ側で実行されるJavaScriptを格納する
public
静的なファイル(画像など)を格納する。このディレクトリ内のファイルはMeteorによって特別な処理を行われることなく,⁠そのまま」静的ファイルとして配信されます。

また,これら以外の場所(プロジェクトディレクトリ直下や,上記以外のサブディレクトリ)にも,JavaScriptやCSS,HTMLを置くことができます。この中でもJavaScriptファイルについては,⁠サーバでもクライアントでも実行される」というのが重要です。この仕組みのおかげで,サーバとクライアントで共通のコードを利用することも容易です。

ここで述べたルールを,次はファイルの種類という切り口から説明しなおしてみます。

著者プロフィール

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

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

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

HTML5とか勉強会主催

Web先端技術味見部 部長

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

しろうと哲学部 部長

Google API Expert(HTML5)

Microsoft Most Valuable Professional 2010, 2011(Internet Explorer)

コメント

  • 直し方

    ここにまとめられていました。
    http://qiita.com/tadfmac/items/a63bb85e5cfb12bbbfc8

    Meteorのバージョンが新しいやつでは、hello関数のスコープが変わってしまったようです。

    Commented : #2  shinriyo (2015/06/01, 08:04)

  • サンプル1-2(sample1-2.zip)をダウンロードして、実行してみたらエラーが発生しました。

    エラーメッセージは下記の通りです。
    どうもcommon.jsのなかで定義されていたhelloメソッドが見つからないらしいです。

    Your app is crashing. Here's the latest log.

    /XXX/sample1-2/.meteor/local/build/server/server.js:337
    }).run();
    ^
    ReferenceError: hello is not defined
    at app/server/server.js:2:5
    at run (/XXX/sample1-2/.meteor/local/build/server/server.js:329:63)
    at Array.forEach (native)
    at Function._.each._.forEach (/XXX/.meteor/tools/cc18dfef9e/lib/node_modules/underscore/underscore.js:78:11)
    at run (/XXX/sample1-2/.meteor/local/build/server/server.js:329:7)
    => Exited with code: 1
    => Your application is crashing. Waiting for file change.

    Commented : #1  あいもり (2013/07/15, 09:13)

コメントの記入