読者です 読者をやめる 読者になる 読者になる

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 ドキュメントはシンプルで分かりやすいので、適宜参照しながらサンプルコードを読み進めていくと理解が早いと思います。