みなさんこんにちは、M&Aクラウドのつばき（@cacaca_came）です。
日頃、プロダクトを開発していて、痒いところに手が届かずめんどくさいなぁと感じることありませんか？
私はたくさんあります。例えば、同一ブラウザ上でのアカウント切り替えを伴う動作確認や、テスト用のデータ入力などです。
大AIコーディング時代なので動作確認はVRTやE2Eテストで比較的簡単に担保できるようになってきましたが、やはりプロダクトを実際に触る行為からは逃れられません。 今抱えている面倒ごとを解消したいものの時間が足りないため、AIコーディングエージェントを活用して動作確認のためのChrome拡張機能を開発しました。
読者のみなさまのヒントになればと思い、共有します。
開発中の課題
今回の取り組みをする前、私は以下のような３つの課題を感じていました。
些細なことだけど地味にめんどくさいことがあるが、わざわざプロダクトに機能としてつけるほどでもない/つけられないものがある
例えば以下の場面で改善をしたいです。
- 例１：今開いているページ（例：
/offers/{id}）のデータを管理ページで確認したい- 対象画面にたどり着くまでクリックが多く、少しめんどくさいです
- 例２：ワケがあってログアウト機能をつけていない箇所があるが、ログアウトさせたい
- 開発の都合上ログアウトしたい場合にCookieをChromeのDevtoolから消してから別アカウントにログインしなければなりません
- 例３：同一ブラウザ上でアカウントの切り替えを行う場合は手数が多いので、負担軽減したい
- 弊社のサービスには売り手企業、買い手企業がいます。双方組み合わせた動作確認をする場合には、何度もアカウントの切り替えが必要です
プロダクトの動作確認に非効率な部分がある
例えば以下の場面で改善をしたいです。
- 例：データ入力の箇所が多く入力が大変なので、効率化したい
- 売り手のお客様にご登録いただいた際には、ご自身の会社の情報をたくさん入力していただく必要があります。サービスとしては必要なことなのですが、動作確認時にデータを開発者が毎回考えて入力するのは大変です。大抵の場合、開発環境には適当な文章が入力されがちです。
本番環境で間違って操作してしまうことがある
弊社では、ドメインごとにブラウザの枠に任意の色付けができるツールを使用して操作中の環境を識別しています。しかし、慣れてしまうのかヒューマンエラーを完全に防ぐことは難しいです。なるべくミスを防ぎやすくしたいです。
上記のように、どれもちょっと面倒くさいけど、簡単に解決できるソリューションがありませんでした。（良さそうなものがあっても野良アプリを入れるのはセキュリティリスクが高いので導入しておりません。）
なお、弊社ではClaude Code（MAX x5）を活用して開発をしています。日頃から開発の大半をClaude Codeで行わせていますし、プロダクト以外の自分用の便利ツールをバイブコーディングで作成しています。今回は、プロダクトに対してこれらの課題をバイブコーディングで解決できないか？という試みです。
AIコーディングエージェントでの開発方針
AIでの開発における懸念点はいくつかあります。
- コードレビューによりコード品質を担保するか？
- 秘匿情報を埋め込んだ場合の漏洩リスクがあるのではないか？
実装方針としては以下のように定めました。
- 作業時間はあまり取れないのでレビューは行わない
- コードは見ない。Claude Code自身のセルフレビューに委ねる
- AIの出したデザインに口出しをしない。UX的な問題やバグがある場合のみ別途指示をする。
- セキュリティ上の懸念を最小限にする
- サービスのsubmitに関わる操作は行わない
- 基本、認証キーは入力させない。どうしても必要な場合にはキーを暗号化してローカルストレージに保管する。
これらの方針はCLAUDE.mdにルールとして記述し、AIが逸脱しないようガードレールを設けています。
AIエージェントとどう開発したか
基本的にメインの開発業務の隙間時間に並行して作成しました。指示と動作確認以外のコストはかかっていません。
通常の開発と同様に、Claude Code の auto-accept edits を有効にした状態で、依頼→動作確認し、指摘があれば再度依頼する、を繰り返しました。
参考として、最初に作成したセッションクッキーの切り替え機能を作った時の私の入力を載せておきます。
> googleクローム拡張を作りたい。まずは仕様をマークダウン形式でまとめたい。システム開発者向け拡張です。クッキーの切り替え機能：複数のユーザーを切り替える時にいちいちログアウトしなければならない。 > 一旦作って下さい > 切り替えた場合、元のセッションになりません > 切り替えのリロード時のパスを指定できるようにしたい > 記録するクッキーを指定できるようにしたい > プロファイルごとにクッキーを指定したいです。
作った機能の紹介
作成した一部の機能をご紹介します。いずれの機能も10回以内のAIとのやり取りで完成しています。
- セッションクッキーの切り替え機能
- 便利になったこと：操作途中のアクターごとの切り替えが簡単になりました
- 売り手入力情報のダミー文章の自動生成機能
- 便利になったこと：全体的に整合のあるダミーデータの入力が早くできるようになりました
- Azure OpenAIのトークンを使用していますが、暗号化して保存しています。
- ホバー中のデータに対応した関連移動導線のメニューの表示機能
- 便利になったこと：自分で管理ページを探す手間がなくなりました
- どこでもログアウト機能
- 便利になったこと：ログアウトが機能提供されていないページでもログアウトができるようになりました
- 本番環境操作のsubmitのアラート機能
- 便利になったこと：誤操作前に気がつけるようになりました
チームへの導入
チームメンバーには、ローカルにリポジトリをクローン→Chromeの開発者モードでディレクトリを参照で導入してもらっています。 強制的に導入を進めたわけではありませんが、痒いところに手が届く機能を随時追加しているので、ほぼみんなに導入してもらっています。
今後の展望
今後の展望として、組織の限定公開のChrome ウェブストアで配布する仕組みを考えています。 また、私だけが機能を追加しているので、他のメンバーも気軽に機能追加できるようにすることを考えています。 AIによって開発サイクルが早くなっている今、品質担保のためのガードレールさえあれば大胆に変更をマージできると考えています。むしろ、そうしていかなければならないとも思っています。この社内ツール開発を、その実験にもしていきたいと考えています。
採用
弊社は積極採用中です！ AIを活用してプロダクト開発を進めたい方、フルスタックにスキルを伸ばしたい方、気軽にご応募ください！
