Express 4 への移行

概説

Express 4 では、Express 3 とは互換性の ない 変更が行われています。つまり、依存関係にある Express のバージョンを更新すると、既存の Express 3 アプリケーションは機能しません。

この記事では以下の内容を扱います。

• Express 4 における変更点
• Express 3 アプリケーションを Express 4 に移行する例
• Express 4 アプリケーション・ジェネレーターへのアップグレード

Express 4 における変更点

Express 4 では、いくつかの大きな変更が行われています。

• Express コアおよびミドルウェア・システムの変更。Connect と標準装備ミドルウェアに対する依存関係が削除されたため、ユーザーが自分でミドルウェアを追加する必要があります。
• ルーティング・システムの変更。
• その他の各種変更。

以下も参照してください。

• 4.x の新機能
• 3.x から 4.x への移行

Express コアおよびミドルウェア・システムの変更

Express 4 は、Connect に依存しなくなり、express.static 関数を除くすべての標準装備ミドルウェアをコアから削除しました。つまり、Express は独立したルーティングおよびミドルウェアの Web フレームワークになり、Express のバージョン管理とリリースはミドルウェア更新の影響を受けません。

標準装備ミドルウェアがないため、アプリケーションの実行に必要なすべてのミドルウェアを明示的に追加する必要があります。そのためには、単に以下のステップを実行してください。

1. モジュールをインストールします。npm install --save <module-name>
2. アプリケーションでモジュールを要求します。require('module-name')
3. モジュールの資料に従ってモジュールを使用します。app.use( ... )

次の表に、Express 3 のミドルウェアと、それぞれに対応する Express 4 のミドルウェアをリストします。

Express 4 のミドルウェアの完全なリストは、ここを参照してください。

ほとんどの場合、旧バージョン 3 のミドルウェアを単に Express 4 のミドルウェアに置き換えるだけですみます。詳細については、GitHub でモジュールの資料を参照してください。

app.use がパラメーターを受け入れます

バージョン 4 では、変数パラメーターを使用して、ミドルウェア関数がロードされるパスを定義し、ルート・ハンドラーからパラメーターの値を読み取ることができます。 次に例を示します。

app.use('/book/:id', (req, res, next) => {
  console.log('ID:', req.params.id)
  next()
})

ルーティング・システム

アプリケーションがルーティング・ミドルウェアを暗黙的にロードするようになったため、router ミドルウェアに関してミドルウェアがロードされる順序を考慮する必要がなくなりました。

ルートの定義方法は変わりませんが、ルーティング・システムには、ルートの編成に役立つ 2 つの新機能があります。

• 新しいメソッド app.route() は、ルート・パスのチェーン可能なルート・ハンドラーを作成します。
• 新しいクラス express.Router は、モジュール式のマウント可能なルート・ハンドラーを作成します。

app.route() メソッド

新しい app.route() メソッドを使用すると、ルート・パスのチェーン可能なルート・ハンドラーを作成できます。パスは単一の場所で指定されるため、モジュール式のルートを作成すると、便利であるほか、冗長性とタイプミスを減らすことができます。ルートについて詳しくは、Router() 資料を参照してください。

次に、app.route() 関数を使用して定義された、チェーニングされたルート・ハンドラーの例を示します。

app.route('/book')
  .get((req, res) => {
    res.send('Get a random book')
  })
  .post((req, res) => {
    res.send('Add a book')
  })
  .put((req, res) => {
    res.send('Update the book')
  })

express.Router クラス

ルートの編成に役立つもう 1 つの機能は、新しいクラス express.Router です。これを使用すると、モジュール式のマウント可能なルート・ハンドラーを作成できます。Router インスタンスは、完全なミドルウェアおよびルーティング・システムです。そのため、よく「ミニアプリケーション」と呼ばれます。

次の例では、ルーターをモジュールとして作成し、その中にミドルウェアをロードして、いくつかのルートを定義し、それをメインアプリケーションのパスにマウントします。

例えば、アプリケーション・ディレクトリーに次の内容で birds.js というルーター・ファイルを作成します。

var express = require('express')
var router = express.Router()

// middleware specific to this router
router.use((req, res, next) => {
  console.log('Time: ', Date.now())
  next()
})
// define the home page route
router.get('/', (req, res) => {
  res.send('Birds home page')
})
// define the about route
router.get('/about', (req, res) => {
  res.send('About birds')
})

module.exports = router

次に、ルーター・モジュールをアプリケーションにロードします。

var birds = require('./birds')

