女性向けエンジニアスクール
3秒でわかる
受け取ったURLとメソッドの組み合わせを、担当する処理へ振り分ける部品。増えていく画面やAPIの入口を一か所にまとめて見通しよく保つために使います。
もう少し詳しく
どういうものか
ルーターは、届いたリクエストの URL とメソッドを見て、どの処理を呼ぶかを決める部品です。サーバー側では Express や FastAPI などのフレームワークが持ち、GET /users/42 のような組み合わせに対して呼ぶ関数を対応付けます。ブラウザ側にも同じ役割の仕組みがあり、React Router や Next.js のルーティングは、ページを読み込み直さずに URL に応じた画面へ切り替えます。
なお、ネットワーク機器のルーターは異なる網の間でパケットを中継する装置を指します。同じ語ですが別の話です。
なぜ必要か
分岐を if で書き並べると、対応する URL が増えるほど読めなくなり、パスの一部を値として取り出す処理も毎回自前で書くことになります。ルーターを使うと、/users/:id のように変数部分を宣言するだけで値が取り出せ、認証チェックのような共通処理も特定の枝にまとめて挟めます。機能ごとにファイルを分けて束ねられるため、どこに何があるかが URL の形から追えるようになります。
具体例
import express from "express";
const users = express.Router();
users.get("/", (req, res) => res.json(listUsers()));
users.get("/:id", (req, res) => res.json(findUser(req.params.id)));
users.post("/", (req, res) => res.status(201).json(createUser(req.body)));
const app = express();
app.use(express.json());
app.use("/api/users", users); // ここで前置きのパスを決める
app.use((req, res) => res.status(404).json({ error: "not found" }));/api/users という前置きを束ねる側で指定しているので、URL の構成を変えたくなっても一行の変更で済みます。
つまずきやすいところ
登録の順序が結果を変える点が最大の落とし穴です。/users/:id を /users/new より先に書くと、new が id として拾われ、意図した画面に行きません。固定の文字列を先、変数を含むものを後に置くのが原則です。
フロントエンドのルーターでは、開発中は動いていた /users/42 を本番で直接開くと 404 になる事故が起きます。サーバーがその名前のファイルを探しに行くためで、どのパスでも index.html を返す設定を入れて解決します。
