作成日:

ウェブサイトのリファクタリングが完了しました

VSCode に CSS (SCSS) をリファクタリングしてください。とリクエストしてゴチャゴチャなツギハギで出来た CSS を綺麗にリファクタリングしてもらいました。

リファクタリングとは?

@ リファクタリングとは?
リファクタリングとは、プログラムの動作や機能を変えることなく、内部のソースコードを整理して読みやすく書き直す作業のことです。

主な目的は、コードの理解を助け、保守性や拡張性を高めることにあります。新しい機能を追加したりバグを修正したりするのではなく、将来の作業をスムーズにするために、複雑なコードをシンプルに整える掃除のような役割を果たします。
こちらの要約は Google by Gemini によって作られました

いわゆる使いやすくするための整理整頓ですね。リファクタリングを通じて、コードの品質を向上させることができます。おおよそ 1800 行くらいの CSS コードが 1100 行くらいに減りました!

たまに AI でも変なリファクタリングすることはある。

今回は VSCode に model/gemini-2.5-pro-exp-03-25 を紐つけてリファクタリングしてもらいましたが、まとめ過ぎてしまって多少手動で修正する必要もありました。しかしこれを一人で入れ替えたり削除したりするのは大変だし、こういうのは AI にやってもらうのが一番ですね。

もしもリファクタリングを頼むには?

VSCode にリファクタリングを頼むには、このような言葉を呟くといいかもしれません。

CSS を読んで、まとめられるところをまとめて頂けるとありがたいです

→ 今回、私がお願いした言葉ですね!

CSS をリファクタリングしてください!

→ もしかしたらこっちのほうが AI 的には分かりやすいかもしれません。

文明の利器には勝てない

CSS とか、割とツギハギコードになりやすい分類なのでどんどんとコードが伸びやすいのですよね。スパゲッティしたコードって、一つの要素を修正するだけでも他の要素に影響を与えてしまうので、編集しずらくなってしまいます。ただ、AI に頼むだけで一瞬で認識してくれるのは、やはり人間にはできないことですね。

素晴らしいと思います。