⛳

AIを部下にしてペアプロした話

2024/11/28に公開

CSS

HTML

JavaScript

記事投稿コンテスト「今年の最も大きなチャレンジ」

tech

部下との出会い

「Vue Fes Japan 2024」プラチナスポンサーセッションのスピーカー中上裕基さんによる「AIとともに歩んだライブラリアップデートの道のり」
ここで語られた「Aider」に私は恋をしました。
”あの子が欲しい”

https://aider.chat/

実務導入経緯

私の業務は主にラボ開発であり、現行システムのフルリプレイスを行っています。
このプロジェクトでは、将来の開発改善や新しい技術の導入推進を考慮しています。
フルリプレイスの際には、品質改善と実装速度の向上を目指しており、そのためにaiderの導入を検討しています。
さらに、運用後にはユニットテストやStoryBookの導入を検討しており、これらのプロセスにも役立てるためにAI技術の活用を考えています。

導入方法

公式のドキュメントは下記になります
https://aider.chat/docs/install.html

実行環境

補足

導入には「Python 3」が必要です。
私の環境では、「python3」コマンドで実行しています。
各自の開発環境に応じてPython 3を準備してください。

導入にあたり下記どれかのAPI_KEYが必要です

Anthropi
OPENAPI

Gitを前提に動くのでGitで管理されているプロジェクトで実行しましょう

インストール

Python3を使ってインストールを行なっていく

python3 -m pip install -U aider-chat

導入準備

プロジェクトに環境変数を定義するenvファイルを実装

.env

; Work with GPT-4o on your repo
OPENAI_API_KEY=your-key-goes-here

; Work with Claude 3.5 Sonnet on your repo
ANTHROPIC_API_KEY=your-key-goes-here

初回起動

導入準備を行なったプロジェクトでaiderの実行コマンドを叩く

python3 -m aider

下記質問をされるので「Yes」と答えてください。
実行履歴などをgitで追跡するかを問われますが、基本的に必要ないと思いますので.gitignoreに追加してもらいましょう。

Add .aider* to .gitignore (recommended)? (Y)es/(N)o [Yes]: Y

実際に使用してみる

index.htmlというファイルを作成しgitでコミットします。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

aiderの認識しているファイルの確認

lsコマンドでaiderが認識しているファイルを確認しましょう
gitで管理されているファイルだけが表示されるはずです

> /ls                                                                                                                                                                    

Repo files not in the chat:

  .env_exsample
  .gitignore
  index.html

編集を依頼する対象ファイルを設定します

> /add index.html

─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
index.html

/addコマンドを利用することで編集対象をしてする事ができ、aiderは基本的にここに設定されたファイルに編集をします。
もちろん状況によって複数対象にする事ができます

FullCalendarを実装する準備

プラグインなどの導入はaiderに任せず自分の手で行いましょう。
バージョン毎に導入手順や必要なものが違ったりした際にaiderが想定通りの回答を実装してくれるとは限りません

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.15/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.15/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6.1.15/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6.1.15/index.global.min.js'></script>
</head>
<body>
    <div id="calendar"></div>
</body>
</html>

実装する指示をする

初回の指示という事もあるので、index.htmlにどんな技術を使って実装して欲しかも記載しておきます

> HTML/CSS/JSでFullCalenderを実装してください

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.15/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.15/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6.1.15/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6.1.15/index.global.min.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        #calendar {
            max-width: 900px;
            margin: 40px auto;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <div id="calendar"></div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: [
                    {
                        title: 'Event 1',
                        start: '2024-11-01'
                    },
                    {
                        title: 'Event 2',
                        start: '2024-11-05',
                        end: '2024-11-07'
                    },
                    {
                        title: 'Event 3',
                        start: '2024-11-09T12:30:00',
                        allDay: false
                    }
                ]
            });

            calendar.render();
        });
    </script>
</body>
</html>

実際に何度か試してみてnode.jsが必要な書き方を実行したりしたので自分が想定したものが出てくるとは限らないので、何がダメなのかを判断する知識は必要になります。

指示した内容を１つ前の状態に戻す

aiderを活用していく中で指示した内容を戻したい状況が発生すると思います。
その場合は下記コマンドを実装しましょう

/undo

その他のコマンド

上記で説明したコマンドを理解していれば基本的には事足りると思いますが、より快適にaiderを活用するためには下記リンクから色々なコマンドを試してみるのが良いかと思います

結論

プロジェクト内にAIを住まわせる事で今までChatGPTに質問形式で回答を求めていただけですが、実装まで行なってくれるので作業効率は格段に上がりました。
ただ、何も理解しないままaiderに好き勝手実装させるのは危険だとも感じました。
曖昧な内容の言葉では想定通り実装してくれるわけではないので、自分がある程度理解している状態でコーディングする時間を短縮するために活用する。
aiderが実装したコードから自分もaiderからコーディング技術を盗んだり、曖昧な仕様をaiderに質問した上でそれをキャッチアップしていく事でプロンプトをうまく書けない時は自分が実装できるようにしておく必要があると感じました。

GitHubで編集を提案