Menu

Subscribe

Meteor Fan (日本語情報)

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

Meteorのファイル・ディレクトリ(フォルダ)構成について

| Tips

本記事では、Meteorのファイル構成について説明します。Meteorのファイル構成は複雑ではありませんが色々決まりがあるため理解する必要があります。

Meteorの初めのチュートリアルでは、HTML, JavaScript, CSSでそれぞれ1ファイルで合計3ファイルだけを使います。練習としてはこれで十分ですが、分割すると便利なことがあります。

公式マニュアルに詳しい説明がありますので、合わせて参照してください。

まず原則として

プロジェクトディレクトリに置かれたファイルはmeteorが認識して自動で読み込まれます。ファイルは拡張子やディレクトリ名で分類されます。複数のファイルに分割されている場合でも同じ種類のファイルはMeteorが自動で結合します。

特殊ディレクトリ

次に特殊ディレクトリについて説明します。

client

clientという名前のディレクトリはクライアント側のファイル専用になり、サーバ側では読み込まれなくなります。JavaScriptファイルの場合は、普通の場所に置いたJavaScriptファイルの中でif (Meteor.isClient) {}のブロック内に記述するのと同じになります。JavaScriptファイルとCSSファイルは結合されます。production環境ではさらにminifyされます。

HTMLファイルの結合方式は少し特殊で、すべてのHTMLファイルから<head>と<body>が抜き出されて結合されたものが初回のページロードで送られます。

server

serverという名前のディレクトリはサーバ側のファイル専用になり、クライアント側では読み込まれなくなります。JavaScriptファイルの場合は、普通の場所に置いたJavaScriptファイルの中でif (Meteor.isServer) {}のブロック内に記述するのと同じようになりますが、server内のファイルはクライアント側には一切送られないことが異なります。認証機能などクライアント側から見られたくないファイルはここに置きます。

client, public, private以外のディレクトリのJavaScriptファイルは一つにまとめられてサーバ(Node.js)に読み込まれます。

public

publicという名前のトップディレクトリはそのままの形でクライアント側に渡されます。ファイルの結合は行なわれません。画像ファイルなどはここに置きます。

HTMLの中で<img src="/bg.png" />のように参照すると、public/bg.pngのファイルを指します。

private

privateという名前のトップディレクトリはサーバ側のJavaScriptコードやAssetsからのみアクセスできます。ここには外部から読み込まれたくないデータファイルなどを置きます。

client/compatibility

clientの中のcompatibilityディレクトリには必要に応じて旧来のJavaScriptライブラリファイルを入れます。これらのJavaScriptファイルは通常の読み込みとは異なり、新しい変数スコープに閉じられません。var宣言された変数をグローバルスコープに出したい場合に使います。これらのファイルは外のclientのJavaScriptファイルより先に読み込まれます。

tests

testsという名前のディレクトリはテスト用のコードを置くディレクトリです。ここのファイルはどこからも読み込まれません。

特殊ディレクトリ以外に置かれたファイル

上記の特殊ディレクトリ以外に置かれたJavaScriptファイルはサーバ側でもクライアント側でも読み込まれます。その上で、Meteor.isServer, Meteor.isClientによって、実行を制御することができます。

上記の特殊ディレクトリ以外に置かれたCSS, HTMLファイルはクライアント側のみで読み込まれます。

ファイルの読み込み順序

まず原則としてはファイルの読み込み順に依存せずコードを構成することがよいでしょう。これにはMeteor.startup()を利用したり、パッケージ化を行って依存性を明確にする方法があります。

しかし、どうしても読み込み順を制御したい場合には、下記のルールを参考にしましょう。

  1. HTMLファイルは何よりも先に読み込まれます
  2. main.で始まるファイルは最後に読み込まれます
  3. libディレクトリのファイルが次に読み込まれます
  4. 深い階層にあるファイルが次に読み込まれます
  5. 上のルールで同じ順になったファイルはフルパスのアルファベット順に読み込まれます

このルールに従うと例えば正しい読み込み順に並べられたファイルは下記のようになります。

1
2
3
4
5
6
7
8
9
nav.html
main.html
client/lib/methods.js
client/lib/styles.js
lib/feature/styles.js
lib/collections.js
client/feature-y.js
feature-x.js
client/main.js

まとめ

Meteorではファイルは比較的自由に分割して配置することができます。自動で読み込んで結合してくれるので手軽です。また、特殊ディレクトリについても少し覚えれば分かりやすいものでしょう。

一方、ファイルの読み込み順についてはルールがあるものの複雑な構成にすると分かりにくくなる可能性があります。できればおすすめされているように読み込み順に依存しないように構成できるとよいのではないでしょうか。パッケージ化は、コードの分離や再利用性を考えるとよい選択肢であると思われます。

ファイルの分割は単なる整理上の話だけではなく、ホットコードプッシュにも影響するようです。例えば、クライアント側のJavaScriptファイルのみを編集した場合は、クライアント側のみが更新され、サーバ側には影響がないため、共通JavaScriptファイルでMeteor.isClientで分けるより高速な場合があるようです。