作成日:

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

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 に頼むだけで一瞬で認識してくれるのは、やはり人間にはできないことですね。

素晴らしいと思います。