初めての投稿は、最近やってみたFizzBuzzについて書きたいと思います。
qiitaが初めて＋昨日.mdについて知ったので見苦しいかもしれませんが、頑張って書きたいと思います！
1.FizzBuzzについて
よくJSの勉強を始めて、まずProgate→ドットインストールだったりUdemyをお勧めするサイトが多いともう。
それでそのサイトのロードマップ通りにやると「あれ？これ本当に自分ちゃんと学べてる？いや、何に使うかわかんないし、何ができるんw」ってぶち当たった。
そこでメンターに相談したら「FizzBuzzやるといいよ！」って言われて調べたら...
- 1〜100までの数字を表示させる
- 3の倍数の数だったらFizzと表示させる
- 5の倍数の数だったらBuzzと表示させる
- 3と5の倍数はFizzBuzzと表示させる
- それ以外の数字はそのまま表示
プログラミング界隈ではめちゃくちゃメジャーな遊びらしい...(知らなかった）
2.FizzBuzzで何が分かるか
まず、ある程度Progateやってたらfor文とかif文が出てくる。
まーたこれがややこしくて、めちゃ苦戦した部分でも...。
このforとかifの理解をちゃんと出来てるか？とかちゃんと使えてる？ってことを知るためのものでもあるらしい。
#3.FizzBuzzの解き方
色々な解き方があるらしいけど、自分が書けたのはこれでした。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>FizzBuzz</title>
</head>
<body>
<script>
// 1〜100までの数字出してみる
for(var i = 1; i <= 100; i++) {
// 3と5の倍数はフィズバス
if(i % 3 == 0 && i % 5 == 0)
console.log("FizzBuzz");
// 3の倍数はフィズ
else if (i % 3 == 0)
console.log("Fizz");
// 5の倍数はバズってる
else if (i % 5 == 0)
console.log("Buzz");
// 3と5の倍数以外はそのまんま数字表示
else
console.log(i);
}
</script>
</body>
</html>
まず、どう解いたらいいのか全く分からないまま1時間ぐらい固まってました。
とりあえず一個ずつ分けてみて考えることにしたら、これ正解です！（あくまで自分の場合は）
1. 1〜100までの数字をとりあえず表示させてみる
// 1〜100までの数字出してみる
for(var i = 1; i <= 100; i++) {}
for文を使ってとりあえず1〜100までconsoleに表示させてみます。
ここまではまあまあわりかしProgateでもよくある構文だからなんとなくでも書けちゃいました。
それじゃあ、次！
2. 3の倍数でFizzを表示
// 3の倍数はフィズ
else if (i % 3 == 0)
console.log("Fizz");
後々知ったけど、=の数は3つで良かったそうです。
3の倍数に関してはメッッッッチャ頭使った%を使用すれば倍数の表示が出来ることに気づきました！
最初&とか使ってたのはいい思い出...
if文を使って3の倍数を出せたら、あとはもう割と楽になります！
3. 5の倍数をBuzz表示
// 3と5の倍数はフィズバス
if(i % 3 == 0 && i % 5 == 0)
console.log("FizzBuzz");
もうここは言うまでもなく、3と5の倍数を合わせただけなので論理積 (&&)で繋げただけになります。
ただ、一人でやってみてここまでかかった時間5時間。
半分心が折れかける始末...。
でも！もうちょっとで終わりそうな予感がしたので頑張りました！！！
4. 3と5の倍数以外はそのままの数字の表示に
// 3と5の倍数以外はそのまんま数字表示
else
console.log(i);
これ実際いるか要らないか悩んだ結果、なかった時がうまく表示されなかったのでつけてみました。
#4.まとめ
実際にやってみてアウトプットにはいい感じの勉強になりました。
本当はHTML/CSSでフォームを使って「数字を入力したらFizz・Buzz・FizzBuzzの表示をさせる」というのをやりたかったけど、全然出来ませんでした。
今度またその表示が出来るようになったらまとめたいと思います。
私の主人が某スクールでFizzBuzzを前にやったそうですが、PC壊れかけたらしいので、もしFizzBuzzに挑戦する方はお気をつけください！