Express Router

CoddyのNode.jsジャーニー「Expressの基礎」セクションの一部。レッスン 19/23。

server.jsには現在、ページ、APIルート、ミドルウェアが含まれており、増え続けています。

// routes/books.js
const router = express.Router();
router.get('/', (req, res) => res.json(books));
router.get('/:isbn', (req, res) => res.json(findBook(req.params.isbn)));
export default router;

// server.js
app.use('/api/books', booksRouter);

express.Router()は、独自のルートを持ち、専用のファイルに置かれる小さなアプリを作成します。app.use('/api/books', booksRouter)はそれをマウントします。ルーターの/はGET /api/booksに応答し、/:isbnはGET /api/books/9780141439518に応答します。プレフィックスはapp.useの中で一度だけ記述します。ルーター内でスローされたエラーも、引き続きアプリのエラーハンドラーに届きます。

新しいファイルroutes/recipes.jsには、すでに/tagsというルートが1つあります。

チャレンジ

簡単

server.jsはどんどん大きくなっています。レシピAPIを専用ファイルのroutes/recipes.jsに移します。このファイルには、すでにすべてのタグを一覧表示するルートがあります。

routes/recipes.jsで、/tagsルートの下に、server.jsにある4つのAPIルートを追加します。一覧表示、idで指定した1つのレシピ、レシピを追加するPOST、そして分量調整のルートです。ルーター内では、各パスから/api/recipesの部分を省きます。/api/recipes/:idは/:idになり、一覧表示は/になります。
これらのルートは/tagsの下に置いたままにします。Expressは順番にルートを試します。/:idを先に置くと、/tagsを捕捉し、idがtagsのレシピを探してしまいます。
server.jsから、これら4つのルートを削除します。
server.jsで、./routes/recipes.jsからルーターをインポートし、4つのルートがあった場所でapp.useを使って/api/recipesにマウントします。位置はexpress.json()の後、404ハンドラーの前です。

試してみましょう：「実行」を押して、/api/recipes/tagsにリクエストを送ります。["breakfast","dinner","soup","sweet","vegan"]が表示されるはずです。/api/recipes/2を送ると、以前と同じくPancakesのレシピが返ります。{"title": "Toast"}を/api/recipesにPOSTすると、ステータスは201です。次に/api/recipes/5/scale?by=2を送ると、ステータスは500で、{"error":"Something went wrong"}が返ります。これにより、ルーター内でスローされたエラーも引き続きエラーハンドラーに届くことを確認できます。URLは変わっていません。変わったのはコードの置き場所だけです。

自分で試してみよう

import express from 'express';
import { recipes } from '../data.js';

const router = express.Router();

// すべてのタグをアルファベット順に、それぞれ1回ずつ。
router.get('/tags', (req, res) => {
    const tags = new Set(recipes.flatMap((recipe) => recipe.tags));
    res.json([...tags].sort());
});

// /api/recipes のルートを server.js からここへ、/tags の下に移動する。
// router 内のパスは、router がマウントされた場所を基準とする相対パスです。

export default router;