JavaScript

【JavaScript】FizzBuzz問題をやってみよう

こちらの記事では、エンジニアの採用試験などで出されるFizzBuzz問題をJavaScriptで解いたコードを紹介しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

FizzBuzz問題とは

FizzBuzz問題とは、企業が求める必要最低限のプログラミング能力があるかどうか判断するときに出題される問題です。エンジニアの採用試験やプログラミング初学者の入門書などで紹介されていることが多いです。

FizzBuzz問題の内容は、1〜100までの数値を画面に表示させ、3の倍数の時は「Fizz」を、5の倍数の時は「Buzz」を、15の倍数の時は「FizzBuzz」の文字列を表示させます。

FizzBuzz問題のコード

まず初めにFizzBuzz問題の解答コードと実行結果を下記に載せています。
for(let i = 1; i <= 100; 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);
  }
}
1
2
"Fizz"
4
"Buzz"
"Fizz"
7
8
"Fizz"
"Buzz"
11
"Fizz"
13
14
"FizzBuzz"
16
・(省略)

FizzBuzz問題を解く上で重要となるポイントは3つあり、それぞれ解説していきます。

3つのポイント

  1. 1〜100の数値を繰り返す
  2. ○倍数の時の求め方
  3. 実行順番

1〜100の数値を繰り返す

for(let i = 1; i <= 100; i++){}

1〜100の数値を表示させるにはfor文を使います。for文とは3つの引数を取り条件を満たすまで繰り返し処理を実行します。第一引数には「初期値」を、第二引数には「条件式」を、第三引数には「初期値の増減値」を設定します。

FizzBuzz問題の場合1〜100の数値を表示させるため、第一引数の初期値は1(let i = 1;)を設定し、第二引数の条件式には100回処理をループさせる(i <= 100;)を設定し、第三引数には初期値で設定した変数iに対してループ処理が1回実行されるごとに1ずつ足していきます(i++)。
第二引数に指定する条件式の不等号が間違えやすいポイントなので注意しましょう。
for(let i = 1; i < 100; i++)  // 1〜99の数値が表示
for(let i = 1; i <= 100; i++) // 1〜100の数値が表示

○倍数の時の求め方

FizzBuzz問題では、3倍・5倍・15倍の倍数の時に数字ではなく固定の文字列を表示させる必要があります。この倍数をどのように求めるのか、答えは3・5・15の数で割り余りが0の時はその対象の数値は倍数の数値であることがあることが判別することができます。

JavaScriptで割った数値の余りを調べるときは以下の式で表すことができます。
数値 % 倍数 === 0
上記の式に3・5・15のパターンを作成すればFizz・Buzz・FizzBuzzの文字列を表示させることができます。
for(let i = 1; i <= 100; i++){
  if(i % 15 === 0){
    // 15の倍数
  } else if(i % 3 === 0){
    // 3の倍数
  } else if(i % 5 === 0){
    // 5の倍数
  }
}

実行順番

最後に実行順番について解説します。先ほど◯倍数の時の求め方で紹介したコードですが、正しい実行順番で設定しないとFizzの次に数値ではなくBuzzが表示されてしまいます。

下記は実行順番を変更してFizzBuzz問題を解いたコードと実行結果になります。
for(let i = 1; i <= 100; i++){
  if(i % 3 === 0){
    console.log('Fizz');
  } else if(i % 5 === 0){
    console.log('Buzz');
  } else if(i % 15 === 0){
    console.log('FizzBuzz');
  } else {
    console.log(i);
  }
}
1
2
"Fizz"
4
"Buzz"
"Fizz"
7
8
"Fizz"
"Buzz"
11
"Fizz"
13
14
"Fizz"
16
・(省略)

実行結果を確認すると、15行目の箇所は本来FizzBuzzの文字が表示されるのに、Fizzの文字が表示されています。

なぜ、このような実行結果になったのか。その理由は、単純で15の倍数の数値は3と5の倍数でもあるからです。3と5の倍数でもある数値に対して先に3と5の倍数チェックの処理を行なってしまうと条件に一致してしまい後続の処理がされなくなります。

このような状態にならないよう、15の倍数の条件分岐の処理を1番初めに行うことで正しい処理が実装できます。

まとめ

今回は、JavaScriptでFizzBuzz問題の解説をしました。

FizzBuzz問題が理解でき、次のステップに進みたい人向けにJavaScriptのおすすめ勉強本と動画コンテンツについて紹介している記事がありますので、ぜひ参考にしてください!

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村