Express.jsチュートリアル：Nodeサーバーを順を追って構築
Express.jsチュートリアル
Express.jsチュートリアル：ルート、ミドルウェア、JSON、Express 5 | We.Inc
Express 5のサーバーを順を追って構築します。ルート、ミドルウェア、JSONボディ、静的ファイル、エラーハンドラーに加え、スターター生成ツールとv4からv5への変更点も紹介します。
ExpressはNode.js向けの小さなWebフレームワークです。npm install expressでインストールし、express()でアプリを作成し、app.get('/', handler)のようにルートを追加して、app.listen(3000)で起動します。express.json()のようなミドルウェアはルートより前に実行され、4つの引数を持つエラーハンドラーは最後に置きます。
Expressの基本要素
- アプリを作成する
- const app = express()
- GETリクエストを処理する
- app.get('/users/:id', (req, res) => res.json({ id: req.params.id }))
- JSONボディを読む
- app.use(express.json())
- publicフォルダーを配信する
- app.use(express.static('public'))
- ルートをファイルにまとめる
- const router = express.Router()
- エラーを捕捉する
- app.use((err, req, res, next) => { ... })
Expressのチュートリアルの多くは今でもバージョン4のコードを載せていますが、それらは現在のデフォルトであるバージョン5では動かなかったり警告が出たりします。このガイドでは全編を通してExpress 5を使い、チェックした機能を含むスターターサーバーを生成し、古いプロジェクトをアップグレードするときにつまずきやすい変更点の表で締めくくります。
- 生成ツールで必要な機能にチェックを入れます：JSONボディ、静的ファイル、ルーター、404ページ、エラーハンドラー。
- package.jsonに合わせてES modulesかCommonJSを選びます。
- ファイルをindex.jsにコピーし、npm install expressを実行してから、node index.jsを実行します。
- 各部分の役割と、バージョン5が4とどう違うかは、下のセクションで確認してください。
- 順番が重要です。Expressはミドルウェアとルートを登録した順に実行するので、ボディパーサーは最初に、エラーハンドラーは最後に置きます。
- Express 5では、throwまたはrejectしたasyncルートは自動的にエラーハンドラーへ渡されます。すべてのasync関数をラッパーで囲む必要はもうありません。
- 静的ファイルにはpath.join(__dirname, 'public')または絶対パスを使い、どのフォルダーから起動してもサーバーが動くようにしましょう。
- 本番環境ではNODE_ENV=productionを設定しましょう。組み込みのエラーハンドラーが訪問者にスタックトレースを送らなくなります。
よくある質問
Express 5に必要なNode.jsのバージョンは？
Express 5にはNode.js 18以降が必要です。古いNodeから移行できない場合は、ランタイムをアップグレードできるまでExpress 4を使い続けてください。
req.bodyがundefinedになるのはなぜですか？
そのリクエストに対してボディパーサーが実行されていません。ルートより前に、JSONならapp.use(express.json())、フォーム送信ならexpress.urlencoded()を追加し、クライアントが対応するContent-Typeヘッダーを送っているか確認してください。Express 5では、解析されていないボディは空のオブジェクトではなくundefinedになります。
Express 5でキャッチオールルートを書くには？
ワイルドカードには名前を付ける必要があります。'/*'の代わりにapp.get('/*splat', handler)を使います。ルートパスにも一致させたい場合は、波かっこで囲みます：'/{*splat}'。
next()は何をしますか？
リクエストを次に一致するミドルウェアまたはルートに渡します。続行するにはnext()、エラーハンドラーへ移るにはnext(err)を呼び出すか、レスポンスを送ってチェーンを止めます。どちらも忘れると、リクエストが応答待ちのままになります。
body-parserはまだ使うべきですか？
JSONとフォームデータには不要です。express.json()とexpress.urlencoded()が組み込まれています。なお、Express 5ではurlencodedパーサーのextendedオプションのデフォルトがfalseです。
ルートとパラメーター
- ルートはメソッド、パス、ハンドラーで構成されます。:idのような名前付きセグメントはreq.paramsから、クエリ文字列はreq.queryから、解析済みのボディはreq.bodyから読み取ります。
- データにはres.json()、テキストやHTMLにはres.send()で応答し、ステータスコードを設定するにはその前にres.status(404)をつなげます。Express 5のres.status()は100から999までの整数しか受け付けません。
ミドルウェアをひとことで
- ミドルウェアは、ルートハンドラーの前に実行される、req、res、nextを受け取る関数です。リクエストを読んだり変更したり、レスポンスを終了したり、next()を呼び出したりできます。ログ出力、認証チェック、CORSヘッダー、ボディ解析はすべてミドルウェアで、すべてのパスに対してapp.use()でマウントするか、単一のルートに渡します。
プロジェクトをセットアップする
インストールして実行
フォルダーを作成し、package.jsonを初期化し、ES moduleプロジェクトとして設定して、Expressをインストールします。
ルートを独自のファイルに分ける
ルーターは小さなアプリです。プレフィックスの下にマウントすると、内部のすべてのパスがそれを基準にした相対パスになります。
asyncのエラーがエラーハンドラーに届く
Express 5では、ルート内でrejectされたPromiseが自動的に転送されます。最後に登録した4引数のハンドラーがそれをレスポンスに変換します。
Express 4から5への変更点
Expressはこれらの多くに対応するcodemodを提供しています：npx codemod@latest @expressjs/v5-migration-recipe。
Express 4のコードとExpress 5での置き換え
- app.get('/*', ...)
- app.get('/*splat', ...)
- ワイルドカードには名前が必要
- '/:file.:ext?'
- '/:file{.:ext}'
- 省略可能な部分は波かっこを使う
- app.del()
- app.delete()
- 削除済み
- req.param('id')
- req.params.id、req.body、req.query
- 削除済み
- res.sendfile()
- res.sendFile()
- 削除済み
- res.json(obj, 201)
- res.status(201).json(obj)
- ステータスは第2引数ではなくなった
- res.redirect('back')
- res.redirect(req.get('Referrer') || '/')
- 特殊な'back'は削除済み
- 解析前のreq.bodyは{}
- req.bodyはundefined
- 読む前に確認する
- urlencodedのextended: true
- デフォルトはextended: false
- ネストしたオブジェクトが必要なら設定する
- staticがドットファイルを配信
- デフォルトでドットファイルを無視
- より安全なデフォルト
スターターサーバー生成ツール
モジュール形式
ES modules（import）
CommonJS（require）
含める機能
JSONボディの解析
public/からの静的ファイル
URLパラメーター付きのルート例
不明なパスへの404レスポンス
エラーハンドラー
ポート
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る