プロジェクト：チップ計算機と FizzBuzz

代金 84 に 20 パーセントのチップを加えて四人で割ると、一人 25.20 になります。この単元では、これまでの単元で学んだ部品を使って、その計算機を作り、次に定番の練習問題 FizzBuzz を作ります。

問題からプログラムへ

プログラムを書く仕事は、コードを書く前から始まっています。まず、何が入り、何が出て、そのあいだで何が起こるかを、ふつうの言葉で言ってみましょう。チップ計算機なら、入力は代金、チップの率、人数です。出力はチップ、合計、一人分の金額です。そのあいだには小さな計算が三つあります。こうして書き出すと、ぼんやりした一つの仕事が、どれもやり方を知っている小さな仕事いくつかに変わります。

手順 1：計算

const bill = 84;
const rate = 0.2;
const people = 4;

const tip = bill * rate;          // 16.8
const total = bill + tip;         // 100.8
const each = total / people;      // 25.2

コードを信じる前に、手で数を確かめましょう。84 の 20 パーセントは 16.8、合計は 100.8 で、100.8 を 4 で割ると 25.2 です。答えがもうわかっている値で試すことで、率を 0.2 ではなく 20 と打ってしまうようなまちがいに気づけます。そうするとチップは 1,680 になってしまいます。

手順 2：お金をきちんと表示する

お金はふつう小数第 2 位まで表示するので、25.2 と表示すると中途半端に見えます。数のメソッド toFixed(2) は、小数がちょうど二けたの文字列を返すので、each.toFixed(2) は "25.20" になります。数の単元で学んだように、小数には 2 進数の小さな丸め誤差がふくまれることがあります。toFixed はそれも隠してくれるので、表示に使う理由がもう一つあることになります。計算しているあいだは数を数のままにしておき、toFixed は最後の最後、表示するときにだけ呼び出しましょう。

手順 3：関数にまとめる

ほかの数でもう一度実行するかもしれない計算は、関数にするのがふさわしいです。下の関数はオブジェクトを返すので、一回の呼び出しで三つの結果をわかりやすい名前つきで返せます。既定の引数を使えば、よくある場合を短く書けます。

function splitBill(bill, rate = 0.15, people = 1) {
  const tip = bill * rate;
  const total = bill + tip;
  return { tip, total, each: total / people };
}

const r = splitBill(84, 0.2, 4);
console.log(`Tip: ${r.tip.toFixed(2)}`);       // Tip: 16.80
console.log(`Each: ${r.each.toFixed(2)}`);     // Each: 25.20

return { tip, total, each: total / people }; という行は省略記法を使っています。オブジェクトの中に tip とだけ書くと tip: tip という意味になります。キーと変数が同じ名前のプロパティです。

FizzBuzz

FizzBuzz は、数を数える遊びをプログラミングの練習問題にしたものです。1 から 15 まで数えます。3 の倍数では Fizz、5 の倍数では Buzz、両方の倍数では FizzBuzz と言い、それ以外では数を言います。ループ、余りの演算子、if のつながりを使い、落とし穴が一つあります。15 は 3 の倍数なので、3 を先に確かめると 15 で Fizz と表示され、FizzBuzz の分岐にたどりつきません。直し方は if の単元で学んだ決まりです。いちばんせまい条件を先に置きます。

for (let i = 1; i <= 15; i++) {
  if (i % 15 === 0) {
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

i % 15 === 0 で確かめてよいのは、3 でも 5 でも割り切れる数は 15 で割り切れるからです。i % 3 === 0 && i % 5 === 0 と書けば同じことをもっと直接言えます。どちらでもかまいません。自分のプログラムが動いたら、その出力を期待されるリストと一行ずつ比べましょう。1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz です。

次に作るもの

これで言語の中心部分がそろいました。値、変数、演算子、判断、ループ、配列、関数、オブジェクトです。ほとんどすべてのプログラムは、これらの部品からできています。次の一歩としては、FizzBuzz を上限を受け取る関数に書き直す、チップ計算機で Math.ceil を使って一人分を通貨の単位に切り上げる、出費のリストをオブジェクトの配列に入れて分類ごとの合計を表示する、などがよいでしょう。このコースが手本にしている MDN の JavaScript ガイドは、コレクション、クラス、Web ページの操作などの話題へと続いていきます。