Help us understand the problem. What is going on with this article?

Express 4 をはじめよう

More than 5 years have passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした