**こんにちは！ばーんです。**

今回は有名なfizzbuzzゲームをjavascriptでやっていきます。

#はじめに

今回はQiitaをメモ形式で使用してみます。
本当に考えた順序に、何を考えたか？記載しながら書き綴ります。
（僕のレベルはJSとjQueryをprogateでやった程度です＾＾）

ですので、対象は

**・初学者がどんなルートで考えているのか知りたい
・JSはprogate終わったところで正直不安…**

という方が対象となっていますのでご理解下さい。

※流石に多少の編集はしますが、基本は書き殴っていくだけです

##目標確認
一般的なルールはこちら
>1から100までの数をプリントするプログラムを書け。ただし3の倍数のときは数の代わりに｢Fizz｣と、5の倍数のときは｢Buzz｣とプリントし、3と5両方の倍数の場合には｢FizzBuzz｣とプリントすること。

基本的にどの言語でも表現できそうですが、今回はJSで書いていきます。
ここで、ルールから読み取る必要なものは、
###①1〜100まで表示するプログラム
###②3と5の倍数の場合はそれぞれfizz,buzzと表記させる
###③②より優先させて3かつ5の倍数の時はfizzbuzzを表記させる
ですかね。それでは行ってみましょー！
今回はfizzbuzzでは検索せずにその他の検索で解いていきます。

###①1〜100まで表示するプログラム
はい。これ何か見たことありますね…とりあえずそのまま検索してみます
「JS　1〜100まで表示」と…

