女性向けエンジニアスクール
3秒でわかる
届いた URL と HTTP メソッドの組み合わせを見て、どの処理を動かすか決める仕組み。1つのサーバーで多数の機能を出し分けられます。
もう少し詳しく
どういうものか
ブラウザから届くリクエストには、パス (/users/12) とメソッド (GET や POST) が付いています。この2つを見て、対応する関数へ処理を振り分ける仕組みがルーティングです。1つのサーバーが受け持つ入口は1つでも、その先で数十から数百の処理へ分岐できます。
サーバー側だけの話ではありません。React Router や Next.js のように、ブラウザ内で URL を見て表示するコンポーネントを切り替えるものもクライアントルーティングと呼ばれます。
なぜ必要か
ルーティングが無ければ、リクエストの内容を1つの関数の中で if 文を並べて判定することになります。機能が増えるほどその関数は肥大し、どの URL がどこで処理されているかが読み取れなくなります。ルート定義を一覧できる形にしておくと、その一覧がそのまま API の仕様書として働きます。
具体例
const express = require("express");
const app = express();
app.use(express.json());
app.get("/users", (req, res) => {
res.json([{ id: 1, name: "田中" }]);
});
// :id は URL パラメータ 実際の値は req.params.id に入る
app.get("/users/:id", (req, res) => {
res.json({ id: Number(req.params.id) });
});
app.post("/users", (req, res) => {
res.status(201).json({ created: req.body.name });
});
app.listen(3000);同じ /users でも GET は一覧の取得、POST は新規作成と、メソッドで意味を分けるのが REST の基本形です。
つまずきやすいところ
定義の順番で結果が変わります。URL パラメータを含むパスを先に書くと、/users/new へのアクセスまで id が "new" のリクエストとして先に捕まります。固定のパスを先に、パラメータを含むパスを後に置きます。
SPA でよくあるのが、画面上のリンクでは動くのに、その URL で直接リロードすると 404 になる現象です。クライアント側のルーターはブラウザ内でしか働かないため、サーバー側に「知らないパスは index.html を返す」設定を足す必要があります。
末尾のスラッシュや大文字小文字も、フレームワークによっては別のパスとして扱われます。リンク切れの調査ではまずここを確認します。
似た用語との違い
| 種類 | 判断する場所 | 画面の再読み込み |
|---|---|---|
| サーバールーティング | サーバー | 起きる |
| クライアントルーティング | ブラウザ内の JavaScript | 起きない |
