Yuta Watanabe's Blog

開発周りと、その他諸々

Express のプロジェクトジェネレータと生成ファイルの中身

こんにちは。

マイクロソフトの渡辺です。

node.js 向けのアプリケーション フレームワークである Express を触りはじめた今日この頃です。前回「 node.js 向け Web アプリケーションフレームワーク Express 」で、まずは簡単に Express を使ってみました。今回は、Express で提供されているプロジェクト ジェネレータを使ってアプリを生成し、その中身をたどることで Express の動きをみていきたいと思います。

インストール

まずは、ジェネレータをインストールします。

npm install -g express-generator

これで、express コマンドが使えるようになります。

express -h

で使えるオプションが確認できます。

プロジェクト生成

では、プロジェクトを生成してみます。

express myapp

すると、ファイル一式が生成されます。

f:id:yuwata:20140914174219p:plain

cd myapp
npm install
npm start

で起動してみましょう。localhost:3000 にアクセスすると、Express が実行されているのが確認できます。

f:id:yuwata:20140914174236p:plain

packages.json と ./bin/www

まず packages.json の中身を見てみましょう。dependencies の指定で jade 等関連パッケージが含まれていることと、先ほど npm start 実行時に呼び出されたのが、./bin/www であることがわかります。

./bin/www を開いてみると、express のインスタンスを定義している app モジュールの読み込みと、ポートの設定が行われていることが確認できます。ということで、メインの実装である app.js を見ていきましょう。

f:id:yuwata:20140914174820p:plain

app.js で使われている Express の基本

ファイルの冒頭で、利用するモジュールを読み込んでいます。その後に続く express インスタンスの作成とテンプレートエンジンの設定は、前回の Getting Started と同様です。

f:id:yuwata:20140914175112p:plain

その後には、app.use() の呼び出しが続きます。 API ドキュメントで app.use( ) の使い方を見てみると、

app.use([path], [function...], function)
Mount the middleware function(s) at the path. If path is not specified, it defaults to "/".

とあり、middleware をマウントするとのこと。middleware とは、req, res, next にアクセスする関数です。パスを指定しない場合は、'/' となります。

ということで、'/' のときは './routes/index' が、'/user' のときは './routes/user' が読み込まれていることが分かります。これら2つのルーティングに当てはまらない場合は、404 を返すことになりますね。

f:id:yuwata:20140914175852p:plain

./routes

ここまで来れば後は分かりやすいと思います。./routes/index.js と ./routes/user.js を開いてみると、テンプレート ( ./views の中にある )にパラメータを渡してレンダリングしているのが理解できます。先日の Getting Started と同じです。

このあとは

今回は、プロジェクトジェネレータで生成されるファイルを読み解きながら、Express の雰囲気を掴んでみました。Express の API ドキュメントはシンプルで分かりやすいので、適宜参照しながらサンプルコードを読み進めていくと理解が早いと思います。