Express 4 をはじめよう

  • 336
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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": "*"
  }
}

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

$ npm install
$ node app

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

バージョン管理

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

node_modules

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

$ 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);

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

$ npm install
$ node app

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

$ 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 を再起動する必要があります。

$ node app

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

起動スクリプトを作成

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

run.sh
#!/bin/sh

node app
$ 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 の管理から除外しておきます。

node_modules
run.sh

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

$ npm install -g supervisor
run.sh
#!/bin/sh

supervisor -w app.js app

続く、かも?

リンク

http://expressjs.com/guide.html
http://expressjs.com/4x/api.html