// ...

app.use('/birds', birds)

これで、アプリケーションは、/birds および /birds/about のパスに対する要求を処理できるようになり、ルートに固有の timeLog ミドルウェアを呼び出します。

その他の変更点

次の表に、Express 4 におけるその他の小規模ながらも重要な変更点をリストします。

移行の例

次に、Express 3 アプリケーションを Express 4 に移行する例を示します。 使用しているファイルは、app.js および package.json です。

バージョン 3 アプリケーション

app.js

次の app.js ファイルを使用する Express v.3 アプリケーションがあるとします。

var express = require('express')
var routes = require('./routes')
var user = require('./routes/user')
var http = require('http')
var path = require('path')

var app = express()

// all environments
app.set('port', process.env.PORT || 3000)
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'pug')
app.use(express.favicon())
app.use(express.logger('dev'))
app.use(express.methodOverride())
app.use(express.session({ secret: 'your secret here' }))
app.use(express.bodyParser())
app.use(app.router)
app.use(express.static(path.join(__dirname, 'public')))

// development only
if (app.get('env') === 'development') {
  app.use(express.errorHandler())
}

app.get('/', routes.index)
app.get('/users', user.list)

http.createServer(app).listen(app.get('port'), () => {
  console.log('Express server listening on port ' + app.get('port'))
})

package.json

付随するバージョン 3 の package.json ファイルの内容は次のようになります。

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.12.0",
    "pug": "*"
  }
}

プロセス

移行プロセスを開始するには、次のコマンドを使用して、Express 4 アプリケーションに必要なミドルウェアをインストールし、Express と Pug をそれぞれの最新バージョンに更新します。

$ npm install serve-favicon morgan method-override express-session body-parser multer errorhandler express@latest pug@latest --save

app.js に以下の変更を加えます。

1. 標準装備の Express ミドルウェア関数 express.favicon、express.logger、express.methodOverride、express.session、express.bodyParser、および express.errorHandler は express オブジェクトで使用できなくなりました。代わりの関数を手動でインストールして、アプリケーションにロードする必要があります。

2. app.router 関数をロードする必要がなくなりました。この関数は有効な Express 4 アプリケーション・オブジェクトではないため、app.use(app.router); コードを削除してください。

3. ミドルウェア関数が正しい順序でロードされていることを確認してください。つまり、アプリケーション・ルートをロードした後で errorHandler をロードしてください。

バージョン 4 アプリケーション

package.json

上記の npm コマンドを実行すると、package.json が次のように更新されます。

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "body-parser": "^1.5.2",
    "errorhandler": "^1.1.1",
    "express": "^4.8.0",
    "express-session": "^1.7.2",
    "pug": "^2.0.0",
    "method-override": "^2.1.2",
    "morgan": "^1.2.2",
    "multer": "^0.1.3",
    "serve-favicon": "^2.0.1"
  }
}

app.js

次に、無効なコードを削除して、必要なミドルウェアをロードし、必要に応じてその他の変更を行います。app.js ファイルの内容は次のようになります。

var http = require('http')
var express = require('express')
var routes = require('./routes')
var user = require('./routes/user')
var path = require('path')

var favicon = require('serve-favicon')
var logger = require('morgan')
var methodOverride = require('method-override')
var session = require('express-session')
var bodyParser = require('body-parser')
var multer = require('multer')
var errorHandler = require('errorhandler')

var app = express()

// all environments
app.set('port', process.env.PORT || 3000)
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'pug')
app.use(favicon(path.join(__dirname, '/public/favicon.ico')))
app.use(logger('dev'))
app.use(methodOverride())
app.use(session({
  resave: true,
  saveUninitialized: true,
  secret: 'uwotm8'
}))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use(multer())
app.use(express.static(path.join(__dirname, 'public')))

app.get('/', routes.index)
app.get('/users', user.list)

// error handling middleware should be loaded after the loading the routes
if (app.get('env') === 'development') {
  app.use(errorHandler())
}

var server = http.createServer(app)
server.listen(app.get('port'), () => {
  console.log('Express server listening on port ' + app.get('port'))
})

app.listen(app.get('port'), () => {
  console.log('Express server listening on port ' + app.get('port'))
})

$ node .

$ npm uninstall -g express

$ npm install -g express-generator

$ express app4

$ npm start

app.set('port', process.env.PORT || 3000)

var server = app.listen(app.get('port'), () => {
  debug('Express server listening on port ' + server.address().port)
})

var debug = require('debug')('app4')