JavaScriptで初めて「動くもの」を作ってみたら、楽しかった話

2025-04-242025-04-25

最近、ProgateでJavaScriptの勉強を始めました。
仕事ではちょこちょこプログラミングに触れる機会はあるものの、「フロントエンドで自分が書いたコードがブラウザ上で動く」っていう体験は、今回がほぼ初めて。

その第一歩として取り組んだのが、プログラミング学習の定番問題「FizzBuzz」です。

FizzBuzzってなに？

1から100までの数字を順番に出力していく中で、

3の倍数のときは「Fizz」
5の倍数のときは「Buzz」
両方の倍数のときは「FizzBuzz」

と表示させるという、シンプルながら学びが詰まった課題です。

まずはforループで王道実装！

for (let i = 1; i <= 100; i++) {
  if (i % 15 === 0) {
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

このコードを打ち込んで、実際に結果がターミナルやブラウザのコンソールに出てきたときの嬉しさといったら…！

私の書いたコード、ちゃんと動いてる…！

とちょっと感動しちゃいました。

他の書き方も試してみた

`Array.from()` + `.map()` を使った書き方

Array.from({ length: 100 }, (_, i) => i + 1).map(i => {
  if (i % 15 === 0) console.log("FizzBuzz");
  else if (i % 3 === 0) console.log("Fizz");
  else if (i % 5 === 0) console.log("Buzz");
  else console.log(i);
});

「配列からforを抜け出してみる」ってだけで、ちょっとJavaScript感が増した気がします（笑）

再帰で実装してみた

function fizzBuzz(n) {
  if (n > 100) return;
  if (n % 15 === 0) console.log("FizzBuzz");
  else if (n % 3 === 0) console.log("Fizz");
  else if (n % 5 === 0) console.log("Buzz");
  else console.log(n);
  fizzBuzz(n + 1);
}
fizzBuzz(1);

これは完全に遊び心。実用性は置いておいて、「こんな書き方もできるんだ～」という発見になりました。