FizzBuzz問題を解いた際のコードをリファクタリングした軌跡 feat.JavaScript

# FizzBuzz問題ってなんですか
素人すぎて[FizzBuzz問題](https://ja.wikipedia.org/wiki/Fizz_Buzz)ってものをそもそも知らなかったんですが、問題を解いてみる機会があったので以下のQiitaの記事の問題文を参考にやってみた。

[FizzBuzzから始めるコードの再利用性を高めるトレーニング - Qiita](https://qiita.com/tadsan/items/b9521f149d4964b506d0)

> 1から100までの数をプリントするプログラムを書け。
ただし3の倍数のときは数の代わりに｢Fizz｣と、5の倍数のときは｢Buzz｣とプリントし、3と5両方の倍数の場合には｢FizzBuzz｣とプリントすること。

# 1回目のソース（正解コード）

一応プログラマーとして生きてるので解けなかったら引退も考えてたけどまあ普通に解けた。

```FizzBuzz.js
for (let index = 1; index <= 100; index++) {

    if (index % 3 === 0 && index % 5 === 0) {
        console.log('FizzBuzz');
    } else if (index % 3 === 0) {
        console.log('Fizz');
    } else if (index % 5 === 0) {
        console.log('Buzz');
    } else {
        console.log(index);
    }

}
```

**実行結果**

```
[Running] node "c:\work\javascript\FizzBuzz.js"
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
Fizz
22
23
Fizz
Buzz
26
Fizz
28
29
FizzBuzz
31
32
Fizz
34
Buzz
Fizz
37
38
Fizz
Buzz
41
Fizz
43
44
FizzBuzz
46
47
Fizz
49
Buzz
Fizz
52
53
Fizz
Buzz
56
Fizz
58
59
FizzBuzz
61
62
Fizz
64
Buzz
Fizz
67
68
Fizz
Buzz
71
Fizz
73
74
FizzBuzz
76
77
Fizz
79
Buzz
Fizz
82
83
Fizz
Buzz
86
Fizz
88
89
FizzBuzz
91
92
Fizz
94
Buzz
Fizz
97
98
Fizz
Buzz

[Done] exited with code=0 in 0.647 seconds

```

これをいい感じにできないかと思いリファクタを試みた。

# 2回目のソース（不正解コード）

if判定ではまったら即抜け出すように**`break`書いたらループの世界から抜け出してしまった。**
あんまり普段からループ抜け出す処理書かないから普通に間違えた。引退が頭をよぎる。

```FizzBuzz.js
for (let index = 1; index <= 100; index++) {

    if (index % 3 === 0 && index % 5 === 0) {
        console.log('FizzBuzz');
        break;
    } else if (index % 3 === 0) {
        console.log('Fizz');
        break;
    } else if (index % 5 === 0) {
        console.log('Buzz');
        break;
    }

    console.log(index);

}
```

**実行結果**

```
[Running] node "c:\work\javascript\FizzBuzz.js"
1
2
Fizz

[Done] exited with code=0 in 0.538 seconds

```


# 3回目のソース（正解コード）

if判定ではまったら即抜け出すように**`continue`を`break`の代わりに記述。**
常識的に考えて`continue`だよね。でも僕にその常識がなかったようです。

```FizzBuzz.js
for (let index = 1; index <= 100; index++) {

    if (index % 3 === 0 && index % 5 === 0) {
        console.log('FizzBuzz');
        continue;
    } else if (index % 3 === 0) {
        console.log('Fizz');
        continue;
    } else if (index % 5 === 0) {
        console.log('Buzz');
        continue;
    }

    console.log(index);

}
```

**実行結果**

```
[Running] node "c:\work\javascript\FizzBuzz.js"
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
Fizz
22
23
Fizz
Buzz
26
Fizz
28
29
FizzBuzz
31
32
Fizz
34
Buzz
Fizz
37
38
Fizz
Buzz
41
Fizz
43
44
FizzBuzz
46
47
Fizz
49
Buzz
Fizz
52
53
Fizz
Buzz
56
Fizz
58
59
FizzBuzz
61
62
Fizz
64
Buzz
Fizz
67
68
Fizz
Buzz
71
Fizz
73
74
FizzBuzz
76
77
Fizz
79
Buzz
Fizz
82
83
Fizz
Buzz
86
Fizz
88
89
FizzBuzz
91
92
Fizz
94
Buzz
Fizz
97
98
Fizz
Buzz

[Done] exited with code=0 in 0.316 seconds

```

できた。
予測どおり少しだけ1回目のコードより実行速度があがった。（2倍くらい）

**1回目コード実行結果**
> [Done] exited with code=0 in 0.647 seconds

↓

**3回目コード実行結果**
> [Done] exited with code=0 in 0.316 seconds



一応1回目のソースコードよりいい状態になった、かな

# おわり
- `continue`書いたほうが実行速度が少し早くなるという発見ができた。
- また`break`は`for`から抜け出すものなんだなぁということの勉強にもなった。
- 解いた後にもっといいコードが書けないかという考えは大事だとおもった
- 引退するかと思った。危なかった

# 参考
- [FizzBuzzから始めるコードの再利用性を高めるトレーニング - Qiita](https://qiita.com/tadsan/items/b9521f149d4964b506d0)
- [Fizz Buzz - Wikipedia](https://ja.wikipedia.org/wiki/Fizz_Buzz)