あ、for文ね！やった気がする… [参考サイト](https://techacademy.jp/magazine/5481)

![img](/mosaic-code.jpg)

で、100まで表示なので、100に変える。でえぃっ

だとdocument.writeがよく分からん…表示でいいはずなのでお馴染みのconsole.logに変えると

おし！ただし99までなので、比較演算子か数値変えないと…でえいっ

<img width="531" alt="Screen Shot 2020-01-28 at 22.48.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/87c047e4-49cc-b5ae-9343-c68c59b30e1e.png">
いけましたね！（画面では切れてますが100まで表記されてます）

###②3と5の倍数の場合はfizz,buzzと表記させる
これは、恐らくif文ですね＾＾これぐらいであれば自分でもわかります（そんな気がする＾＾）

if文の作り方ってどうだったっけ…「JS　if」で検索と… [参考サイト](https://techplay.jp/column/469)

![img](/mosaic-code.jpg)

あーこんなんだった。これをいじってまずは3の時を出してみると…

![img](/mosaic-code.jpg)

あれ。ちょっとまって全部fizzになってるwしかも処理終わってなくない？
あれ？esc押しても消えない。macが唸ってる。ふぁあああって唸ってる

焦る焦る。一旦VS（テキストエディタ）閉じます。心をしずめる。

他の例文を見ると…あー条件式がおかしいのね。演算子の問題か。
[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators)を見て、とりあえず動くものを作りたいから…
<img width="531" alt="Screen Shot 2020-01-29 at 17.28.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/eb03c5ea-4466-7d0e-441e-3a5b62c7c4ad.png">
いけた！あとはこれを3の倍数にしたらいいので。えーっと…「nの倍数」で調べるとなんか数学的なことが出てくる…
違う違う。「nの倍数　JS」で調べると、TOPに良さげな[サイト](https://note.com/strictlyes/n/na49084dbf944)が。

なるほど。3で割り切って0になれば3の倍数ね。確かに。

![img](/mosaic-code.jpg)

をいけたいけた。あとは5の条件も追加して…（この辺りはエクセルでIFの分岐にIF入れてた経験があったので理解が早かったです）
<img width="531" alt="Screen Shot 2020-01-29 at 17.40.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/fa408f99-078a-5d74-60c7-884b250f6ebc.png">

よし！おk！
※0が表示されてるせいで最初がfizzなので、i=1にここで変更します

###③②より優先させて3かつ5の倍数の時はfizzbuzzを表記させる
これはつまり、
・3かつ5の倍数を求める
・②より優先的に処理させる
が必要で、

####・3かつ5の倍数を求める
→数学やってて良かったぁ…最小公倍数分かればいいので、この場合は「15」でおkですね
ごめんなさい。なんかこれは感覚的に15だなって分かりました。

####・②より優先的に処理させる
→エクセルやってて良かったぁ…この場合最初の条件のチェックで15の倍数か？チェックすればいいので、「5」を追加した時と同じ容量でやればおk！（のはず）

これを組み合わせると…ドンっ！
<img width="466" alt="Screen Shot 2020-01-29 at 17.57.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/2d0787e3-578f-ad38-2b3d-72e909aa669d.png">
できた！勝った！第三部（完）！

##「ちょっと待って」
ここでメンターから神の啓示が。要約すると
「動いたものを作れたのはOKなんだけど、改善点がある」
といって作ってくれたコードと比較しながら説明してもらいました…

**今のコードだと他人が見た時にどう動くか分かりにくい**
fizzbuzzは有名すぎるので分かるけど、業務に落とし込んで考えるとコード量も増えるし
**数値が変わった時に応用が効かない**
fizzbuzzとして成立しているけど…

なるほどなるほど…
~~（本当は作ってもらったやつを元に説明したかったんですが、無くしてしまったので…）~~

というわけで最後に言われた記憶を元に、直していきます！断片的に思い出していくと…

・3とか5が何を示しているのか？
・あとからこの3とか5の数値を変えるのがこの状態だと煩わしい

みたいな感じだったはず…つまり変数（定数）宣言して、分かる名前にして…

こんな感じかな？
<img width="466" alt="Screen Shot 2020-01-29 at 20.24.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/ab4c8dc2-7b7a-75c6-2ae5-99ab69446cd5.png">
こうすれば上のconst部分を修正するだけで、出力や計算数値が変えれるはず。

##答え合わせ
ここで「fizzbuzz JS」で検索します([参考記事](https://qiita.com/solceansky/items/2500f26dac63c74a576b))。

あーなるほど。&&でかつを表現するのね。
最大公倍数の出し方調べてて、素因数分解とか連除法しかでてこなくて諦めてました；；

そして、else ifを使うのね…（自分のだとネスト深いし、というかインデント間違えてる気もするし）

![img](/mosaic-code.jpg)
↑最終的に修正した形です。記事では無駄な処理と書かれていましたが、直感的にはこちらの方が処理を理解されやすいと思っているので、この形で置いています。

##さいごに
いかがでしたでしょうか？
今回は自分のメモ書きがメインだったので、最後まで見て頂いた方はありがとうございましたToT
もしよろしければ感想などを聞かせて頂けると嬉しいです。
それではまた！

###補足
今回はnode.jsを使用しました。自分はたまたまnode.jsを環境構築していたので使用できましたが、初学者の方で「そもそもJSってどこに表記するの？」ってなる方もいらっしゃるかと思います（実際に自分が最初した時なりました）
JS自体はWeb上で動くものなので2つ方法があります。
1、node.jsを入れる　少ししんどいですが、後々を考えるならこちらがおすすめです
2、htmlと紐づけてクロームのデベロッパーツール→consoleで確認する
<img width="466" alt="Screen Shot 2020-01-29 at 20.36.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/93d58ccd-84d5-9484-a452-cd5794c3c5e8.png">

環境構築で躓いて途方に暮れるのは勿体無いので、最悪2でもいいのかなーとは思います。以上です。
[cv:issue_marketplace_engineer]

**こんにちは！ばーんです。**

今回は有名なfizzbuzzゲームをjavascriptでやっていきます。

#はじめに

今回はQiitaをメモ形式で使用してみます。
本当に考えた順序に、何を考えたか？記載しながら書き綴ります。
（僕のレベルはJSとjQueryをprogateでやった程度です＾＾）

ですので、対象は

**・初学者がどんなルートで考えているのか知りたい
・JSはprogate終わったところで正直不安…**

という方が対象となっていますのでご理解下さい。

※流石に多少の編集はしますが、基本は書き殴っていくだけです

##目標確認
一般的なルールはこちら
>1から100までの数をプリントするプログラムを書け。ただし3の倍数のときは数の代わりに｢Fizz｣と、5の倍数のときは｢Buzz｣とプリントし、3と5両方の倍数の場合には｢FizzBuzz｣とプリントすること。

基本的にどの言語でも表現できそうですが、今回はJSで書いていきます。
ここで、ルールから読み取る必要なものは、
###①1〜100まで表示するプログラム
###②3と5の倍数の場合はそれぞれfizz,buzzと表記させる
###③②より優先させて3かつ5の倍数の時はfizzbuzzを表記させる
ですかね。それでは行ってみましょー！
今回はfizzbuzzでは検索せずにその他の検索で解いていきます。

###①1〜100まで表示するプログラム
はい。これ何か見たことありますね…とりあえずそのまま検索してみます
「JS　1〜100まで表示」と…

あ、for文ね！やった気がする… [参考サイト](https://techacademy.jp/magazine/5481)

```js
for (var i = 0; i < 10; i++) {
document.write (i);
}
```

で、100まで表示なので、100に変える。でえぃっ

だとdocument.writeがよく分からん…表示でいいはずなのでお馴染みのconsole.logに変えると

おし！ただし99までなので、比較演算子か数値変えないと…でえいっ

<img width="531" alt="Screen Shot 2020-01-28 at 22.48.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/87c047e4-49cc-b5ae-9343-c68c59b30e1e.png">
いけましたね！（画面では切れてますが100まで表記されてます）

###②3と5の倍数の場合はfizz,buzzと表記させる
これは、恐らくif文ですね＾＾これぐらいであれば自分でもわかります（そんな気がする＾＾）

if文の作り方ってどうだったっけ…「JS　if」で検索と… [参考サイト](https://techplay.jp/column/469)

```js
if (条件式) {
    条件式が成り立った場合処理を実行
}else{
    条件式が成り立たなければ処理を実行
}
```

あーこんなんだった。これをいじってまずは3の時を出してみると…

```js
for (var i = 0; i < 101; i++) {
    if ( i=3) {
        console.log("fizz");
    } else {
        console.log(i);
    }
}
```

あれ。ちょっとまって全部fizzになってるwしかも処理終わってなくない？
あれ？esc押しても消えない。macが唸ってる。ふぁあああって唸ってる

焦る焦る。一旦VS（テキストエディタ）閉じます。心をしずめる。

他の例文を見ると…あー条件式がおかしいのね。演算子の問題か。
[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators)を見て、とりあえず動くものを作りたいから…
<img width="531" alt="Screen Shot 2020-01-29 at 17.28.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/eb03c5ea-4466-7d0e-441e-3a5b62c7c4ad.png">
いけた！あとはこれを3の倍数にしたらいいので。えーっと…「nの倍数」で調べるとなんか数学的なことが出てくる…
違う違う。「nの倍数　JS」で調べると、TOPに良さげな[サイト](https://note.com/strictlyes/n/na49084dbf944)が。

なるほど。3で割り切って0になれば3の倍数ね。確かに。

```js
for (var i = 0; i < 101; i++) {
    if ( i % 3 === 0) {
        console.log("fizz");
    } else {
        console.log(i);
    }
}
```

をいけたいけた。あとは5の条件も追加して…（この辺りはエクセルでIFの分岐にIF入れてた経験があったので理解が早かったです）
<img width="531" alt="Screen Shot 2020-01-29 at 17.40.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/fa408f99-078a-5d74-60c7-884b250f6ebc.png">

よし！おk！
※0が表示されてるせいで最初がfizzなので、i=1にここで変更します

###③②より優先させて3かつ5の倍数の時はfizzbuzzを表記させる
これはつまり、
・3かつ5の倍数を求める
・②より優先的に処理させる
が必要で、

####・3かつ5の倍数を求める
→数学やってて良かったぁ…最小公倍数分かればいいので、この場合は「15」でおkですね
ごめんなさい。なんかこれは感覚的に15だなって分かりました。

####・②より優先的に処理させる
→エクセルやってて良かったぁ…この場合最初の条件のチェックで15の倍数か？チェックすればいいので、「5」を追加した時と同じ容量でやればおk！（のはず）

これを組み合わせると…ドンっ！
<img width="466" alt="Screen Shot 2020-01-29 at 17.57.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/2d0787e3-578f-ad38-2b3d-72e909aa669d.png">
できた！勝った！第三部（完）！

##「ちょっと待って」
ここでメンターから神の啓示が。要約すると
「動いたものを作れたのはOKなんだけど、改善点がある」
といって作ってくれたコードと比較しながら説明してもらいました…

**今のコードだと他人が見た時にどう動くか分かりにくい**
fizzbuzzは有名すぎるので分かるけど、業務に落とし込んで考えるとコード量も増えるし
**数値が変わった時に応用が効かない**
fizzbuzzとして成立しているけど…

なるほどなるほど…
~~（本当は作ってもらったやつを元に説明したかったんですが、無くしてしまったので…）~~

というわけで最後に言われた記憶を元に、直していきます！断片的に思い出していくと…

・3とか5が何を示しているのか？
・あとからこの3とか5の数値を変えるのがこの状態だと煩わしい

みたいな感じだったはず…つまり変数（定数）宣言して、分かる名前にして…

こんな感じかな？
<img width="466" alt="Screen Shot 2020-01-29 at 20.24.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/ab4c8dc2-7b7a-75c6-2ae5-99ab69446cd5.png">
こうすれば上のconst部分を修正するだけで、出力や計算数値が変えれるはず。

##答え合わせ
ここで「fizzbuzz JS」で検索します([参考記事](https://qiita.com/solceansky/items/2500f26dac63c74a576b))。

あーなるほど。&&でかつを表現するのね。
最大公倍数の出し方調べてて、素因数分解とか連除法しかでてこなくて諦めてました；；

そして、else ifを使うのね…（自分のだとネスト深いし、というかインデント間違えてる気もするし）

```js
const fizzNumber = 3;
const buzzNumber = 5;
const fizz = "fizz";
const buzz = "buzz";
const fizzbuzz = fizz + buzz;

for (var i = 1; i < 101; i++) {
    if ( i % fizzNumber === 0 && i % buzzNumber === 0) {
        console.log(fizzbuzz);
    } else if ( i % fizzNumber === 0) {
        console.log(fizz);
    } else if ( i % buzzNumber === 0) {
        console.log(buzz);
    } else {
        console.log(i);
        }
    }
```
↑最終的に修正した形です。記事では無駄な処理と書かれていましたが、直感的にはこちらの方が処理を理解されやすいと思っているので、この形で置いています。

##さいごに
いかがでしたでしょうか？
今回は自分のメモ書きがメインだったので、最後まで見て頂いた方はありがとうございましたToT
もしよろしければ感想などを聞かせて頂けると嬉しいです。
それではまた！

###補足
今回はnode.jsを使用しました。自分はたまたまnode.jsを環境構築していたので使用できましたが、初学者の方で「そもそもJSってどこに表記するの？」ってなる方もいらっしゃるかと思います（実際に自分が最初した時なりました）
JS自体はWeb上で動くものなので2つ方法があります。
1、node.jsを入れる　少ししんどいですが、後々を考えるならこちらがおすすめです
2、htmlと紐づけてクロームのデベロッパーツール→consoleで確認する
<img width="466" alt="Screen Shot 2020-01-29 at 20.36.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/93d58ccd-84d5-9484-a452-cd5794c3c5e8.png">

環境構築で躓いて途方に暮れるのは勿体無いので、最悪2でもいいのかなーとは思います。以上です。
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

続きを読むには単価診断を受けてください 30秒