演習課題「カウンターアプリケーションを実装しよう」
アクセスするたびにカウンターの数字が増えていくアプリケーションを実装しましょう。
今、次のような routes/router.js と views/index.pug が用意されています。
routes/router.js
router.get("/", (req, res) => {
res.render("index", { counter: 0 });
});
module.exports = router;
views/index.pug
doctype html
html
head
title カウンターアプリ | JavaScript 講座
include head
body
div#wrapper
h1 カウンターアプリ
p
span カウンター
| #{counter}
a.a-btn(href="/") ページをリロードする
このアプリケーションを起動し、
/ にアクセスすると次のような表示になります。カウンターアプリ
カウンター
0
ページをリロードする
この状態では、「ページをリロードする」のリンクを何度押しても同じものが表示されます。
そこで、
routes/router.js を編集し、リロードに合わせてカウンターの数字が増えていくようにしてください。counts などの変数を新たに設け、/ にアクセスがある度に 1 ずつ追加するようにし、その変数を用いてアプリケーションを完成させてください。アプリケーションを起動した状態で、採点して、ジャッジに正解すれば演習課題クリアです！
※有料会員になるとこの動画をご利用いただけます
詳しい説明を読む
＃08:人気投票を実装する
このチャプターでは、実際にアプリケーション上に変数という形でデータを保存しておくことで、人気投票を実装していきます。
MDN web docs
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics
オブジェクトとは、関係性のあるデータの集合です。変数や関数を一つに取りまとめることができ、オブジェクトを構成している変数にあたるものを「プロパティ」、関数にあたるものを「メソッド」と呼んだりします。
今回のコードでは、
const counts = { kyokoCount: 0, rioCount: 0, tsubameCount: 0 };というオブジェクトを導入しましたが、これらの
kyokoCount などが「プロパティ」で、counts.kyokoCount のようにしてアクセスすることができます。配列などのデータ型も実はこの「オブジェクト」に分類されるもので、
arr という配列の長さを得る arr.length は、オブジェクトとしては length というプロパティを参照していることになります。私たちが知っているメソッドの例として、配列
arr の末尾の要素を取り除く arr.pop() などがあります。オブジェクトの説明を借りると、あるモノに関連した操作のことをいいます。また、他の言語を既に習得している方は「連想配列」「辞書」「マップ（ハッシュマップ）」のようなデータ構造と同一視してしまうことがあるかもしれませんが、これもまた別のものです。JavaScript における連想配列は
Mapと呼ばれるものです。Map
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map
投票処理を作る
routes/router.js
const router = require("express").Router();
let kyokoCount = 0;
let rioCount = 0;
let tsubameCount = 0;
router.get("/", (req, res) => {
res.render("index", { message: "This is my first Web Application!" });
});
router.get("/votes", (req, res) => {
res.render("votes", { kyokoCount: kyokoCount, rioCount: rioCount, tsubameCount: tsubameCount });
});
router.get("/votes/kyoko", (req, res) => {
kyokoCount++;
res.render("results", { fullName: "霧島京子", count: kyokoCount });
});
router.get("/votes/rio", (req, res) => {
rioCount++;
res.render("results", { fullName: "六村リオ", count: rioCount });
});
router.get("/votes/tsubame", (req, res) => {
tsubameCount++;
res.render("results", { fullName: "緑川つばめ", count: tsubameCount });
});
module.exports = router;オブジェクトを利用して書き直す
const router = require("express").Router();
const counts = { kyokoCount: 0, rioCount: 0, tsubameCount: 0 };
router.get("/", (req, res) => {
res.render("index", { message: "This is my first Web Application!" });
});
router.get("/votes", (req, res) => {
res.render("votes", counts);
});
router.get("/votes/kyoko", (req, res) => {
counts.kyokoCount++;
res.render("results", { fullName: "霧島京子", count: counts.kyokoCount });
});
router.get("/votes/rio", (req, res) => {
counts.rioCount++;
res.render("results", { fullName: "六村リオ", count: counts.rioCount });
});
router.get("/votes/tsubame", (req, res) => {
counts.tsubameCount++;
res.render("results", { fullName: "緑川つばめ", count: counts.tsubameCount });
});
module.exports = router;