Zenn
🐙

「求めていたリンクコピーツール」を作るまで - Chrome拡張開発で学んだAI駆動開発の真価

に公開
Chrome Extension
Cursor
WXT
ai駆動開発
Claude Code
idea

はじめに

Web開発をしていると、「こんなツールがあったらな...」と思うことがある。特に日々の作業で繰り返し行う小さなタスクに対してだ。私の場合、それはブラウザのタブで開いているページのURLを特定のフォーマットでコピーすることだった。

欲しかった機能、見つからなかった解決策

毎日のワークフローの中で、こんなシーンに遭遇していた：

  • 社内向けの技術記事を書く時: 参考サイトのURLをMarkdown形式でコピーしたい
  • 議事録を作成する時: 複数のタブで開いた資料をまとめてリンク化したい
  • 後で読むリストの管理: クリップボードにあるURLリストを一括でタブ化したい

既存のChrome拡張を探してみたが、どれも微妙に自分のニーズとは合わない。「開いているページの URLを好みのフォーマットでコピーする」「クリップボードに入っている複数のURLを一度に開きたい」「ページ内を範囲選択してその範囲のリンクを取得したい」といった要求をすべて満たすものは見つからなかった。

自分に合ったツールが無いなら作ればいい

そこで、無いなら「作ってしまおう」の精神で生成AIパワーを最大限駆使して作ってみました。
CopiToolをご紹介します。


なかなかいい感じのものが作れたのではないかと思います。

設計思想と技術選択

コアコンセプト

CopiToolは「シンプルながら柔軟」というコンセプトで設計した。基本的な使い方は直感的に、しかし高度なカスタマイズにも対応できる痒いところに手が届くツールを目指した。

技術スタックの選定

近年のChrome拡張開発において、WXT Framework はベストな選択肢の１つだ。Viteベースのビルドシステムの恩恵を受けつつ好きなJS(Vue,React,Svelteなど)を選択できビルドも楽ちんで開発体験が非常に優れている。

採用した技術スタック:

  • WXT Framework: Chrome拡張に特化した開発フレームワーク
  • React 19: AI駆動開発でフロントエンドならこれ
  • TypeScript 5.x: 型安全性による品質担保
  • Tailwind CSS + DaisyUI: イイ感じのUIをさくっと
  • Vitest: 単体テストによる品質担保

機能紹介

  1. タイトル付きリンクをMarkdown形式でコピー
    設定によりウィンドウで開いているタブやグループで開いているタブを一括コピーも可能

  2. ページ内を範囲選択してHTML要素に含まれているリンクをコピー
    ※執筆時点でストア審査中なのでまだ使えないかも
    2025/06/04 公開されました。拡張インストール後に範囲選択ボタンが動作しない場合は一度ブラウザを開き直して見てください。

  3. クリップボードに入っている複数のリンクを一括で開く

  4. 設定画面
    タコのアイコンも気に入っている

  5. テンプレート設定画面

AI駆動開発の実践

今回の開発では、工程の9割でChatGPT、claude code、Cursor Agent Mode を活用した。ここで肝なのは「会話ベースでAIに丸投げ」ではなく、自分が作りたいものを言語化し事前にAI向けの設計書としてしっかりと整備することである。

それぞれの役割は以下のようになっている

  • ChatGPT: 要件定義書・機能設計書・UIデザイン画像、アイコン作成など
  • Claude Code: 上記のドキュメントを元に0→1実装
  • Cursor: 細かい調整やデザイン修正
  • 人間: 指示出し、成果物の受け入れ、フィードバック

ドキュメント・ファーストの開発プロセス

projects.md: 要件定義書（機能要件、非機能要件、ユーザーシナリオ）
detail.md: 詳細設計書（アーキテクチャ、機能設計、型定義、UI設計）
structure.yml: プロジェクト構造定義
todo.md: 開発タスク管理

このドキュメント群を「設計図」として、AIに実装を依頼するという流れ(いわゆる要件定義を用いたAI駆動開発)で進めた。

この開発手法により、細かく機能単位で実装と受け入れを高速で行うことで手戻りが少なく短期間で実装してストアにリリースすることができました。
※初板のリリースまで1日かかっていません。

学んだこと、そして今後

個人的なニーズから始まったCopiToolの開発は、最新の開発ツールとAI駆動開発の可能性を実感する非常に楽しい体験でした。

この時代に重要なのは、「完璧なツールを見つける」のではなく、「自分のニーズに合うものを作る」ことかもしれない。個人でも短期間で十分に実用的なツールを作ることができる時代にすでに突入している

今後、ニンゲンが鍛えなくてはならないのは、欲求を生み出し実現する力なのか

CopiToolは Chrome Web Store で公開中です。興味のある方はぜひ試してみてほしい。

あなたの「あったらいいな」は、案外簡単に実現できるかもしれない。

Discussion