今さら聞けない【FizzBuzz】(javascript編)

FizzBuzzとは・・・

数字を1から100まで順番に出力していき
・3の倍数の時「 Fizz 」
・5の倍数の時「 Buzz 」
・3かつ5の倍数の時「 FizzBuzz 」を表示させる遊び
※それ以外の値はそのまま表示

プログラミング 界隈では超メジャーな「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ˆ )/

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
Twitterも気軽にフォローお願いします♪
プログラミング 関係やモチベUPな内容つぶやいてます！
https://twitter.com/WAKUZ0_2
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