FizzBuzz で複数条件を組み立てる

生田 陸人
監修
LuaGate エンジニア / 現役エンジニア
編集 LuaGate編集部

FizzBuzz で複数条件を組み立てる とは

1 から n までの値を順に並べた配列を、FizzBuzz ルールで生成する。本レッスンでは、FizzBuzz で複数条件を組み立てる の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

FizzBuzz で複数条件を組み立てる

FizzBuzz は条件分岐の練習として世界中で使われている古典的な問題です。ルールは次のとおりです。

  • 3 の倍数なら 'Fizz'
  • 5 の倍数なら 'Buzz'
  • 3 と 5 の両方の倍数 (= 15 の倍数) なら 'FizzBuzz'
  • それ以外はその数値そのまま

この問題は 複数の条件をどう並べるか が肝になります。順番を間違えると、15 の倍数なのに 'Fizz' だけが出てしまう、というバグが入ります。条件の順番を意識して if / else if を組み立てる訓練として、この上ない題材です。

シンプルに見えますが、論理の組み立てが甘いとすぐにバグになる、絶妙な難易度の問題です。実際、エンジニア採用の面接で FizzBuzz を出すと差が出ると言われています。

素直な実装

基本に忠実に書くと次のとおりです。もっとも厳しい条件 (15 の倍数) を先頭に置く のがポイントです。

JavaScript

function fizzBuzzAt (n) { if (n % 15 === 0) { return 'FizzBuzz'; } else if (n % 3 === 0) { return 'Fizz'; } else if (n % 5 === 0) { return 'Buzz'; } else { return n; } } fizzBuzzAt(1); // 1 fizzBuzzAt(3); // 'Fizz' fizzBuzzAt(5); // 'Buzz' fizzBuzzAt(15); // 'FizzBuzz'

n % 3 === 0 を先に書いてしまうと、15 のときも先に 'Fizz' で return してしまい、'FizzBuzz' が出ません。else if は 上から順に評価される という性質を活かして、特殊なケースから書く必要があります。

1..n の配列を作る

問題本体では、1 から n までの値を順に並べた配列を作ります。for ループで配列に push していく方法が分かりやすいです。

JavaScript

function fizzBuzz (n) { const result = []; for (let i = 1; i <= n; i = i + 1) { if (i % 15 === 0) { result.push('FizzBuzz'); } else if (i % 3 === 0) { result.push('Fizz'); } else if (i % 5 === 0) { result.push('Buzz'); } else { result.push(i); } } return result; } fizzBuzz(5); // [1, 2, 'Fizz', 4, 'Buzz']

配列の中身は 数値 と 文字列 が混ざります。JavaScript の配列は型がバラバラでも問題なく入るので、このまま return できます。

動きを追ってみる

diagram (will load when visible)

for ループの中に if / else if を入れた構造です。条件分岐とループの組み合わせは実務で非常によく使う形なので、ここでしっかり体に染み込ませておきましょう。

ループは次のレッスン以降で詳しく扱いますが、ここでは「決まった範囲を 1 ずつ進めて処理する」という最小限の形で覚えておけば十分です。

別解 — && で順番を意識せず書く

if を 3 つ並べて、フラグを更新する書き方もあります。

JavaScript

function fizzBuzzAt2 (n) { let label = ''; if (n % 3 === 0) label = label + 'Fizz'; if (n % 5 === 0) label = label + 'Buzz'; return label === '' ? n : label; }

こちらの書き方は「3 の倍数なら Fizz を付け加える」「5 の倍数なら Buzz を付け加える」「両方なら自動的に 'FizzBuzz' になる」というロジックです。else if を使わなくても済むので、別解として知っておくと武器が増えます。

よくある間違い

  1. 条件の順番が逆。if (n % 3 === 0) を先に書いてしまうと、15 の倍数で 'Fizz' だけが出てしまいます。先に書くのは「狭い条件」、後に書くのが「広い条件」です。
  2. i < n で書いてしまう。for (let i = 1; i < n; ...) だと、n 自身は配列に含まれません。問題文に合わせて <= を使います。
  3. i++ の書き忘れ。for の更新部分を書き忘れると無限ループになります。i = i + 1 または i++ を必ず書きます。

やってみよう

正の整数 n を受け取り、1 から n までの値を FizzBuzz ルールで変換した配列を返す関数 fizzBuzz を実装してください。たとえば fizzBuzz(5) は [1, 2, 'Fizz', 4, 'Buzz'] です。条件の順番に注意して書きましょう。

よくある質問

Q. ブラウザと Node.js で動作は変わりますか？

A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。

Q. ES6 以降の新機能は使っても大丈夫ですか？

A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。

Q. TypeScript に進む価値はありますか？

A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。

次のレッスン

次は 短絡評価でデフォルト値を返す で、1 から n までの値を順に並べた配列を、FizzBuzz ルールで生成する を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

  1. FizzBuzz の要点を自分の言葉で説明できる
  2. このレッスンの最小コード (または操作手順) を見ずに書ける
  3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. FizzBuzz とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

要件

  1. 1 から n までを順に処理して配列にすること
  2. 15 の倍数を最初に判定すること
  3. 数値と文字列が混ざる配列を返すこと

入出力例

test-cases.txt

fizzBuzz(1) → [1] fizzBuzz(3) → [1,2,"Fizz"] fizzBuzz(5) → [1,2,"Fizz",4,"Buzz"] fizzBuzz(15) → [1,2,"Fizz",4,"Buzz","Fizz",7,8,"Fizz","Buzz",11,"Fizz",13,14,"FizzBuzz"] fizzBuzz(0) → []

ヒント

main.js
main.js
学習モード

メモ

FizzBuzz で複数条件を組み立てる

⌘S で保存