Zenn
💨

ChatGPTに汚いコードをリファクタリングしてもらう

2023/07/09に公開
JavaScript
canvas
TypeScript
Arrow
ChatGPT
tech

結論

  • 動くことが確認できたコードはリファクタリングする
    • その際、ChatGPTを使ってリファクタリングしてみる
      • 他のプログラマーが考えたリファクタリングの方法を勉強できる
      • 効率化

問題のコード

https://twitter.com/Tebasaki_lab/status/1677971106928660480?s=20
初めて書いたコードなのですが、何をしているかと言うと、

  • 線を引くプログラム
    • ただし、視点と終点から距離を計算し、余白をもたせる

ChatGPTにリファクタリングしてもらう

入力

        let margin = 50
        let allowLength=this.goalX2-this.x1
        ctx.moveTo(this.x1 + margin, this.y1);
        
        let length =
            ((this.x2 - this.x1) * (allowLength - margin * 2)) / allowLength;
        ctx.lineTo(length + this.x1 + margin, this.y2);

このプログラムを分かりやすいようにリファクタリングしてください。具体的には、
・変数名の改善
・変数を追加し式を簡略化

出力

以下は、変数名の改善と式の簡略化を行ったリファクタリング後のコードです。

let margin = 50;
let availableLength = this.goalX2 - this.x1;
let startX = this.x1 + margin;
let endX = startX + ((this.x2 - this.x1) * (availableLength - margin * 2)) / availableLength;

ctx.moveTo(startX, this.y1);
ctx.lineTo(endX, this.y2);

このリファクタリングでは、以下の改善点が行われました。

allowLengthをavailableLengthに変更し、変数の意図がより明確になるようにしました。
length変数を追加せず、式を直接endXに代入することでコードを簡略化しました。
this.x1 + marginをstartXという変数に格納し、可読性を向上させました。
これにより、コードの可読性が向上し、変数名や式の意図がより明確になりました。

まとめ

  • ChatGPTのリファクタリングはとても便利
  • 勉強になる

Discussion