Express 4 をはじめよう

Express 4 がリリースされたので、さっそく試してみました。

なお、コードは github に上げてみました。
https://github.com/hoshi-takanori/express-sample

## プロジェクト作成
Express 3.x ではプロジェクトの雛形を作成するための express コマンドが用意されていましたが、Express 4 では廃止というか、別パッケージ (express-generator) に分離されたようです。
基本的に app.js (と package.json) があればいいので、express コマンドは使わなくても大丈夫です。グローバルに express パッケージをインストールする必要もありません。
適当なディレクトリを作って app.js と package.json を作ります。

```app.js
var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello, World!');
});

app.listen(3000);
```

```package.json
{
  "name": "express-sample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app"
  },
  "dependencies": {
    "express": "*"
  }
}
```

必要なパッケージをインストールして動かしましょう。

```shell-session
$ npm install
$ node app
```

目的のサイトのポート 3000 にアクセスして Hello, World! と表示されれば成功です。

## バージョン管理
git でバージョン管理しながら進めましょう。まず、不要なファイルを除外するために .gitignore ファイルを作ります。

```.gitignore
node_modules
```

あとは普通にコミットします。

```shell-session
$ git init
$ git add .
$ git commit -m 'initial commit'
```

以下、区切りのいいところで git add および git commit するとよいでしょう。

## jade でビューを作成
テンプレートエンジンには jade を使いましょう。まず、package.json に jade を追加します。(... は省略ってことで。)

```package.json
{
  ...
  "dependencies": {
    "express": "*",
    "jade": "*"
  }
}
```

次に、views ディレクトリを作って、その中に index.jade を作ります。

```views/index.jade
doctype html
html
  head
    meta(charset='utf-8')
    title= title
  body
    h1= title
    p Welcome to #{title}
```

それから、app.js も書き換えます。

```app.js
var express = require('express');
var app = express();

app.set('view engine', 'jade');
app.set('views', __dirname + '/views');

app.get('/', function (req, res) {
  res.render('index', { title: 'Express Sample' });
});

app.listen(3000);
```

追加したパッケージをインストールして動かしてみます。

```shell-session
$ npm install
$ node app
```

動いたらコミットしておきましょう。

```shell-session
$ git add .
$ git commit -m 'add views/index.jade'
```

## スタイルシートを追加
スタイルシートを追加しましょう。今回は静的ファイルとして配置します。
まず、public ディレクトリを作り、その中にさらに css ディレクトリを作り、その中に style.css を作ります。

```public/css/style.css
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
```

さらに、app.js と views/index.jade を変更します。

```app.js
...
app.set('view engine', 'jade');
app.set('views', __dirname + '/views');

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res) {
  ...
```

```views/index.jade
...
  head
    meta(charset='utf-8')
    title= title
    link(rel='stylesheet', href='/css/style.css')
  body
    ...
```

app.js を書き換えたので、node app を再起動する必要があります。

```shell-session
$ node app
```

(index.jade や style.css の書き換えであれば、node app の再起動は必要ありません。)

## 起動スクリプトを作成
個人的な趣味ですが、run.sh という名前で起動スクリプトを作成します。

```run.sh
#!/bin/sh

node app
```

```shell-session
$ chmod +x run.sh
$ ./run.sh
```

Express アプリの設定は環境変数で行うことが多いようなので、run.sh で環境変数を設定するとよいでしょう。

```app.js
...

app.listen(process.env.PORT || 3000);
```

```run.sh
#!/bin/sh

export NODE_ENV=production
export PORT=80

node app
```

run.sh の内容は環境によって変えたいので、git の管理から除外しておきます。

```.gitignore
node_modules
run.sh
```

また、app.js などを書き換えたら自動的に再起動するように、supervisor などを使うといいかも知れません。

```shell-session
$ npm install -g supervisor
```

```run.sh
#!/bin/sh

supervisor -w app.js app
```

続く、かも？

## リンク
http://expressjs.com/guide.html
http://expressjs.com/4x/api.html