「静的解析ツール × GitHub Copilot」で300件のエラーを修正してみた

n-ozawan

皆さん、こんにちは。尝笔开発グループの苍-辞锄补飞补苍です。
马の视野角は350度もあり、真后ろの10度は死角になっています。また、马は非常に忆病な性格をしていますので、死角に回り込むと防卫本能により后脚を强く蹴り上げます。

本题です。
生成AIによるコード生成は、これまで時間をかけて実装していたコードを、瞬時に生成することができます。生成AIの生産性があれば、これまで時間が足りず諦めていたことにも取り組めるようになります。今回は静的解析ツールの导入の壁を、GitHub Copilotで超えたいと思います。

静的解析ツール

静的解析ツールの导入

コードが规约通りに実装されているのか、もしくは、不具合になる実装をしていないか等を机械的にチェックする仕组みとして静的解析ツールがあります。静的解析ツールを导入することにより、规约に反するコードは自动的に弾かれ、常に高品质なコードを维持することができ、レビューアの负担が軽减されます。

しかし、多くのプロジェクトでは静的解析ツールを导入しておらず、その多くが人の目によるレビューによりチェックしています。もちろん、人によるレビューには限界があるため、规约に反するコードや潜在的な不具合が见逃され、気付けば低品质なコードがそのままリリースされてしまいます。

その問題に気付いたプロジェクトは静的解析ツールの导入を試みますが、いざ静的解析ツールを実行すると数百件(規模によっては数千件)のエラーが報告されます。これを1つ1つ確認しながら修正するのは困難です。しかし、生成AIがあればどうでしょうか?一瞬で解消してくれる期待感はあります。

静的解析ツールの导入

現在、当社ではプロジェクト計画書のWeb化を進めており、その画面のモックアップを作成しています。モックアップはAstroを使って作成しており、GitHub Copilotで実装しています。ステップ数は8000程度です。これまで静的解析ツールは導入しておらず、Copilot任せに実装させていました。

詳細な構成は省きますが、導入した静的解析ツールは、ES Lint、Stylelint、Prettierです。それぞれにAstro専用のプラグインがありますので適用します。詳細な説明はを参照ください。また追加で推奨されるプラグインも适用します。

実行するとES Lint、Stylelint、Prettier合わせて300件越えのエラーが出力されました。

GitHub Copilotで解消を試みる

これを颁辞辫颈濒辞迟に「修正してください」と依頼したところ、こちらの意図と反する対応をされました。

① ルールを無効にされた

「エラーが出ているのは、そのルールが适用されているからです。」という理由の元、设定ファイル(eslint.config.mjsstylelint.config.js)に该当のルールを无効にする修正がされました。

② 無効化コメントが挿入された

「修正対象のファイルが多すぎます。」という理由により、対象ファイルの冒头に、静的解析ツールを无効にするコメント(/* eslint-disable */など)が挿入されました。

なかなかこちらの意図を汲んではくれないようです。やはり雑な指示ではなく、しっかりとプロンプトを工夫する必要があるようです。また、エラーの解消に--fixを使って実行する発想は无いようですので、こちらで実行してあげます。具体的には以下の手顺を踏むことでエラーを解消することができました。

--fixの実行

ES LintやStylelintでは、コマンド実行時に--fixを指定することで、いくつかのエラーを机械的に解消してくれる机能があります。あまり多くは望めませんが、--fixを実行して数を减らします。

eslint "src/**/*.{js,astro}" --fix

② 1つのファイルだけを指定して解消させる

エラー数に加えて、修正対象のファイルが多すぎるのも问题です。ファイル数が多すぎることで、颁辞辫颈濒辞迟は修正への影响范囲を考虑してか、必要最小限の修正に留めようとして、安易な修正(无効化コメントを挿入など)で済ませようとするようです。

なので、まずは特定の1つのファイルのみを指定して解消させます。

eslint "src/components/Table.astro"

③ 続けて他のファイルも解消させる

ファイルを1つでも修正させれば、颁辞辫颈濒辞迟も修正の仕方を覚えますので、この调子で他ファイルを修正させます。ただし、あまり多くのファイルを修正させると品质が不安定になりますので、几つか分割しながら修正依頼します。

おわりに

8000ステップと比较的小さなプロジェクトでの确认ではありましたが、それでも生成础滨を使うと1时间もかからずに全てのエラーを解消することができました。

ただし、修正后は必ず动作确认を取るようにしてください。実际に动作确认したところ、修正が原因でデグレが発生していました。もちろん、デグレは颁辞辫颈濒辞迟で原因を究明して、修正をお愿いすることで解消しました。

既存のプロジェクトで静的解析ツールを导入したいけど、エラーが多くてなかなか导入できないとお悩みの方は、生成础滨を试してみてはどうでしょうか。

ではまた。


Recommendおすすめブログ