Zenn
Open3

学生エンジニアがTypeScriptを学ぶためにブルーベリー本を購入した話

JavaScript
TypeScript
naokinaoki

1章を終えて

導入、おもしろくてワクワクしながら読み進めていました。
静的型付け言語についての説明があったり、
JavaScriptとTypeScriptの歴史があったり...

感想としては、
この本で学べる概要を軽く説明することで、
「はやくその章まで行きたい！勉強したい。」といった感情を
抱かせていただくような１章でした。

naokinaoki

2章を終えて

JavaScript.infoを事前に、軽く触れていたので
2章の内容については、知っていることばかりで出来るだけ深く読まずに、
軽く読ませていただきました。

最後のFizzBuzz問題について、いろいろな解法を学んだので
そちらのアウトプットをしてみます。
また、最近AtCoderを始めたのもあってか、
処理速度を気になり始めているので、処理速度を目安として記述しておきます。
（試行回数が少ないため、誤差ですが...）

最初に解いた案

0.56s

function generateFizzBuzz() {
  for (let i = 1; i <= 100; i++) {
    if (i % 3 === 0) {
      if (i % 5 === 0) {
        // 3かつ5の倍数
        console.log("FizzBuzz");
      } else {
        // 3であり、5ではない
        console.log("Fizz");
      }
    } else if (i % 5 === 0) {
      // 3でなく、5である
      console.log("Buzz");
    } else {
      console.log(i);
    }
  }
}

私が書いたものをCopilotに可読性向上をしてもらったもの

0.52s

function generateCopilotFizzBuzz() {
  for (let i = 1; i <= 100; i++) {
    let output = "";

    // 3の倍数の場合、出力に'Fizz'を追加
    if (i % 3 === 0) {
      output += "Fizz";
    }

    // 5の倍数の場合、出力に'Buzz'を追加
    if (i % 5 === 0) {
      output += "Buzz";
    }

    // 数値が3または5の倍数でない場合、その数値を出力
    if (output === "") {
      output = i.toString();
    }

    console.log(output);
  }
}

if文で統一することによって、非常にコードが見やすいです。

私「ねぇねぇ、Copilotくん。最適な解法を教えて！」

0.52s

function generateOptimizedFizzBuzz() {
  for (let i = 1; i <= 100; i++) {
    // 15の倍数の場合、出力は'FizzBuzz'
    if (i % 15 === 0) {
      console.log("FizzBuzz");
    }
    // 3の倍数の場合、出力は'Fizz'
    else if (i % 3 === 0) {
      console.log("Fizz");
    }
    // 5の倍数の場合、出力は'Buzz'
    else if (i % 5 === 0) {
      console.log("Buzz");
    }
    // 数値が3または5の倍数でない場合、その数値を出力
    else {
      console.log(i);
    }
  }
}

3と5の倍数ということは、つまり3と5の最小公倍数である15を判定すれば良いという判断ですね。
さすがです。

私「オブジェクトを使って、書いてみてよ！」

0.51s

function generateObjectFizzBuzz() {
  // 出力を格納するオブジェクトを作成
  const fizzBuzzMap: { [key: number]: string } = {};

  // 1から100までの各数値に対応する出力を計算
  for (let i = 1; i <= 100; i++) {
    let output = "";

    if (i % 3 === 0) {
      output += "Fizz";
    }

    if (i % 5 === 0) {
      output += "Buzz";
    }

    if (output === "") {
      output = i.toString();
    }

    // 計算した出力をオブジェクトに格納
    fizzBuzzMap[i] = output;
  }

  // オブジェクトから出力を取得して表示
  for (let i = 1; i <= 100; i++) {
    console.log(fizzBuzzMap[i]);
  }
}

一推しです。
オブジェクトだいすき