JavaScriptでFizzBuzz

以前Rubyで記述したコード

Fizzbuzz

def fizz_buzz
  num = 1
  while (num <= 100) do
    if num % 15 == 0
      puts "FizzBuzz"
    elsif (num % 3) == 0
      puts "Fizz"
    elsif (num % 5) == 0
      puts "Buzz"
    else
      puts num
    end
    num = num + 1
  end
end

fizz_buzz

FizzBuzz問題の解説
fizz_buzz問題で使用された表現

今回は上記のRubyで取り組んだ過去のコードを参考にして
JavaScriptでFizzbuzz問題にトライしてみた

JavaScriptで記述したコード

以下が作成したコード

Fizzbuzz

for( let i = 1; i <= 100; i ++ ) {  // for文を採用
// (初期値; 繰り返しの条件式; 処理の後にされる式)

  if( i % 15 === 0 ) { // iを15で割り切る事が出来る数字の時
    console.log("FizzBuzz"); // 第1条件の出力結果

  } else if ( i % 5 === 0 ) { // iを5で割り切る事が出来る数字の時
    console.log("Buzz"); // 第2条件の出力結果

  } else if ( i % 3 === 0 ) { // iを3で割り切る事が出来る数字の時
    console.log("Fizz"); // 第3条件の出力結果

  } else { // 上記のどれともマッチしなかった時の処理
    console.log( i ); // その他の出力結果
  }
}

デベロッパーツールで確認

上記のコードをhtmlファイルの<script></script>内に記述して
ブラウザにドラッグアンドドロップ

⌘ + ⌥ + Jこのコマンドでデベロッパーツールを確認すると
以下のように出力されている

デベロッパーツール

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
・
・・
・・・

1〜100までの数字が順番に出力

「3の倍数」のときは数字の代わりに文字列でFizz
「5の倍数」のときも同様にBuzz

3と5の倍数である「15の倍数」のときはFizzBuzzと出力

補足

他にも書き方がありそうだと思って

JavaScript　FizzBuzz

と調べるとなんとまさかの一行で完成させる方法もあるそうです。
今の私には読み進めても全く解らなかったです。残念…