部下との出会い

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

導入方法

公式のドキュメントは下記になります

実行環境

補足

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

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

Anthropi
OPENAPI

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

インストール

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

python3 -m pip install -U aider-chat

導入準備

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

API KEYはどちらか片方あれば大丈夫です

初回起動

導入準備を行なったプロジェクトで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>

aiderの実行結果は今回記事に記載した通りのものが表示されるとは限りません

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

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

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

/undo

このコマンドで自分が作成したコミットを消せないので注意が必要です

その他のコマンド

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

結論

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

一緒に働く仲間を募集しています！

株式会社コネクター・ジャパンでは一緒に働いてくれる仲間を募集しています！

事業拡大に伴い、エンジニアを大募集しています。
興味のある方は下記リンクから弊社のことをぜひ知っていただき応募してもらえると嬉しいです。

▼会社について

▼代表メッセージ

▼応募はこちら