JavaScfiptでワンライナーFizzBuzz

概要

たまたまFizzBuzzのJavaScriptワンライナーを即興で書く機会があったので、その時に書いたコードについてまとめました。
最短で書く方法を期待してこのページを開いた方は 補足 をご覧ください。

140byte版

こちらが実際に書いたコードです。
※書く時に JavaScript で範囲オブジェクト的なものを扱うには？ということを考えていたのでforを使わず、かつ処理速度の観点から console.log の呼び出し回数を 1 回にしています。

fizzbuzz.js

let num = 100; // FizzBuzz数
console.log(Object.keys(Array(num).fill()).map(i=>Number(i)+1).map(i=>i%3==0&&i%5==0?"Fizz Buzz":i%3==0?"Fizz":i%5==0?"Buzz":i).join("\n")) // 140byte

JavaScript では Range オブジェクトが使えないので（2020年1月現在）
Object.keys に Array(x).fill を与えて num 数分の配列を生成しています。

上記のワンライナーを分解して順番に解説すると

Array(num).fill() // [undefined, undefined, undefined, ...] num の数だけ続く

※ Array(num) に対して .fill() を呼ばないと、結果が [empty x num] となり .map() できません

Object.keys(Array(num).fill()) // ["0", "1", "2", ...]

num 数分の配列を生成したため、そこから.keys()（添え字）を抽出しています。注意すべきポイントとして、配列の添え字ですので 0 オリジン、かつ文字列型となっています。

Object.keys(Array(num).fill()).map(i=>Number(i)+1) // [1, 2, 3, ...]

0 オリジン、かつ文字列型の配列から、FizzBuzzで扱われる 1 から N までの整数を得るため、mapで整数型に変換（かつ 0 オリジンだった添え字を1ずつインクリメント）しています。

ES2015 以降なら配列のスプレッド構文が使えますので

[Array(num+1).keys()].slice(1, num+1)

でより簡潔に書けますね。

なお、上記の 1 から num をぐるぐる処理したい、というのは python であれば

for i in range (1, num)

ruby なら

1..num do

と書けるところです。

JavaScript に話を戻しますが 1 から num の配列が得られたら、あとは

i%3 == 0 && i%5 == 0 ? "Fizz Buzz" : // 3 の 倍数かつ 5 の倍数 なら "Fizz Buzz"
i%3 == 0 ? "Fizz" : // 3 の 倍数なら "Fizz"
i%5 == 0 ? "Buzz" : // 5 の 倍数なら "Buzz"
i // いずれでもなければ数値そのまま

を .map() で返し、join("\n") で連結すれば完成です。

107byte版

ここからさらに、"Fizz" と "Buzz" をつなげてよい、かつ配列スプレッド構文も用いれば

let num = 100; // FizzBuzz数
console.log([...Array(num+1).keys()].slice(1,num+1).map(i=>(i%3?'':'Fizz')+(i%5?'':'Buzz')||i).join("\n")) // 107byte

と書けます。

三項演算子の条件が逆転している（3の倍数なら～ではなく、3の倍数以外なら～で評価している）、FizzBuzz部が空文字だった際にショートサーキットを利用して数値を出す、などさらにトリッキーなコードとなっており、自らもミスタイプなしですらすらかけるコードではないので、冒頭のコードと解説には実際に即興で書いたものを用いました。

補足

コメント欄でも頂きましたが、FizzBuzz は基本的に for 文で書くほうが記述がスッキリします。
（ご指摘ありがとうございます）。

@fujitanozomu さんがコメントしてくれたコード

let num = 100; // FizzBuzz数
for(i=0;i++<num;)console.log((i%3?'':'Fizz')+(i%5?'':'Buzz')||i)

さらに、最短で書く方法を期待してこのページを開いた方は
@nb_tomo さんの下記 Qiita 記事が大変参考になります。
FizzBuzz問題のJavaScript最短コードを解説します