JavaScriptのFizzBuzz問題を解説｜考え方と書き方を初心者向けに解説

プログラミングを学び始めると、必ずと言っていいほど耳にする単語があります。それが「FizzBuzz（フィズバズ）問題」です。

一見すると単純な数字の羅列を作る問題ですが、ここにはプログラミングの基本である「繰り返し（for文）」と「条件分岐（if文）」、そして「論理的な優先順位」のすべてが詰まっています。

本記事では、FizzBuzz問題の答えだけでなく、「なぜその順番で書く必要があるのか？」という考え方のプロセスをわかりやすく解説します。

FizzBuzz問題とは？
使う知識のおさらい
【重要】FizzBuzzを解くための「思考の組み立て」
1. 失敗するパターン
2. 成功するパターン（優先順位の鉄則）
実際にコードを書いてみよう
1. コードのポイント解説
【応用】論理演算子を使ったスマートな書き方
三項演算子を使った「1行FizzBuzz」への挑戦
まとめ：FizzBuzzで「プログラミング脳」を鍛えよう

FizzBuzz問題とは？

もともとは数字を使った言葉遊びのゲームです。以下のルールに従って文字を書き換えます。

1から順番に数字を数えていき、以下のルールに従って文字を書き換えます。

3の倍数のときは、数字の代わりに「Fizz」と言う。
5の倍数のときは、数字の代わりに「Buzz」と言う。
3と5両方の倍数（つまり15の倍数）のときは、数字の代わりに「FIzzBuzz」と言う。
それ以外の数字は、そのまま数字を言う。

使う知識のおさらい

この問題を解くための必要なJavaScriptの武器は3つです。

for文（繰り返し）

1から30まで（あるいは100まで）数字を一つずつ増やしながら処理を行うために使います。

if文（条件分岐）

「もし3の倍数なら〜」といった判断を行うために使います。

剰余演算子（%）

「倍数かどうか」を判定するために使います。i % 3 === 0と書くことで、「iを3で割った余りが0（=3で割り切れる）」という条件が作れます。

【重要】FizzBuzzを解くための「思考の組み立て」

初心者が陥りやすい最大の罠は、「書く順番」を間違えてしまうことです。

管理人

最初は知識も経験も少ないので、失敗することの方が当たり前なので落ち込むことなくやっていくことが大事です。

プログラミングは、上から順番に条件を判定していくという性質があります。

失敗するパターン

もし、以下のような順番で頭の中で考えてしまうと、うまくいきません。

「3の倍数」を判定
「5の倍数」を判定
「15の倍数」を判定

なぜなら、15という数字は「3の倍数」でもあるため、最初の判定で「Fizz」と表示されて終わってしまい、一生「FizzBuzz」にたどり着けないからです。

成功するパターン（優先順位の鉄則）

条件が重なる場合は、「一番厳しい条件（条件が狭いもの）」から先に書くのが鉄則です。

「15の倍数（3かつ5の倍数）」を最初に判定
次に「3の倍数」を判定
その次に「5の倍数」を判定
最後に「それ以外」を表示

実際にコードを書いてみよう

では、1から30までのFizzBuzz問題をJavaScriptで書いてみましょう。

for (let i = 1; i <= 30; i++) {
  
  if (i % 15 === 0) {
    // 15の倍数のとき（3でも5でも割り切れる）
    console.log("FizzBuzz");
    
  } else if (i % 3 === 0) {
    // 3の倍数のとき
    console.log("Fizz");
    
  } else if (i % 5 === 0) {
    // 5の倍数のとき
    console.log("Buzz");
    
  } else {
    // それ以外のとき（数字をそのまま出す）
    console.log(i);
  }
}

コードのポイント解説

i = 1から始める：問題文が「1から」なので、初期値は1にします。
i <= 30：30まで含めるので、比較演算子は<=を使います。
i % 15 === 0：これはi % 3 === 0 && i % 5 === 0（論理演算子）を使って書くこともできます。
else ifで繋ぐ：一つでも条件に当てはまったら、その後の判定はスキップされます。

【応用】論理演算子を使ったスマートな書き方

少しステップアップして、 JavaScriptの論理演算子（&& / || / !）とは？初心者向けに使い方を解説で学んだ&&（かつ）を使って書き換えてみましょう。

for (let i = 1; i <= 30; i++) {
  // 3の倍数「かつ」5の倍数という書き方
  if (i % 3 === 0 && i % 5 === 0) {
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

「15の倍数」と書くよりも、「3と5の両方のルールを適用しているんだな」という意図が伝わりやすくなる場合もあります。

三項演算子を使った「1行FizzBuzz」への挑戦

さらに上級編として、三項演算子を駆使すると、驚くほど短く書くことができます。（ただし、読みやすさは落ちるので注意！）。

for (let i = 1; i <= 30; i++) {
  const result = (i % 15 === 0) ? "FizzBuzz" : (i % 3 === 0) ? "Fizz" : (i % 5 === 0) ? "Buzz" : i;
  console.log(result);
}

実際にここまで詰め込むことは稀ですが、三項演算子の練習としては最高の題材です。