今さら聞けない【FizzBuzz】(javascript編)
FizzBuzzとは
数字を1から100まで順番に出力していき
・3の倍数の時「 Fizz 」
・5の倍数の時「 Buzz 」
・3かつ5の倍数の時「 FizzBuzz 」を表示させる
※それ以外の値はそのまま表示
今回はjavascriptで解いてみます！
詳しく解説しているので、是非読んでみて下さい！
＜解答＞
※色んなパターンの解答例があります。
for( let i = 1; i <= 100; i ++ ) {
if( i % 15 === 0 ) {
console.log( "FizzBuzz" );
} else if ( i % 5 === 0 ) {
console.log( "Buzz" );
} else if ( i % 3 === 0 ) {
console.log( "Fizz" );
} else {
console.log( i );
}
}
#結果
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
・
・
・
＜解説＞
4つポイントがあるので1つずつ解説していきます！
➀：1〜100までの数字を繰り返す「反復処理」
➁：倍数をどのようにすれば求められるか
➂：コードの処理は「上から順に」実行される
➃：もし数値が〇〇なら△△する「条件分岐」
➀：1〜100までの数字を繰り返す「反復処理」
簡潔に書ける「for文」を使います！
for ( let i = 1; i <= 100; i ++ ) {
処理
}
let i = 1; （変数の定義：iを定義する）
i <= 100; （条件式：100まで）
i ++ （変数の更新：i += 1の省略形)
➁：倍数をどのようにすれば求められるか
・3の倍数＝3で割れば「余り」が0になる
・3かつ5の倍数＝15の最小公倍数
※最小公倍数とは・・・
小学生で習いましたよね（笑）0以外の複数の整数の公倍数で、
その中でも一番小さい数を最小公倍数と言います。
3と5の最小公倍数を例にすると
3の倍数は「3,6,9,12,15,18...」、5の倍数は「5,10,15,20...」
3と5の倍数で共通している数で一番小さい数は「15」
つまり、最小公倍数は15です。
a % b === 0 ( a を b で割った余りが0に等しい )
i % 3 === 0 ( 3の倍数 )
i % 15 === 0 ( 15の倍数 )
➂：コードの処理は「上から順に」実行される
上から順に処理されます。条件分岐の順番には注意です！
ここでのポイントは15の倍数（ i % 15 === 0 ）を一番最初の条件にする事です！
仮に、最初のif文に3の倍数（ i % 3 === 0 ）の条件を記述すると、
条件を満たしその先の処理は実行されなくなるからです。5の倍数も然りです。
なので、if文は条件が厳しいものから順番に書くのがいいです！
➃：もし数値が〇〇なら△△する「条件分岐」
if文〜条件分岐を使います。
if ( 条件式A ) {
条件式Aがtrueの時
} else if ( 条件式B ) {
条件式Aがfalseで、条件式Bがtrueの時
} else {
条件式A,Bどちらもfalseの時
}
まとめ
for ( let i = 1; i <= 100; i ++ ) {
※「 i 」を定義し、1〜100まで「 i 」を+1ずつ足すのを繰り返す
if( i % 15 === 0 ) {
console.log( "FizzBuzz" );
※もし「 i 」が15の倍数であれば「 FizzBuzz 」を出力
} else if ( i % 5 === 0 ) {
console.log( "Buzz" );
※もし「 i 」が15の倍数でなく5の倍数であれば「 Buzz 」を出力
} else if ( i % 3 === 0 ) {
console.log( "Fizz" );
※もし「 i 」が15と5の倍数ではなく3の倍数であれば「 Fizz 」を出力
} else {
console.log( i );
※どれにも当てはまらなければ「 i 」を出力
}
}
以上です！
FizzBuzzを理解できれば、if文、for文、三項演算子の仕組みもわかってきますね！
私も最初は理解するのに苦労しましたが、
意外と基本的な部分多いので１つずつ噛み砕いて、アルゴリズムを理解していくのが良いと思います！
もし、ご指摘やこういう方法もあるよという方はコメントかDMお待ちしております！
最後まで読んで頂きありがとうございました( ˆoˆ )/
Discussion