JavaScriptでFizzBuzzを解いてみる

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

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

#目的
コンソールログ内に次のような表示をさせること。
![スクリーンショット 2020-10-22 午後2.51.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704288/03061802-2231-5016-d0f7-9c17b4e6e61a.png)

# 小さいところから組み立てていこう！
まずは、結果を表示させます。

```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文の中身を解説します。<br>
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に置き換える
--

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

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