Help us understand the problem. What is going on with this article?

JavaScriptでFizzBuzzを解いてみる

FizzBuzzゲームとは、二人以上のプレイヤーが1から順番に数字を発言し、3で割り切れるときは「Fizz」と答え、5で割り切れるときは「Buzz」と答える。両方割り切れる時は「FizzBuzz」と答え、間違えた人から脱落していくというゲームです。

問題

1から100までを表示させる。ただし、3の倍数では「Fizz」と表示させる。5の倍数では「Buzz」と表示させる。3と5の倍数では「FizzBuzz」と表示させること。
表示させる箇所はコンソールログ内とする。

目的

コンソールログ内に次のような表示をさせること。
スクリーンショット 2020-10-22 午後2.51.32.png

小さいところから組み立てていこう!

まずは、結果を表示させます。

index.html
<script>
   function fizzbuzz() {
        console.log(1);
   }
   fizzbuzz();
</script>

→ログ内に数字の1が表示されます。

次に1から100までを表示します。ここではfor文を使っていきます。

index.html
<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を表示させてみましょう!

index.html
<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を表示させてみましょう!

index.html
<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です。

それでは、コードに追加していきます。

index.html
<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>

書き方は今までと同じですが、一つ重要なポイントがあります。
それは、書く順番が変わっていることです。

index.html
<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つ目

こちらは最小公倍数を使わない方法です。
文字に置き換わる条件は次のようになります。

  1. 3の倍数の時
  2. 5の倍数の時
  3. 3と5の倍数の時

違う言い方をすると次のようになります。

  1. 3の倍数だけれど、5の倍数ではない時
  2. 3の倍数ではないけれど、5の倍数である時
  3. 3と5の倍数の時

それでは書いてみます!

index.html
<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に置き換える

このように一つずつ細かくすることで、一つ一つを簡単にすることができました。

今回は以上になります。最後まで読んでいただきありがとうございました!

Taisei-rgb
TechCamp84期 - Engineer / フロントエンドの技術をメインにアウトプットします。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away