Expressの概要(ミドル, リクエスト, レスポンス)

Expressの基本的な使い方を確認します。ミドルウェアの設定方法、リクエストデータの取得方法、レスポンスデータの設定方法について取り上げます。

Expressをインストール

npm init
npm install --save express

簡単な例で動作確認

app.js というファイルを作り、以下処理を記述します。

const express = require('express')
const app = express()

// app.METHOD(PATH, CALLBACK)
app.get('/', (req, res) => {
  res.json({ 'message': 'hello world' })
})

app.listen(5000, () => console.log('Example app listening on port 5000!'))

プロセスを起動します。

$ node app.js 
Example app listening on port 5000!

curlでリクエストしてみます。

$ curl -v localhost:5000
* Rebuilt URL to: localhost:5000/
*   Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 5000 (#0)
> GET / HTTP/1.1
> Host: localhost:5000
> User-Agent: curl/7.54.0
> Accept: */*
> 
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Content-Type: application/json; charset=utf-8
< Content-Length: 25
< ETag: W/"xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
< Date: Sat, 8 Sep 2018 14:29:16 GMT
< Connection: keep-alive
< 
* Connection #0 to host localhost left intact
{"message":"hello world"}

JSONデータを取得できました。

Middleware

設定対象

app.use でMiddlewareを設定します。リクエストを続ける場合、next() を実行します。

const express = require('express')
const app = express()

// 全リクエスト対象
app.use((req, res, next) => {
  console.log('middleware A')
  next()
})

// 全リクエスト対象
app.use((req, res, next) => {
  console.log('middleware B')
  next()
})

// /usersリクエストのみ対象
app.use('/users', (req, res, next) => {
  console.log('middleware C')
  next()
})

app.get('/', (req, res) => {
  console.log('Routing /')
  res.json({ 'message': 'hello world' })
})

app.get('/users', (req, res) => {
  console.log('Routing /users')
  res.json({ 'message': 'hello world' })
})

app.listen(5000, () => console.log('Example app listening on port 5000!'))

プロセスを起動して、curlでリクエスト( curl localhost:5000 )すると以下のようになります。

$ node app.js 
Example app listening on port 5000!
middleware A
middleware B
Routing /

再度、プロセスを起動して、curlでリクエスト( curl localhost:5000/users )すると以下のようになります。

$ node app.js 
Example app listening on port 5000!
middleware A
middleware B
middleware C
Routing /users

エラー処理のミドル

エラー処理のミドルは、ルート呼び出しの後で最後に定義します。

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  throw new Error('test error')
  res.send('Hello')
})

app.use((err, req, res, next) => {
  console.error(err.stack)
  res.status(500).send('Error occurred')
})

app.listen(5000, () => console.log('Example app listening on port 5000!'))

curlでリクエストします。

$ curl localhost:5000
Error occurred

サーバーサイドではエラースタックが表示されました。

$ node app.js 
Example app listening on port 5000!
Error: test error
    at app.get (/xxx/express-api/app.js:5:9)
    at Layer.handle [as handle_request] (/xxx/express-api/node_modules/express/lib/router/layer.js:95:5)
    at next (/xxx/express-api/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/xxx/express-api/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/xxx/express-api/node_modules/express/lib/router/layer.js:95:5)
    at /xxx/express-api/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/xxx/express-api/node_modules/express/lib/router/index.js:335:12)
    at next (/xxx/express-api/node_modules/express/lib/router/index.js:275:10)
    at expressInit (/xxx/express-api/node_modules/express/lib/middleware/init.js:40:5)
    at Layer.handle [as handle_request] (/xxx/express-api/node_modules/express/lib/router/layer.js:95:5)

参考

Request

HTTPヘッダ

HTTPヘッダの取得方法を確認します。

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  console.log(`req.get('User-Agent'): ${req.get('User-Agent')}`)
  console.log(`req.get('Accept'): ${req.get('Accept')}`)
  res.end()
})

app.listen(5000, () => console.log('Example app listening on port 5000!'))

プロセスを起動して、curlでリクエスト( curl localhost:5000 )すると以下のようになりました。

$ node app.js 
Example app listening on port 5000!
req.get('User-Agent'): curl/7.54.0
req.get('Accept'): */*

クエリ文字列

クエリ文字列の取得方法を確認します。

const express = require('express')
const app = express()

app.get('/users', (req, res) => {
  console.log(`req.query: ${JSON.stringify(req.query)}`)
  console.log(`req.query.page: ${req.query.page}`)
  console.log(`req.query.limit: ${req.query.limit}`)
  console.log(`req.query.xxxx: ${req.query.xxxx}`)
  res.end()
})

app.listen(5000, () => console.log('Example app listening on port 5000!'))

プロセスを起動して、curlでリクエスト( curl "localhost:5000/users?page=3&limit=20" )すると以下のようになりました。

$ node app.js 
Example app listening on port 5000!
req.query: {"page":"3","limit":"20"}
req.query.page: 3
req.query.limit: 20
req.query.xxxx: undefined

リクエストパラメータ

リクエストパラメータの取得方法を確認します。

const express = require('express')
const app = express()

app.get('/users/:id', (req, res) => {
  console.log(`req.params.id: ${req.params.id}`)
  res.end()
})

app.listen(5000, () => console.log('Example app listening on port 5000!'))

プロセスを起動して、curlでリクエスト( curl localhost:5000/users/222 )すると以下のようになりました。

$ node app.js 
Example app listening on port 5000!
req.params.id: 222

リクエストボディ

リクエストボディの取得方法を確認します。 req.body はデフォルトで未定義なので、body-parser で生成しておく必要があります。

const express = require('express')
const bodyParser = require('body-parser')

const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

app.post('/users', (req, res) => {
  console.log(`req.body: ${JSON.stringify(req.body)}`)
  console.log(`req.body.name: ${req.body.name}`)
  console.log(`req.body.old: ${req.body.old}`)
  res.end()
})

app.listen(5000, () => console.log('Example app listening on port 5000!'))

プロセスを起動して、curlでリクエスト( curl -X POST -d name=yamada -d old=35 localhost:5000/users )すると以下のようになりました。

$ node app.js 
Example app listening on port 5000!
req.body: {"name":"yamada","old":"35"}
req.body.name: yamada
req.body.old: 35

その他(ip, path, hostname …)

その他のプロパティについて確認します。

const express = require('express')
const app = express()

app.get('/users', (req, res) => {
  console.log(`hostname: ${req.hostname}`)
  console.log(`baseUrl: ${req.baseUrl}`)
  console.log(`originalUrl: ${req.originalUrl}`)
  console.log(`method: ${req.method}`)
  console.log(`path: ${req.path}`)
  console.log(`route: ${req.route}`)
  console.log(`ip: ${req.ip}`)
  console.log(`protocol: ${req.protocol}`)
  res.end()
})

app.listen(5000, () => console.log('Example app listening on port 5000!'))

プロセスを起動して、curlでリクエスト( curl localhost:5000/users?x=123 )すると以下のようになりました。

$ node app.js 
Example app listening on port 5000!
hostname: localhost
baseUrl: 
originalUrl: /users?x=123
method: GET
path: /users
route: [object Object]
ip: ::1
protocol: http

参考

Response

利用例

// レスポンスを返す
res.send('<p>hey</p>')

// jsonを返す(内部でJSON.stringify()が利用される)
res.json({ user: 'tobi' })

// データなしで終了
res.end()

// ステータスコードを設定
res.status(404).end()
res.status(500).json({ error: 'message' })

// リダイレクト
res.redirect('/foo/bar')

// http headerを設定
res.set('Content-Type', 'text/plain')
res.set({
  'Content-Type': 'text/plain',
  'Content-Length': '123',
  'ETag': '12345'
})

参考

参考