Edited at

JavaScript で Fizz Buzz

More than 5 years have passed since last update.


ルール

関数 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 のコードを書いてみてください。