【学習メモ】FizzBuzzを解いてリファクタリングに触れる #JavaScript

はじめに

TypeScript 勉強中の👶です。
理解を深めるために日々の学びを記事にしています。
初心者の記事なので言い回しや記載に誤りがあるかも知れませんが、暖かく見守っていただけると幸いです。
(よろしければ間違いをコメントいただけると学び、励みになります！)

FizzBuzz問題とは？

FizzBuzzとはプログラマがプログラムを書くことができるか調べるクイズのようなものです。

ルール
3で割り切れるときは「Fizz」を発言
5で割り切れるときは「Buzz」を発言
両方で割り切れるときは「FizzBuzz」を発言
該当しない場合、その数字を出力

下記のような出力が得られたら正解。

1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz 16 17 Fizz 19 Buzz...

今回は複数回に分けて、リファクタリングを行いながらFizzBuzzを解きました。

1回目、まずは思うままに解いてみる

敢えて、特別な書き方はしないでコードを書いてみます。

let i: number = 1;
let can_division_by3: boolean;
let can_division_by5: boolean;
let can_division_by15: boolean;
let result: string = "";

while (i <= 20) {
  if (i % 3 === 0) {
    can_division_by3 = true;
  } else {
    can_division_by3 = false;
  }
  if (i % 5 === 0) {
    can_division_by5 = true;
  } else {
    can_division_by5 = false;
  }
  if (i % 15 === 0) {
    can_division_by15 = true;
  } else {
    can_division_by15 = false;
  }

  if (can_division_by15) {
    result += " FizzBuzz";
  } else if (can_division_by3) {
    result += " Fizz";
  } else if (can_division_by5) {
    result += " Buzz";
  } else {
    result += ` ${i}`;
  }
  i++;
}
console.log(result);

ワァ。。コードめちゃ長。。(ドン引)

だいぶおめでたい感じの長さにできました。読みずらさワーストオブイヤー受賞です。

2回目解いてみる

改善点

三項演算子を使用
型宣言も推定できるところは省略した

let i = 1;
let can_division_by3;
let can_division_by5;
let can_division_by15;
let result = "";

while (i <= 20) {
  i % 3 === 0 ? (can_division_by3 = true) : (can_division_by3 = false);
  i % 5 === 0 ? (can_division_by5 = true) : (can_division_by5 = false);
  i % 15 === 0 ? (can_division_by15 = true) : (can_division_by15 = false);

  if (can_division_by15) {
    result += " FizzBuzz";
  } else if (can_division_by3) {
    result += " Fizz";
  } else if (can_division_by5) {
    result += " Buzz";
  } else {
    result += ` ${i}`;
  }
  i++;
}
console.log(result);

三項演算子だけでもだいぶコード量が減って可読性がマシに。

三項演算子ってスゴイ。
でもまだまだ長いですね。

3回目、まだまだ短くできるよね

改善点

不要な変数を消す

let i = 1;
let result = "";

while (i <= 20) {
  if (i % 15 === 0) {
    result += " FizzBuzz";
  } else if (i % 3 === 0) {
    result += " Fizz";
  } else if (i % 5 === 0) {
    result += " Buzz";
  } else {
    result += ` ${i}`;
  }
  i++;
}
console.log(result);

スッキリ！

最初に比べるとスッと内容が入ってきます。

最後に、答え合わせ

模範解答を見て答え合わせします。

" "をつけるif文を追加。(↑の書き方だと、先頭に" "が入ってしまうため)
while文でなくfor文を使用。

let result = "";
for (let i = 1; i <= 20; i++) {
  if (i > 1) {
    result += " ";
  }

  if (i % 15 === 0) {
    result += "FizzBuzz";
  } else if (i % 3 === 0) {
    result += "Fizz";
  } else if (i % 5 === 0) {
    result += "Buzz";
  } else {
    result += String(i);
  }
}
console.log(result);

for文は繰り返す回数が分かっている場合、while文は終了条件が決まっているが明確な回数がない場合に使用することが多いようです。今回はfor文の方が適切ですね。個人的に、for文の先頭にループの条件を纏めて記載するため、より内容を把握しやすそうだと思いました。