Node.js | Express Webアプリケーションの自動生成

express-generatorをインストールする

Expressアプリケーションは、express-generatorを使うとコマンドラインから生成できる。まずnpmでグローバルにインストールする。

$ npm install -g express-generator

インストール後は、expressコマンドでアプリケーションを作成する。-eオプションを付けるとテンプレートエンジンにEJSを使う。

$ express -e exapp
$ cd exapp
$ npm install

生成されたアプリケーションには、bin、public、routes、viewsなどのディレクトリと、app.js、package.jsonなどのファイルが含まれる。生成されたサーバースクリプトで起動する。

$ node .\bin\www

標準では3000番ポートで起動するため、http://localhost:3000/で確認できる。

app.jsの構成

app.jsは生成されたExpressアプリケーションの中心になる。express、path、morgan、cookie-parser、body-parserなどを読み込み、さらにroutes/indexのようなルートスクリプトを読み込む。

重要な部分は次の通りである。

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

app.use("/", routes);
app.use("/users", users);

app.setはビューのディレクトリやテンプレートエンジンなど、アプリケーションの設定を行う。app.useはURLパスとルートモジュールを結び付ける。生成されたファイルにはエラーハンドラも含まれ、最後にmodule.exports = appでアプリケーションを公開する。

ルートとテンプレート

生成されたroutes/index.jsではexpress.Routerを使う。ルートハンドラはリクエストとレスポンスを受け取り、テンプレートを描画する。

router.get("/", function(req, res, next) {
  res.render("index", { title: "Express" });
});

対応するviews/index.ejsでは、ルートから渡された値を表示する。

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

ルートスクリプトとビューテンプレートを分けることが、Expressの基本的な構成である。

新しい/heloページを追加する

新しいページを追加するには、routes/helo.jsとviews/helo.ejsを作成し、app.jsでルートを登録する。

var helo = require("./routes/helo");
app.use("/helo", helo);

ルートファイルでは、新しいテンプレートへ独自のデータを渡して描画できる。

router.get("/", function(req, res, next) {
  res.render("helo", {
    title: "Hello",
    message: "This is a new page."
  });
});

このパターンを繰り返すことで、ルーティング処理とテンプレートを整理したまま、Expressアプリケーションをページ単位で拡張できる。