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

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

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

本書情報

出版社	技術評論社
著者	山田 祥寛
発売日	2023/2/13
ページ数	624ページ
レビュー (Amazon)	(4件)

先輩くん

10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！

後輩ちゃん

最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！

【送料無料】 改訂3版JavaScript本格入門 -モダンスタイルによる基礎から現場での応用まで / 山田祥寛 【本】

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報

出版社	オライリージャパン
著者	Dustin Boswell / Trevor Foucher
発売日	2012/6/23
ページ数	260ページ
レビュー (Amazon)	(620件)

先輩くん

より良いコードを書きたい人におすすめの本だよ！

後輩ちゃん

10以上前の書籍ですが、内容は今でも役に立つものばかりです！

【中古】リーダブルコード —より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)／Dustin Boswell、Trevor Foucher、須藤 功平、角 征典

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

FizzBuzz問題とは

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

FizzBuzz問題の内容は、1〜100までの数値を画面に表示させ、3の倍数の時は「Fizz」を、5の倍数の時は「Buzz」を、15の倍数の時は「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つあり、それぞれ解説していきます。

1〜100の数値を繰り返す

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

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

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の時はその対象の数値は倍数の数値であることがあることが判別することができます。

数値 % 倍数 === 0

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が表示されてしまいます。

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問題の解説をしました。