AIコード生成「Cline」実践記：爆速開発の裏にあった課題と解決策

今月は資格試験の関係であまりいろいろ調べたりできなかったので、数ヶ月前から使っているClineでアプリ開発をしてみた感想をまとめてみます。

何で使ったのか

下記のBacklogのタスク管理を便利にするAI関連の機能を作る時に使用しました。
できるだけ自分で実装せずに指示だけすることに注力して作ってみました。
後ほど記載したレビューの結果の反映の細かな修正などは少し実装に手を入れました。

こちらのリンクのブランチの対応で試していました。
https://github.com/pawn-4-git/backlogAgileExtension/tree/plus-ai

※細かな機能の不足点があるので、まだソースはGithubにしかありません。

機能としては課題の一覧画面で表示されている課題の内容を取得し、プロンプトと一緒に渡して必要な情報を調べてもらう内容です。右下にボタンを出して、押すと画面の内容をまとめた内容を出します。

設定はオプションの画面でできるようにしました。

実装時間について

実装面で言えば楽ができたというのは時間としてはあります。
コード補完も使っているとはいえ、ロジックの方針だけ出してチェックして適用していくことで時間が短くはなっていると感じてました。
特に機能として存在を知っているデータをchromeのストレージに保存する部分など、実際に実装方法を調べる手間が省かれたのはよかった。

実感としては最低でも50%は省けたと思います。

実装の指示について

一回で全てを指示するとどこかで意図したものにならない場合があった。
全てを一回ではなく、「ファイルを読む」「特定のロジックを確認させる」「変更するコードの内容を指示する」という流れで順番に指示することのほうが結果として正確に思ったものができた印象でした。

実装結果について

問題がある実装を指示した場合が見逃す危険性はあった

指示通りに作成されたというのが感想です。ただ本当に指示通りに作成されるので、指示内容に問題があっても止まることなく作成されます。
この部分はかなり他のコード生成するツールでも問題になるかなと思いました。
後から気づかないと、指示一つ一つが問題なくても繋がると悪影響が出る可能性も出てくると感じました。

今回で言えば以下の指示の組み合わせで、XSSの問題がありました。

1.プロンプトを作成

let Prompt = "プロンプト";

2.AIのリクエストを行い応答受け取る
ChatGPTやGeminiのAPIを呼び出すコードはこちらです。

if (aiType === 'chatgpt') {
        apiKey = openaiApiKey;
        model = llmModel || 'gpt-3.5-turbo';
        apiUrl = 'https://api.openai.com/v1/chat/completions';
        headers = {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        };
        body = JSON.stringify({
            model: model,
            messages: [{ role: "user", content: `${Prompt}` }],
            temperature: 0.7
        });
    } else if (aiType === 'gemini') {
        apiKey = geminiApiKey;
        model = geminiModel || 'gemini-pro'; // Geminiのデフォルトモデル
        apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
        headers = {
            'Content-Type': 'application/json'
        };
        body = JSON.stringify({
            contents: [{ parts: [{ text: `${Prompt}` }] }]
        });
    }

3.応答結果をHTMLに埋め込む（=innerHTMLで応答結果を埋め込むコード）

let summaryResult = "要約結果を取得できませんでした。";
        if (aiType === 'chatgpt' && data.choices && data.choices.length > 0) {
            summaryResult = data.choices[0].message.content;
        } else if (aiType === 'gemini' && data.candidates && data.candidates.length > 0) {
            summaryResult = data.candidates[0].content.parts[0].text;
        }
        let obj=(値を入れる場所のDOMを取得)
        obj.innerHTML = summaryResult;　←ここでレスポンスの中にjavascriptが返ってくることが想定されるが、指示通りならそのままHTMLに反映される可能性がある。

        //修正後
        obj.textContent = summaryResult;

記述場所を指定しないと安直にその場に書こうとする

CSSなど普段であればJavaScriptに書くことは汎用性がなくなると思って極力しないのですが、コード生成させるとその場にひとまず書こうとしてきました。
その度に、CSSファイルに書いてと支持する必要が出てきました。

変更規模が大きくなる

画面などを作ったり、javascriptのコードを書かせたりさまざまなパターンを試しました。どの場合もファイル全体をひとまず変更しようとするので、変更がかなり大きくなる印象でした。
ある程度のタイミングでコミットなどで記録を残したり、作成したコードを捨てる覚悟で作業したほうが良いと感じました。

同じ変更をし続け完了しないときがある

指示の長さややり取りの回数の多さとは関係なく、同じ変更をひたすらし続ける場合があったので変更内容についての理解はやはり使う際には必要だと感じました。

レビューについて

個人で開発しているものになるのでレビューがやはり自分の知識に偏ってしまうのは課題でした。今回のClineを使っての開発では、コードを自分で書いていないこともあり細かな部分をプルリクを作った時点で「これなんだっけ？」と思う部分もありました。

レビューもAIにさせてみる

Githubのリポジトリに下のようなAIレビューを入れていたので、問題のあるコードはこちらである程度カバーしました。

まとめ

全てをClineに任せるのは、やはり厳しい印象なのが個人の感想だと思っています。
特にファイルを全て変更する部分や指示した内容を正直にコードに反映させる動きが印象として強いので、変更された内容を把握が難しくなるという点が印象として強いです。

ただ、細かな変更の対向は有用だと感じました。
よって細かな単位でコミットしていくことは記録を残すためや、あるところで変更内容を破棄するある程度大胆な判断をしても問題無いよう意識しておく必要があると感じました。