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

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

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