GitLab Duoでコードを自動修正 #GitLab #GitLabDuo #AI

はじめに

GitLab Duoはソフトウェア開発ライフサイクル全体でAIを活用できる枠組みです。
GitLab Duoには様々な機能(一覧)が含まれています。今回はAIにコードを修正してもらう機能を試してみましょう!

チャレンジ内容

この連載でおなじみの弁当注文アプリに対して、先日はGitLab Duoで自動テストを作成しました。その記事ではGitLab Duoが作成したテストの誤りを手動で修正しましたが、今回はこれをGitLab Duoの機能で自動修正してみます。先日の記事の流れに沿って、1つずつ修正を適用していきますので、そちらと比べながら読み進めると理解が深まるでしょう。
いつものように、結果を確認して、よくできている点や修正が必要な点を評価していきます。

チャレンジ結果

コードを修正してもらう機能の使い方は非常にシンプルです。VS Code上で対象のコードを選択し、GitLab Duo Chatで/fixと入力するだけです。必要に応じて/fix パフォーマンスの問題を修正/fix 潜在的なバグを修正などと指示することもできます。早速実行してみましょう。

importを調整

エラーになっている行を選択した状態でGitLabのチャットに/fixと入力すると、解説付きで修正方法が提案されました。内容は、いつも通り英語です。提案内容は先日手動で修正したものと同じで、正しい修正です。適用は手動で行う必要があります。

あるいは、エディター上でエラーになっている部分にカーソルを合わせて、クイックフィックスからFix with GitLab Duoを選択すると、Duo Quick Chat上で同様の結果を得ることができます。エディター上でエラーになっている場合は、こちらの方が使いやすいかもしれません。

修正を手動で適用して、次の箇所に進みましょう。

handles bento order with confirmation(初級向けの方法)

このテストケースは、イベントハンドラ内での非同期処理の扱いに対するテスト側の実装が不適切なことにより失敗しています。失敗の原因が分かっていない初級者が操作しているという前提で/fix テストを成功させるという指示をしてみましょう。

失敗の原因はタイミング問題であると説明されています。通常のロジック誤りと比較すると、タイミング問題で失敗しているということはある程度のプログラミング経験がないと分からないので、ここを的確に言い当てて適切な修正を提案してもらえるのは非常に有用です。
修正内容は先日手動で修正したuserEventを使う方法とは異なり、アサーション側でwaitForを行うアプローチが提案されましたが、この方法でもテストが成功するようになります。userEventを使うアプローチの方が簡単かつ実際のユーザー操作に近い流れでテストできるので堅いと思いますが、今回提案された内容でも問題ないでしょう。

handles bento order with confirmation(中級向けの方法)

先ほどの箇所に対して、今度は失敗の原因が分かっている中級者が操作しているという前提で/fix userEvent.setup()を使いfireEventを廃止という指示をしてみます。

先日手動で修正した際と同様の結果を得ることができました。このように、望みのアプローチを適用することも簡単です。

handles API error during order creation

次は、throwされていることのアサーション方法が誤っていることによりエラーが発生しているテストケースの修正です。この修正は、テスト対象コードでのエラー処理内容と、そこでthrowされる場合のJestのアサーション方法に習熟しているかどうかが肝になります。

rejects.toThrow()というアサーションが不適切だというのは言い当てられましたが、その部分が削除されてalert()が呼び出されることのアサーションに置き換えられています。テスト対象コードではalert()を呼び出しているのではなくthrowしているので、この修正内容は不正解で、テストは成功するようになりません。
そもそも指定したテストコードは参照されていますが、テスト対象のコードが参照されていないようです。これではテスト対象に応じた適切なテストに修正することは難しいでしょう。1つのソースファイルの指定した行だけを参照して修正できるような内容での利用が想定されているのかもしれません。

回避策として、テスト対象のコードを提供して再チャレンジしてみましょう。

/fix この部分は下記に対するテストである。
```
const response = await generateClient().graphql({ query: createBento, variables: { input: input } });
if (response.errors) {
throw new Error();
}
```

同じような結果になってしまいました。修正前も後も、テスト側から非同期関数を呼び出して、それがrejectされると誤解しているようです。実際には非同期関数ではないクリックイベントのハンドラがthrowしています。このあたりも伝えて、やりたいことを具体的に指示してみましょう。

/fix クリックするとクリックイベントのハンドラによってgraphql()が呼び出され、それはrejectされずにエラー値を返す。クリックイベントのハンドラはそのエラーを受けてthrowするので、throwされたことをアサーションしたい。

また同じような結果になってしまいました。「API呼び出しのエラーといえばrejectされるもの」とLLMに強く学習されてしまっているようです。この部分の自動修正は、今回は見送ることにします。

まとめ

GitLab Duoを使った自動修正全体の振り返りです。GitLab Duoでの自動修正は、文法の誤りだけではなく、非同期処理のタイミング問題のような難易度の高い不具合についても適切に修正することができ、既に実用的なレベルに達しています。プログラミングで何かしらのエラーが発生してすぐに解決できない場合は、深く悩んだり調べたりする前に、まずは/fixを実行するのもよいかもしれません。Undoや一括置換のように「使えて当たり前の機能」として身につけておくとよいですね。うまくいかないこともあるかもしれませんが、全体としては大幅に時間を節約できるでしょう。
GitLab Duoの豊富な機能に今回紹介した自動修正を組み合わせて、ソフトウェア開発の様々なフェーズを自動化し、楽しく高品質なプログラミングを実践していきましょう。既にGitLabを利用中の方は、GitLab Duoの導入を考えてみるのもよさそうです。

Author

教育系エンジニア。開発やR&Dで最前線の技術を実践しつつ、後進の育成にも魂を燃やす。排出者は数千名。無類の子ども好きで、平日夕方は仕事を中抜けして近所の子どもと遊ぶ毎日。小学校でのプログラミング授業なども経験あり。

上村国慶の記事一覧

新規CTA