こちらの記事では、エンジニアの採用試験などで出されるFizzBuzz問題をJavaScriptで解いたコードを紹介しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
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つあり、それぞれ解説していきます。
- 1〜100の数値を繰り返す
- ○倍数の時の求め方
- 実行順番
1〜100の数値を繰り返す
for(let i = 1; i <= 100; i++){}１〜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のおすすめ勉強本と動画コンテンツについて紹介している記事がありますので、ぜひ参考にしてください！
