演習課題「プロフィールページを実装しよう」
霧島京子、六村リオ、緑川つばめの三人のプロフィールページを表示するようにルーティングを実装しましょう。
今、このアプリケーションを起動し、/ にアクセスすると次のようにブラウザに表示されます。
キャラクター
以下からプロフィールを見ることができます
霧島京子
六村リオ
緑川つばめ
それぞれのリンクをクリックすると、以下のパスにアクセスします。
- 霧島京子 →
/profile/kyoko - 六村リオ →
/profile/rio - 緑川つばめ →
/profile/tsubame
現状では、これらのどのリンクをクリックしても、デフォルトのプロフィールページを表示するようになっています。
三人のプロフィールページ、及びデフォルトのプロフィールページのそれぞれについて、ページのテンプレートになる
pug ファイルは次のように用意されています。- 霧島京子のプロフィールは
views/kyoko.pug - 六村リオのプロフィールは
views/rio.pug - 緑川つばめのプロフィールは
views/tsubame.pug - デフォルトのプロフィールページは
views/default.pug
routes/router.js を編集し、それぞれのリンクに対し、表示されている人のプロフィールページをブラウザに送信するようにしてください。アプリケーションを起動した状態で、採点して、ジャッジに正解すれば演習課題クリアです！
演習課題「パスが長すぎます！ - 別の機能を追加してみよう」
今回のチャプターで学んだ、以下のような書き方でのルーティングでは、名前で分岐する意外にも色々なことができるようになります。
router.get("/path/:subpath", (req, res) => {
// ...
});>例えば、「アクセスしたパスの文字列が長すぎる場合にエラーを送信する」というようなものも実装できてしまいます。作ってみましょう。
今、
routes/router.js は以下のような記述になっています。routes/router.js
const router = require("express").Router();
router.get("/", (req, res) => {
res.render("index");
});
router.get("/:path", (req, res) => {
const path = req.params.path;
res.render("index");
});
module.exports = router;どのパスへのリクエストに対しても
views/index.pug の内容を HTML に変換してブラウザに送信しています。これを変更し、
path 変数の文字列の長さが 100 以上である時に views/too_long.pug の内容を送信するように変更しましょう。文字列の長さは、
文字列.length で取得することができます。（長さが
100 未満であれば views/index.pug を送信してください。）アプリケーションを起動した状態で、採点して、ジャッジに正解すれば演習課題クリアです！
＃09:人気投票アプリを完成させよう
このチャプターでは、いままで作ってきた人気投票Webアプリケーションの完成に向けて、リクエストのパラメータによる処理の分岐を実装していきます。
express 4.x API
https://expressjs.com/ja/api.html#req.params
express では、router.get() の第一引数に指定するパスに、/votes/:name のように : から始まる文字列を一部挿入することができます。
そうした場合、任意の /voutes/honyarara のようなものにマッチすることができ、そのマッチした文字列を req.params.name として受け取ることができます。
今回は /voutes/:name として req.params.name を受け取りましたが、ここは自由に名付けることができます。
/votes/:idであればreq.params.idとして受け取れます/votes/:characterであればreq.params.characterとして受け取れます
以上のようにして受け取ることができます。
routes/router.jsconst router = require("express").Router();
let kyokoCount = 0;
let rioCount = 0;
let tsubameCount = 0;
router.get("/", (req, res) => {
res.render("index", { message: "みなさんこんにちは！" });
});
router.get("/votes", (req, res) => {
res.render("votes", { kyokoCount: kyokoCount, rioCount: rioCount, tsubameCount: tsubameCount });
});
router.get("/votes/:name", (req, res) => {
const name = req.params.name;
if (name === "kyoko") {
kyokoCount++;
res.render("results", { fullName: "霧島京子", count: kyokoCount });
} else if (name === "rio") {
rioCount++;
res.render("results", { fullName: "六村リオ", count: rioCount });
} else if (name === "tsubame") {
tsubameCount++;
res.render("results", { fullName: "緑川つばめ", count: tsubameCount });
} else {
res.status(404).render("404");
}
});
module.exports = router;
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTTP/Status
HTTP レスポンスステータスコードは、クライアント（この Web アプリケーションの場合は主にブラウザ）からのリクエストに対して、そのリクエストの処理がどのように終了したかを表すコードです。
例えば、成功を表すステータスコードは 200、今回のようにページが見つからないような場合は 404、処理方法が分からないエラーの場合は 500 というように、Web の標準として定められています。
サーバや Web アプリケーションは、これらに則る形で動作するように設計することが要求されます。