JavaScriptでFizzBuzzを解いてみる

15577 ワード
JavaScript if文 FizzBuzz for文 条件分岐 JavaScript テキストリンク

FizzBuzzゲームとは、二人以上のプレイヤーが1から順番に数字を発言し、3で割り切れるときは「Fizz」と答え、5で割り切れるときは「Buzz」と答える。両方割り切れる時は「FizzBuzz」と答え、間違えた人から脱落していくというゲームです。

問題

1から100までを表示させる。ただし、3の倍数では「Fizz」と表示させる。5の倍数では「Buzz」と表示させる。3と5の倍数では「FizzBuzz」と表示させること。
表示させる箇所はコンソールログ内とする。

目的

コンソールログ内に次のような表示をさせること。

小さいところから組み立てていこう！

まずは、結果を表示させます。

index.html
<script>
   function fizzbuzz() {
        console.log(1);
   }
   fizzbuzz();
</script>

→ログ内に数字の1が表示されます。

次に1から100までを表示します。ここではfor文を使っていきます。

index.html
<script>
   function fizzbuzz() {
      for(i=1: i<=100; i++) {
        console.log(i);
      }
   }
   fizzbuzz();
</script>

for文の中身を解説します。

i=1で1からスタートすると宣言する。
i<=100で100までと、最終的な数字を決める。
i++で、iが100になるまで1ずつ増やしていく。

次に数字で表示させるところ、FizzBuzzなどの文字に置き換えるところをどう分けるかを考える。

数字（すでに出力できている）
Fizz
Buzz
FizzBuzz
→これらが使われる。

条件分岐はif文を使っていきます。
まずは、Fizzを表示させてみましょう！

index.html
<script>
    function fizzbuzz(){
        for(i=1; i<=100; i++){
            if(i%3 === 0){
                console.log('Fizz');
            }else{
                console.log(i);
            }
        }
    }
    fizzbuzz();
</script>

i%3 === 0で余りが0かを調べています。

次に、Buzzを表示させてみましょう！

index.html
<script>
    function fizzbuzz(){
        for(i=1; i<=100; i++){
            if(i%3 === 0){
                console.log('Fizz');
            }else if(i%5 === 0){
                console.log('Buzz');
            }else{
                console.log(i);
            }
        }
    }
    fizzbuzz();
</script>

else ifをつかうことで、3の倍数でなかったときは〜の処理を書くことができます。i%5 === 0で余りが0かを調べています。

次に、FizzBuzzを表示させてみましょう！

ここから少し難しいですが、頑張りましょう！
今回は2つのやり方を解説します。

1つ目

まず、3と5の倍数ということなので最小公倍数を使う方法があります。3の倍数は「3,6,9,12,15」、5の倍数は「5,10,15」です。
3の倍数と5の倍数で共通している数で一番小さい数は15です。

それでは、コードに追加していきます。

index.html
<script>
    function fizzbuzz(){
        for(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);
            }
        }
    }
    fizzbuzz();
</script>

書き方は今までと同じですが、一つ重要なポイントがあります。
それは、書く順番が変わっていることです。

index.html
<script>
    function fizzbuzz(){
        for(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);
            }
        }
    }
    fizzbuzz();
</script>

このようにFizzBuzzを求めるif文を一番下に書いてしまうと、FizzBuzzとは表示されません。Fizzと表示されてしまいます。理由は、FizzBuzzの分岐に到達する前に条件を満たしてしまっており、下の処理まで行われないからです。なので、書く順番には注意する必要があります。

2つ目

こちらは最小公倍数を使わない方法です。
文字に置き換わる条件は次のようになります。

  1. 3の倍数の時
  2. 5の倍数の時
  3. 3と5の倍数の時

違う言い方をすると次のようになります。

  1. 3の倍数だけれど、5の倍数ではない時
  2. 3の倍数ではないけれど、5の倍数である時
  3. 3と5の倍数の時

それでは書いてみます！

index.html
<script>
    function fizzbuzz(){
        for(i=1; i<=100; i++){
            if(i%3 === 0 && i%5 !== 0){
                console.log('Fizz');
            }else if(i%3 !== 0 && i%5 === 0){
                console.log('Buzz');
            }else if(i%3 === 0 && i%5 === 0){
                console.log('FizzBuzz');
            }else{
                console.log(i);
            }
        }
    }
    fizzbuzz();
</script>

完成です。こちらの長所はFizzBuzzを求めるif文が下になっても大丈夫だということです。

--
コンソールログに文字や数字を表示させる
1から100まで繰り返す命令を書く
3の倍数をFizzに置き換える
5の倍数をBuzzに置き換える

3と5の倍数をFizzBuzzに置き換える

このように一つずつ細かくすることで、一つ一つを簡単にすることができました。

今回は以上になります。最後まで読んでいただきありがとうございました！