AIでがんがん書く時代の「きれいなコード」の守り方 — ESLint+SonarJS / jscpd / knip をCIに置く

AI時代の新たなボトルネックにようこそ
なぜAIコードは「汚い」のか？〜お手伝いさんの雑な調理と一緒ですわ〜
解決策：CI/CDでコードをメンテナンスする驕り高き術
貴方も今日から実践できる3つのこと
おわりに：わたくしと共に美しいコードを紡ぎましょう

AI時代の新たなボトルネックにようこそ

clean code setup — Photo by Alvin Vergara on Unsplash

かつてプログラミングの最大の悩みは「書く速度」でしたわ。しかし、Claude CodeやCodexのようなAIが現れてからは、事情が変わってきていますの。AIはいくらでもコードを生成してくれるけれど、それを「きれいなまま保つ」ことが新たな難題に。まるで優秀な料理人が一気にたくさんの料理を作ってくれるのに、後片付けを怠るとキッチンが大惨事になるようなものですわね。

わたくし自身、このラズパイ荘4畳半の貧弱な環境でAIにコードを書かせようとしたことがあるのです。ところが、あっという間にメモリ不足でOOM Killerが降臨し、ラズパイが無言で再起動。AIが吐き出すコードは時に200行超えの関数や any 型だらけで、まさにリソースの暴力。これは貴方のビジネスソフトウェアでも同じことが起こり得ますの。

本日は、そんなAI時代の「コードの腐敗」を防ぎ、タイパ良く開発を進めるためのお上品な戦略をお伝えしますわ。後片付けを怠るとどうなるか、そしてそれをどう自動化するか、しっかり学んでくださいまし。

\n\n

なぜAIコードは「汚い」のか？〜お手伝いさんの雑な調理と一緒ですわ〜

AIはその場の文脈だけで「それっぽく動くコード」を出します。悪気はなくても、以下のようなアンチパターンが頻発。貴方も見覚えがあるのではなくて？

巨大関数の呪い：1つの関数に処理を全部詰め込んで、気づけば200行超え。まるで鍋にすべての食材を放り込んだ闇鍋ですわ。

型の迷宮：型が面倒になると any で流し、変数名が md や e と暗号のよう。これでは後で読む人が迷子になりますの。

重複の悪夢：既存の truncate() 関数を知らずに新たに定義するので、同じ機能が6つも存在（実話ですわよ）。スパゲッティの量産です。

参考元のZenn記事でも指摘されている通り、これらはAIが「動けばいい」というスタンスで書くから起こります。わたくしのラズパイは any 型の甘えを見逃さず、即座にメモリを食い潰されましたわ…。

\n\n

解決策：CI/CDでコードをメンテナンスする驕り高き術

貴方の仕事のタイパを守るには、コードの品質チェックを自動化するのが鉄則。これを「CI/CDパイプライン」と呼びますが、難しく考える必要はありません。要は、料理が出来上がったら自動で味見と盛り付けチェックをする仕組みですの。

以下の図は、AIが生成したコードに対し、CIで品質を保つフローですわ：

\ngraph TD\n    A[\"開発者がAIにコード生成を依頼\"] --> B[\"AIが即座にコードを出力\"]\n    B --> C[\"コードレビュー & Lintチェック\"]\n    C --> D{\"品質基準クリア？\"}\n    D -->|\"Yes\"| E[\"マージしてリリース\"]\n    D -->|\"No\"| F[\"修正指示をAIに戻す\"]\n    F --> B\n

具体的には、ESLint（エスリント）やPrettier（プリティア）といった無料ツールをプロジェクトに組み込むだけで、自動的にコードのスタイルや潜在バグを検出できます。これらをGitHub Actionsなどで動かせば、プッシュするたびにチェックが走り、汚いコードは即お断り。まるで貴方の執事が常に見張っていてくれるようなものでしてよ。

面倒に感じるかもしれませんが、初期設定は一度だけ。後はAIが吐き出すコードを自動で躾けるので、貴方の手間は激減しますわ。残業を減らしたいなら、ここに投資しない手はありませんの。

\n\n