JavaScript (ES5) 道場コース I「学習コース Ⅲ」の復習7. FizzBuzz問題に挑戦しようでの疑問点

Question

### 課題は以下の通りです。

繰り返し処理を用いて、「FizzBuzz」という有名な問題に挑戦してみましょう！

1から100までの数字を順番に表示してください。 
ただし、 
・その数が3で割り切れるなら
Fizz

・その数が5で割り切れるなら
Buzz
 
・3でも5でも割り切れるなら
FizzBuzz

をその数字の代わりに表示してください。 

### 疑問1
なぜ、3の倍数「且つ」5の倍数の "＆＆" は、if文の中で先頭に書かないとダメなのでしょうか？

### 疑問2
以下のように記述すると、なぜ、3の倍数、5の倍数、3かつ5の倍数が、それぞれ、Fizz、Buzz、FizzBuzz にならず、数字の間に挟み込まれるのでしょうか？
```JavaScript(ES5)
for(var i = 1; i <= 100; i++ ){
  console.log(i);
  if(i % 3 ===0  && i % 5===0){
    console.log("FizzBuzz");
  }else if (i % 5 ===0){
    console.log("Buzz");
  }else if (i % 3 ===0) {
    console.log("Fizz");
 }
}
```
![イメージ説明](efa07c15534badcb6038a3ee21a4643e.png)

### while分を使った場合でも
以下のように記述すると
```JavaScript
var i = 1;

while(i <= 100) {
  if(i%3===0 && i%5===0){
    console.log("FizzBuzz");
  }else if(i%3 ===0) {
    console.log("Fizz");
  }else if(i%5 ===0){
    console.log("Buzz");
  }
  console.log(i);
  i ++;
}

コード
```
こうなります。↓
![イメージ説明](96f0a673535084abadaf45928f4ed060.png)
なぜでしょうか？

#### 初歩的な質問ですが、回答、よろしくお願いいたします。

Accepted Answer

> なぜ、3の倍数「且つ」5の倍数の "＆＆" は、if文の中で先頭に書かないとダメなのでしょうか？

`javascript`の`if .. else if .. else`は、条件に合致している場合は以降の条件で判定しないからです。
この例でいうと、「**3の倍数「且つ」5の倍数**」を先に書いておかないと**「3の倍数]**もしくは**「5の倍数」**の条件に引っかかってしまうからです。

例えば

```javascript
// 条件①
if (i % 5 ===0){
  console.log("Buzz");
// 条件②
}else if (i % 3 ===0) {
  console.log("Fizz");
// 条件③
}else if(i % 3 ===0  && i % 5===0){
  console.log("FizzBuzz");
}
```

とした場合、**条件②**は**条件①**が偽(`false`)の場合にはじめて評価されます。**条件③**も同様です。
したがって、この例だと`15`などの値も**条件①**に先に引っかかってしまうため、`"Buzz"`と表示されてしまいます。

> 以下のように記述すると、なぜ、3の倍数、5の倍数、3かつ5の倍数が、それぞれ、Fizz、Buzz、FizzBuzz にならず、数字の間に挟み込まれるのでしょうか？

`console.log(i);`が`i`の値によらず、必ず実行されるためです。
もし数字の置き換えを実現したい場合は`else`を追加してその中で実行するとよいです。


```javascript
for(var i = 1; i <= 100; i++ ){
  if(i % 3 ===0  && i % 5===0){
    console.log("FizzBuzz");
  }else if (i % 5 ===0){
    console.log("Buzz");
  }else if (i % 3 ===0) {
    console.log("Fizz");
  }
  // 上記のいずれも満たさない場合は数字を表示
  else {
    console.log(i);
  }
}
```

Answer

追記）
FizzBuzz 問題は、様々な処理を訓練するものであり、「１つの回答例だけが正解」というものではありません。
ただ、問題文から「ベン図を想像できる」だけの知識があることが望ましい題材です。

1から100 の数という矩形のグループ　... 反復処理(for, while)のブロックで表現
3で割り切れるという円（Fizz）のグループ ... if 文などで切り分ける
5で割り切れるという円（Buzz）のグループ ... 同上
2.3. の重なったグループ ... 同上

ご質問（疑問2）で示されるコードは正しく切り分けができていませんので、if文を再確認する必要があります。

if(条件a) { 処理A } .. モシ、「条件aが真」ナラ、「処理A」ヲジッコウ
else if(条件b) { 処理B } .. ソウジャナク、「条件bが真」ナラ、「処理B」ヲジッコウ
else { 処理C } .. ソウジャナイナラ、「処理C」ヲジッコウ（条件aも条件bも共に偽のとき）

javascrit
1for(var i = 1; i <= 100; i++ ){
2  //console.log(i); ... 割り切れるかどうかに関わらず、出力してしまっている
3  if(i % 3 ===0  && i % 5===0){
4    console.log("FizzBuzz");
5  } else if (i % 5 ===0){
6    console.log("Buzz");
7  } else if (i % 3 ===0) {
8    console.log("Fizz");
9  } else {
10    console.log( i )
11  }
12}

3の倍数「且つ」5の倍数の "＆＆" は、if文の中で先頭に書かないとダメなのでしょうか？

問題には要件として示されていませんので、「書かないと駄目」ということはありませんが、
ベン図を見ても分かるように、最も多くの条件を有した領域から消去法で if else を書く手法に過ぎません（重なっている部分を先に処理したほうが、あとで切り分けし直さなくて済むため）。

別段、以下のように、文字列の結合処理に着目した処理も正答です。

javascrit
1for(var i = 1; i <= 100; i++ ){
2  var rslt = "";
3  if (i % 3 ===0) rslt = "Fizz";
4  if (i % 5 ===0) rslt += "Buzz"
5  if (rslt === "") rslt += i; // その数字の代わりに表示.　数値でなく数字と示されている
6  console.log( rslt );
7}

※柔軟な考え方で様々な処理法がある問題ですので、「他人のコードを読む」、「他人にコードを読ませる」といった訓練に使われます。
（追記ここまで

A. 1

if文でelse を使っているからです。

A. 2

console.log(i) は割り切れるかどうかに関わらず、必ず出力しています。

有名な問題だけあって、検索するとヒットします

Google検索 FizzBuzz 回答例

if を使わない例を書いてみました。

javascript
1for ( let i=1; i<=100; ++i ) {
2  let
3    Fizz = !(i % 3),
4    Buzz = !(i % 5),
5    Bit = (Fizz<<1) + Buzz,
6    out = !(Fizz + Buzz) ? i : (Fizz ? 'Fizz': '') + (Buzz ? 'Buzz': ''),
7    out2 = Object.entries({Fizz, Buzz})
8        .reduce((a,[k,v])=>(v ? isFinite(a) ? k : a+k : a),i),
9    out3 = [i,"Fizz","Buzz","FizzBuzz"][Bit]
10  ;
11  console.log( out, out2, out3 );
12}

主な確認事項：

投稿2020/09/17 09:27

編集2020/09/17 21:48

AkitoshiManabe

総合スコア5434

課題は以下の通りです。

疑問1

疑問2

while分を使った場合でも

初歩的な質問ですが、回答、よろしくお願いいたします。

関連した質問