【初学者実践録】Fizzbuzzゲームについて

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

今回は有名な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文ね！やった気がする… 参考サイト

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

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

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

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

いけましたね！（画面では切れてますが100まで表記されてます）

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

if文の作り方ってどうだったっけ…「JS　if」で検索と… 参考サイト

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

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

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

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

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

他の例文を見ると…あー条件式がおかしいのね。演算子の問題か。
MDNを見て、とりあえず動くものを作りたいから…

いけた！あとはこれを3の倍数にしたらいいので。えーっと…「nの倍数」で調べるとなんか数学的なことが出てくる…
違う違う。「nの倍数　JS」で調べると、TOPに良さげなサイトが。

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

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

をいけたいけた。あとは5の条件も追加して…（この辺りはエクセルでIFの分岐にIF入れてた経験があったので理解が早かったです）

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

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

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

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

これを組み合わせると…ドンっ！

できた！勝った！第三部（完）！

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

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

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

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

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

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

こんな感じかな？

こうすれば上のconst部分を修正するだけで、出力や計算数値が変えれるはず。

##答え合わせ
ここで「fizzbuzz JS」で検索します(参考記事)。

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

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

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で確認する

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