30
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScript で Fizz Buzz

Last updated at Posted at 2014-03-15

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

30
29
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?