Express 4 への移行

概説

Express 4 では、Express 3 とは互換性の ない 変更が行われています。つまり、依存関係にある Express のバージョンを更新すると、既存の Express 3 アプリケーションは機能しません。 That means an existing Express 3 app will not work if you update the Express version in its dependencies.

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

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

Express 4 における変更点

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

• Changes to Express core and middleware system. The dependencies on Connect and built-in middleware were removed, so you must add middleware yourself.
• ルーティング・システムの変更。
• その他の各種変更。

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

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

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

Express 4 は、Connect に依存しなくなり、express.static 関数を除くすべての標準装備ミドルウェアをコアから削除しました。つまり、Express は独立したルーティングおよびミドルウェアの Web フレームワークになり、Express のバージョン管理とリリースはミドルウェア更新の影響を受けません。 This means that Express is now an independent routing and middleware web framework, and Express versioning and releases are not affected by middleware updates.

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

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

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

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

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

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

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

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() 資料を参照してください。 Because the path is specified in a single location, creating modular routes is helpful, as is reducing redundancy and typos. For more information about routes, see Router() documentation.

次に、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 インスタンスは、完全なミドルウェアおよびルーティング・システムです。そのため、よく「ミニアプリケーション」と呼ばれます。 A Router instance is a complete middleware and routing system; for this reason it is often referred to as a “mini-app”.

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

例えば、アプリケーション・ディレクトリーに次の内容で 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 です。 The files of interest are app.js and 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 オブジェクトで使用できなくなりました。代わりの関数を手動でインストールして、アプリケーションにロードする必要があります。 You must install their alternatives manually and load them in the app.

2. You no longer need to load the app.router function. 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

Then, remove invalid code, load the required middleware, and make other changes as necessary. The app.js file will look like this:

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'))
})

アプリケーションの実行

これで移行プロセスは完了して、アプリケーションは Express 4 アプリケーションになりました。確認するには、次のコマンドを使用してアプリケーションを開始します。 To confirm, start the app by using the following command:

$ node .

http://localhost:3000 をロードして、Express 4 によってレンダリングされるホーム・ページを確認します。

Express 4 アプリケーション・ジェネレーターへのアップグレード

Express アプリケーションを生成するためのコマンド・ライン・ツールは引き続き express ですが、新規バージョンにアップグレードするには、Express 3 アプリケーション・ジェネレーターをアンインストールしてから、新しい express-generator をインストールする必要があります。

インストール

システムに Express 3 アプリケーション・ジェネレーターがインストールされている場合は、次のようにしてアンインストールする必要があります。

$ npm uninstall -g express

ファイルおよびディレクトリーの特権が構成されている方法によっては、このコマンドを sudo で実行することが必要になる場合があります。

次に、新しいジェネレーターをインストールします。

$ npm install -g express-generator

ファイルおよびディレクトリーの特権が構成されている方法によっては、このコマンドを sudo で実行することが必要になる場合があります。

これで、システム上の express コマンドは Express 4 ジェネレーターに更新されました。

アプリケーション・ジェネレーターの変更

コマンドのオプションと使用法の大部分は以前と同じですが、以下の例外があります。

• --sessions オプションを削除しました。
• --jshtml オプションを削除しました。
• Hogan.js をサポートするために --hogan オプションを追加しました。

例

次のコマンドを実行して、Express 4 アプリケーションを作成します。

$ express app4

app4/app.js ファイルの内容を見ると、アプリケーションに必要な (express.static を除く) すべてのミドルウェア関数が独立したモジュールとしてロードされており、router ミドルウェアがアプリケーションに明示的にロードされなくなったことが分かります。

また、app.js ファイルが Node.js モジュールになったことも分かります。対照的に以前はジェネレーターによって生成されるスタンドアロン・モジュールでした。

依存関係をインストールした後、次のコマンドを使用してアプリケーションを開始します。

$ npm start

package.json ファイルで npm start スクリプトを見ると、アプリケーションを開始する実際のコマンドは node ./bin/www であることが分かります。これは、Express 3 では node app.js でした。

Express 4 ジェネレーターによって生成される app.js ファイルが Node.js モジュールになったため、(コードを変更しない限り) アプリケーションとして単独では開始できなくなりました。モジュールを Node.js ファイルにロードして、Node.js ファイルから開始する必要があります。この場合、Node.js ファイルは ./bin/www です。 The module must be loaded in a Node.js file and started via the Node.js file. The Node.js file is ./bin/www in this case.

Express アプリケーションの作成またはアプリケーションの開始のために、bin ディレクトリーも、拡張子のない www ファイルも必須ではありません。これらは単にジェネレーターが推奨するものであるため、ニーズに合わせて自由に変更してください。 They are just suggestions made by the generator, so feel free to modify them to suit your needs.

www ディレクトリーを削除して、処理を「Express 3 の方法」で実行するには、app.js ファイルの最後にある module.exports = app; という行を削除して、その場所に以下のコードを貼り付けます。

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

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

次のコードを使用して debug モジュールを app.js ファイルの先頭にロードしたことを確認します。

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

次に、package.json ファイル内の "start": "node ./bin/www" を "start": "node app.js" に変更します。

You have now moved the functionality of ./bin/www back to app.js. これで、./bin/www の機能を app.js に戻しました。この変更は推奨されるものではありませんが、この演習により、./bin/www ファイルの仕組みと、app.js ファイルが単独で開始されなくなった理由を理解できます。