はじめに
株式会社スイフトスタッフの田邉豊です。
当社ではWebサイト制作や業務システム開発を行っており、開発業務の中でもAIを積極的に取り入れています。
Codexも使っているのですが、リミットを気にしながら使わないといけないところが割とネックになり、開発がWebブラウザ上のChatGPTで完結したらなと考えるようになりました。
そんな中、X (旧Twitter)でPR作成までできたという内容の投稿があり、もしかしたら実現できるんじゃないかと思い試してみることにしました。
結論から言いますと、GitHub上でPRを作成し、CI/CDまわりの整備を進めるところまで試せたので、その流れをまとめます。
おおまかにやったことは以下になります。
- GitHubリポジトリをChatGPTに接続
- Next.jsで会社TOPページを実装するよう指示
- CIを追加
- リポジトリにself-hosted runnerを設定
- CIランナー上で
localhost:3005に起動するステージング用ワークフローを追加
今回作ったもの
今回は、サンプルプロジェクトとして株式会社スイフトスタッフのTOPページをNext.jsで作成しました。
チャッピー君の精度は疑う余地がありますが、あくまでサンプルですのでAIっぽいUIであることや謎の重なり方をしているところは多めに見てあげます。
GitHub連携の準備
まず、ChatGPTからGitHubを利用できるようにします。
ChatGPTのアプリ一覧からGitHubを検索します。
接続すると、GitHub側では ChatGPT Codex Connector の設定画面が表示されます。
次にGitHub側の設定に移ります。
この画面では、以下のような権限が確認できます。
- checks / commit statuses / metadata の読み取り
- actions / code / issues / pull requests / workflows の読み書き
- 連携対象リポジトリの選択
今回は検証用のサンプルリポジトリだけを対象にしたかったため、全リポジトリではなく、対象リポジトリを選択して接続しました。
GitHub連携は便利ですが、コードやPull Request、ワークフローへの書き込み権限を持つため、対象リポジトリは必要最小限にするのがよいと思います。
ChatGPTにTOPページ作成を依頼する
GitHub連携後、ChatGPTに以下のように依頼しました。
株式会社スイフトスタッフのTOPページをNext.jsで作成してください。
以下リポジトリに構築してください。
sample-top-page
すると、ChatGPTは対象リポジトリを確認し、既存構成やブランチ状況を見たうえで作業を進めてくれました。
今回のように空に近いリポジトリでも、まずREADMEの初期化や作業ブランチ作成から進めてくれます。
途中で、GitHubへの書き込み操作について確認が表示されました。
ここでは、ChatGPTがGitHub上でファイルを作成・更新するため、ユーザー側で許可する必要があります。
画面上では、以下のような選択肢が表示されていました。
- 常に許可
- 1回のみ許可
- 拒否する
このように、GitHub連携していても、書き込み操作がいきなり勝手に実行されるわけではなく、操作内容を確認したうえで許可できます。
TOPページ作成のPRが作成される
実装完了後、ChatGPTが作業ブランチにコミットし、Pull Requestを作成しました。
PR本文まで自動で整理してくれるのは、かなり便利でした。
ただし、PR本文に書かれている確認事項が実際に実行できているか、差分と内容が一致しているかは、人間側でも確認する必要があります。
CI追加もPRで依頼する
最低限のチェックを自動化したうえでPRを立ててもらうため、CIを追加することにしました。
しかし、CIはGitHub-hosted runnerを使うとプランの制限に引っかかる可能性があるため、self-hosted runnerを建てる方針としました。
リポジトリのSettings > Actions > Runners > New self-hosted runnerから設定可能です。
新規作成画面を開くとサーバ上での設定方法が提示されるので、その案内に従って構築してください。
また、runnerを建てるサーバはどこでも好きなところに建ててください。私は試しに建てたかっただけですので、自身のPCのWSL上に建てました。
CI作成をChatGPTに依頼してみましょう。
そうすると、基本的にはこのように緑のチェックマークになるまで修正を続けてくれます。
既存のプロダクト等でもテストケースをしっかり書いていれば、それをCIに含めることで品質確保もできそうですね。
CIランナー上でlocalhost:3005として起動するCDを追加する
次に、ChatGPTへ以下のように依頼しました。
ありがとうございます。次のタスクに行きます。
CIランナーの環境でデバッグできるよう、CD構築をお願いします。
CIランナー環境をステージング環境替わりとし、
localhost:3005で建てる設定にしてください。
その結果、作成されたPRがこちらです。
上記をマージし、CDを動かします。
(場所は リポジトリ > Actions > [作成された対象のワークフロー]です)
これで自身のローカル環境(http://localhost:3005)に立ち上げることができました！
※本来はステージング用のサーバを建ててテスト環境を構築したり、本番サーバ上で成果物をデプロイしたりする用途で使用するものです。今回は試すために自身のPCに建てていますが、あまりおすすめしません。
まとめ
ChatGPTとGitHub連携を使うことで、実装からPull Request作成までの流れをかなり効率化できました。
一方で、GitHubへの書き込み権限を持つ以上、以下の点には注意が必要です。
- 対象リポジトリを絞る
- main / develop に直接pushしないよう明示する
- PR単位を小さくする
- CI/CDの実行条件を確認する
- PR本文や説明を差分と照らし合わせる
- 最終的なレビューは人間が行う
ただし、それでもチャッピー君は言うことを聞いてくれない反抗期があるので、AIを信用しきってはいけません。ブランチ保護ルールなどを駆使して仕組みで解決しましょう。
そのデメリットを考慮しても、Codexのリミットだけに縛られず、ChatGPT上で開発を進められるのはかなりメリットが大きいと感じました。
今後も、実際の開発業務の中でどのようにAIを取り入れられるか、引き続き検証していきたいと思います。