ルートを追加する
サーバーが複数の URL に応答できるようにする
⏱ 想定 ~8 分
01 · 読む
今のところ、サーバーが応答するのは 1 つの URL、ルートパス / だけです。localhost:3000/about や localhost:3000/anything-else に接続するとエラーになります。
本物のウェブサイトには多くのページがあります — トップ、About、Contact、商品ページなど。各ページには自分の ルート があります — サーバーが処理方法を知っている URL パスです。
ルートを追加するというのは、サーバーに「この URL にはこの内容を返してね」と教えることです。app.get() を呼ぶたびに、新しいルートが作られます。
💡 想像してみてくださいルートはオフィスの受付のようなものです。営業部に用事のある人を、受付はある部屋に案内します。カスタマーサポートに用事のある人は別の部屋に案内します。あなたのサーバーが受付係、ルートはその案内ルートです。
ポイントまとめ
- app.get('/path', ...) を呼ぶたびに新しいルートができます
- Path は URL の localhost:3000 のうしろにくる部分です
- ルートごとにまったく違う内容を返せます
- これがどのウェブサイトでも異なるページを提供する方法です
02 · 実機演習
テキストエディタで app.js を開き、次の 2 つの新しいルートを追加しましょう。既存の app.get('/') ルートの うしろ、app.listen() の行の 前 に置きます。
app.get('/about', (req, res) => {
res.send('This is the about page. I built this server myself!');
});
app.get('/contact', (req, res) => {
res.send('Contact me at: hello@mysite.com');
});03 · 実機演習
サーバーはまだ古いコードで動いています。変更を反映させるには、サーバーを 止めて 再起動 する必要があります。 サーバーを動かしているターミナルに戻り、Ctrl+C で止め、もう一度起動してください。
node app.js
04 · クイズ
app.get('/about', handler) の /about は何を表しますか？
- 送り出すファイルの名前
- このハンドラを発動させる URL パス
- コンピュータ上のあるフォルダ
- 変数名
05 · 空欄補充
Express では、app.get('/about', ...) は _____ パスに応答するルートを作ります。
06 · 実機演習
では新しいルートをテストしましょう！ブラウザを開いて、次の 2 つの URL に接続します。 1. http://localhost:3000/about — about ページの文言が見えるはずです 2. http://localhost:3000/contact — contact ページの文言が見えるはずです もとのルートがまだ動いているか、http://localhost:3000 も試してみてください。
http://localhost:3000/about
http://localhost:3000/contact
07 · クイズ
サーバーには /、/about、/contact のルートがあります。ユーザーが http://localhost:3000/pricing にアクセスすると何が起こりますか？
- Express が自動で pricing ページを作ります
- サーバーがエラーで落ちます
- そのパスにマッチするルートがないので、サーバーが "Cannot GET /pricing" エラーを返します
- リクエストは / ルートにリダイレクトされます
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。