はじめに
自分が知らない分野で、生成AIのみでどこまで開発できるのかを試すため、Chrome拡張機能を一から開発 してみました。
筆者：開発はPythonメイン、Chrome拡張は経験なし、仕組みも何も知らず。
一方生成AIはヘビーユーザーで、もうこれがないと仕事ができないレベルです。開発やブレスト、文章作成などよくある用途でどっぷり浸かってます。
作ったのは、「Fusen - Sticky Notes!」というWebページごとに付箋を保存・表示できるものです。機能はシンプルですが、やってみて生成AIの凄さと課題点を改めて実感しました。
自分自身ではコードを１行も書いていません。READMEもほぼAI生成です。
作ったコードはこちら: https://github.com/aitit-inc/fusen-sticky-notes-chrome-extension
作ったもの：Fusen - Sticky Notes!
Fusen - Sticky Notes! は以下の機能を持つChrome拡張です。
- Webページごとにメモを保存。
- メモは自動で保存され、再訪時に表示される。
- 付箋を自由にドラッグして移動可能。
- ショートカットキーでメモの編集がスムーズに。
- 特定のサイトで付箋を非表示にする設定機能付き。
開発ツール
- 「Chrome Extension Dev V3」というGPT。GPTストアで公開されている。
- （致命的なことは、これがどのモデルで実行されているのかわからない。）
- 一部 JetBrains AI assistant（GPT-4o）も使ったがちょっと微妙だった。
- git, github, 適当なテキストエディタ
Chrome拡張や開発内容に関して、Web検索は一度も使いませんでした。
（ノート用のアイコンを探しただけ）
開発手順と時間
1. Chrome拡張の構成とサンプル生成（1分）
「Chrome拡張を作りたい」的な指示。
以下のようなディレクトリ構成とサンプルファイルが生成された。
extension/
├── manifest.json
├── popup.html
├── content.js
├── styles.css
└── icons/
（この構成が一般的なのか知りませんが、ほぼ一発でそのまま動きました。）
2. サイトごとにメモを書いて保存する基本機能の実装（10分）
「Webページごとにメモを書いて保存する機能」の開発を指示。
これも2,3回の対話で、動くものを作ってくれました。
3. この時点で一度バグ修正（50分）
そのまま動いたものの、付箋がWebページ上に表示されない（拡張機能のメニューからしか表示・編集できない）という致命的なバグがあったので修正しました。
が、修正は一発でうまくいかず、表示されても今度は保存ができなかなかったりでモグラ叩きが始まったので、途中からgitでコード管理を始めて、過去コードの復元をできる状態にしました。
4. 機能追加（5時間）
基本機能が完成した時点で開始から1時間ぐらい。
ここで公開しようかと思いましたが、欲が出てきて機能追加を始めたら5時間かかりました。
よく見るパレートの法則ですね。
生成AIを使ってもこの法則は変わらないようです。
-
ショートカットキーでフォーカスイン/アウト：
-
Cmd + \で付箋にフォーカスし、編集を開始する機能。 -
Cmd + Return,ESCでフォーカスを外す機能。
-
-
自動保存：
- メモを入力するたびに自動で保存されるように。
-
付箋を閉じる機能：
- 付箋の右上にバツボタンを表示し、クリックで非表示にする機能。
-
ドラッグ＆ドロップ：
- 付箋を自由に画面内で移動できるように。
-
非表示サイトリストの設定機能：
-
options.htmlを作成し、特定のサイトで付箋を非表示にする機能を追加。
-
途中から泥沼でモグラ叩きを繰り返しました。
リファクタリング指示をしたり、渋々コードを読み始めて細かい指示をしてなんとか突破しました。コードを書いていないとは言え、生成AIのみでできたとは言い難いですね。
逆にいうと、この途中まではコードの中身を全く読まずにコピペだけで進めてこれたのはすごいです。
5. Chrome Web Storeのアカウント作成と公開申請（約1時間）
ここでは、説明文を書いたり、いくつか文を入力する項目があったのでそこで生成AIを使いました。
6. この記事の執筆（3時間）
ChatGPTで全体を生成（2分）
→ 自分で加筆・修正（3時間）
生成AIのみで開発する際のコツ
どれも人間が開発するときに気をつけることと似てます。
生成AIだから◯◯、みたいなポイントは特にないかもしれません。
生成されたものが間違いでなければ全て受け入れる
自分のこだわりや好みやらしさを出そうとし始めると100倍の時間がかかるので、そういうことは諦めた方が早く完成します。
コード行数と生成精度の関係
今回は、設定用のjsonファイルなども含めて7ファイル、総行数550行、1ファイルだと一番長くて250行でした。これで限界という感じはしませんでした。
複雑な仕様への対応
多分これが一番の肝です。
仕様の数に対してバグコード生成率が指数関数的に上がるような印象です。
AIのみでシステムを完成させることは可能ですが、それができるのはシステム設計能力が高い人だと思います。
なるべくシンプルな設計にしたり、疎結合な機能単位で指示できれば高い精度で生成できます。
機能の複雑化や、複数の仕様が入り組んだコード（の指示）になると急激に精度が落ちます。
DevinなどのエンジニアAIは、設計やタスク分割の部分に価値がありそうですね。
リファクタリングした方が良い？
はい、のちの改修や機能追加でバグが起きにくくなると感じました。
AI生成
→ 修正や機能追加指示 × N回
→ リファクタリング
→ 改修・追加指示 × N回
→ リファクタリング
の流れです。
が、リファクタリングをすると高確率で一部の機能が欠損する不具合が発生しました。小規模なプログラムなら、リファクタリングしないで進めた方が完成は早いかもしれません。
これは人間が開発する場合に、短期と長期の開発速度を天秤にかけるのと同じことだと思います。
枯れた技術の方が精度が高い
最新バージョンではない言語、ライブラリ等の方が生成しやすい、よく言われることですが今回強く実感しました。
普段はPythonをメインで使っていて、ライブラリの最新版で開発しているとAI生成コードが古いバージョン用でうまくいかないことがよくあるのですが、今回はHTML, CSS, Javascriptのみで、外部ライブラリも使っていないので、この問題は一度も起きませんでした。
最後に
Chrome拡張について何も知らずに公開申請のところまで行って初めて、今回のツールは「ホスト権限」というのを使っているので審査のハードルが高いことを知りました。がそれを制限すると自動でWebページ上に付箋を表示できなくなるようで、このツールの１番の価値が失われるのでそのまま申請しました。
本記事公開時点で、まだChrome拡張は審査中で公開されてません。というオチでした。