JavaScript で Fizz Buzz

ルール

関数 FizzBuzz を作成する。
表示は alert 関数を用いる。
引数は 数値型 の値を 1つ とる。
1 からその引数の値まで、次のようなルールで表示する。
3 で割り切れるなら Fizz
5 で割り切れるなら Buzz
どちらでも割り切れるなら FizzBuzz
その他の場合 その数
実引数に変な値が渡されても、気にしない。

つまり、こうなれば良い。
FizzBuzz(15) の結果
alert(1);
alert(2);
alert('Fizz');
alert('4');
alert('Buzz');
alert('Fizz');
alert(7);
alert(8);
alert('Fizz');
alert('Buzz');
alert(11);
alert('Fizz');
alert(13);
alert(14);
alert('FizzBuzz');

では実際にコードを書いていきます

まずは、分かりやすさ重視！

function FizzBuzz (qiita) { // 引数名が思いつかなかったので
 var i;
 for (i = 1; i <= qiita; i++) {
  if (i % 3 == 0 && i % 5 == 0) {
   alert('FizzBuzz');
  } else if (i % 3 == 0) {
   alert('Fizz');
  } else if (i % 5 == 0) {
   alert('Buzz');
  } else {
   alert(i);
  }
 }
}

さて、無駄なことをしているのにお気づきでしょうか
5 の倍数のときには、i % 3, i % 5 の演算を 2 回ずつしています。
これを改善しましょう。

無駄な処理の改善

function FizzBuzz (qiita) {
 var i;
 for (i = 1; i <= qiita; i++) {
  if (i % 3 == 0) {
   if (i % 5 == 0) {
    alert('FizzBuzz');
   } else {
    alert('Fizz');
   }
  } else if (i % 5 == 0) {
   if (i % 3 == 0) {
    alert('FizzBuzz');
   } else {
    alert('Buzz');
   }
  } else {
   alert(i);
  }
 }
}

これで、無駄な処理がなくなりました。
がしかし、今度は長ったらしく、ちょっとウザいですね！
こんなときは、三項演算子の活躍です。

三項演算子の活躍

function FizzBuzz (qiita) {
 var i;
 for (i = 1; i <= qiita; i++) {
  alert(i % 3 == 0 ? (i % 5 == 0 ? 'FizzBuzz' : 'Fizz') : (i % 5 == 0 ? 'Buzz' : i));
 }
}

やっと短くなりました。
さて、もっと短くできそうではありませんか。
'Fizz' + 'Buzz' は FizzBuzz ですから、これを利用しない手はありません！
ここからは、少し技巧的かもしれません。
数字をそのまま表示、の場合は、'' + '' となって、false に評価されます。
'' || i の結果で、i になります。

やや技巧的なコード

function FizzBuzz (qiita) {
 var i;
 for (i = 1; i <= qiita; i++) {
  alert((i % 3 == 0 ? 'Fizz' : '') + (i % 5 == 0 ? 'Buzz' : '') || i);
 }
}

ここまで書ければ、十分です。
皆さんも是非、個性ある FizzBuzz のコードを書いてみてください。