FizzBuzzゲームとは、二人以上のプレイヤーが1から順番に数字を発言し、3で割り切れるときは「Fizz」と答え、5で割り切れるときは「Buzz」と答える。両方割り切れる時は「FizzBuzz」と答え、間違えた人から脱落していくというゲームです。
問題
1から100までを表示させる。ただし、3の倍数では「Fizz」と表示させる。5の倍数では「Buzz」と表示させる。3と5の倍数では「FizzBuzz」と表示させること。
表示させる箇所はコンソールログ内とする。
目的
コンソールログ内に次のような表示をさせること。
小さいところから組み立てていこう！
まずは、結果を表示させます。
<script>
function fizzbuzz() {
console.log(1);
}
fizzbuzz();
</script>
→ログ内に数字の1が表示されます。
次に1から100までを表示します。ここではfor文を使っていきます。
<script>
function fizzbuzz() {
for(i=1: i<=100; i++) {
console.log(i);
}
}
fizzbuzz();
</script>
for文の中身を解説します。
i=1で1からスタートすると宣言する。
i<=100で100までと、最終的な数字を決める。
i++で、iが100になるまで1ずつ増やしていく。
次に数字で表示させるところ、FizzBuzzなどの文字に置き換えるところをどう分けるかを考える。
数字（すでに出力できている）
Fizz
Buzz
FizzBuzz
→これらが使われる。
条件分岐はif文を使っていきます。
まずは、Fizzを表示させてみましょう！
<script>
function fizzbuzz(){
for(i=1; i<=100; i++){
if(i%3 === 0){
console.log('Fizz');
}else{
console.log(i);
}
}
}
fizzbuzz();
</script>
i%3 === 0で余りが0かを調べています。
次に、Buzzを表示させてみましょう！
<script>
function fizzbuzz(){
for(i=1; i<=100; i++){
if(i%3 === 0){
console.log('Fizz');
}else if(i%5 === 0){
console.log('Buzz');
}else{
console.log(i);
}
}
}
fizzbuzz();
</script>
else ifをつかうことで、3の倍数でなかったときは〜の処理を書くことができます。i%5 === 0で余りが0かを調べています。
次に、FizzBuzzを表示させてみましょう！
ここから少し難しいですが、頑張りましょう！
今回は2つのやり方を解説します。
1つ目
まず、3と5の倍数ということなので最小公倍数を使う方法があります。3の倍数は「3,6,9,12,15」、5の倍数は「5,10,15」です。
3の倍数と5の倍数で共通している数で一番小さい数は15です。
それでは、コードに追加していきます。
<script>
function fizzbuzz(){
for(i=1; i<=100; i++){
if(i%15 === 0){
console.log('FizzBuzz');
}else if(i%3 === 0){
console.log('Fizz');
}else if(i%5 === 0){
console.log('Buzz');
}else{
console.log(i);
}
}
}
fizzbuzz();
</script>
書き方は今までと同じですが、一つ重要なポイントがあります。
それは、書く順番が変わっていることです。
<script>
function fizzbuzz(){
for(i=1; i<=100; i++){
if(i%3 === 0){
console.log('Fizz');
}else if(i%5 === 0){
console.log('Buzz');
}else if(i%15 === 0){
console.log('FizzBuzz');
}else{
console.log(i);
}
}
}
fizzbuzz();
</script>
このようにFizzBuzzを求めるif文を一番下に書いてしまうと、FizzBuzzとは表示されません。Fizzと表示されてしまいます。理由は、FizzBuzzの分岐に到達する前に条件を満たしてしまっており、下の処理まで行われないからです。なので、書く順番には注意する必要があります。
2つ目
こちらは最小公倍数を使わない方法です。
文字に置き換わる条件は次のようになります。
- 3の倍数の時
- 5の倍数の時
- 3と5の倍数の時
違う言い方をすると次のようになります。
- 3の倍数だけれど、5の倍数ではない時
- 3の倍数ではないけれど、5の倍数である時
- 3と5の倍数の時
それでは書いてみます！
<script>
function fizzbuzz(){
for(i=1; i<=100; i++){
if(i%3 === 0 && i%5 !== 0){
console.log('Fizz');
}else if(i%3 !== 0 && i%5 === 0){
console.log('Buzz');
}else if(i%3 === 0 && i%5 === 0){
console.log('FizzBuzz');
}else{
console.log(i);
}
}
}
fizzbuzz();
</script>
完成です。こちらの長所はFizzBuzzを求めるif文が下になっても大丈夫だということです。
--
コンソールログに文字や数字を表示させる
1から100まで繰り返す命令を書く
3の倍数をFizzに置き換える
5の倍数をBuzzに置き換える
3と5の倍数をFizzBuzzに置き換える
このように一つずつ細かくすることで、一つ一つを簡単にすることができました。
今回は以上になります。最後まで読んでいただきありがとうございました！