0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Claude Codeに「便利ツールを100個」作らせてみた|プロンプトだけで完成までの全記録

0
Posted at

今回、Claude Code に日本語で指示を出すだけでエンジニア・クリエイター向けの「便利ツール集(DevToys)」を100個作ってもらいました。

面白かったのは 「圧倒的な量産スピード」 です。

出てきたものを見て「次へ」「モバイル対応して」と追加注文するスタイルで進めました。

思い立ってから100個のツール実装完了までの所要時間は、数時間(途中API制限の回復待ちを含む)でした。

この記事では、実際に投げたプロンプトをそのまま全部公開します。

image.png

使ったツール

  • Claude Code (Anthropic) — 企画からアプリ実装まで全担当
  • エディタは VS Code
  • 自分で書いたコード行数: 0行

🎬 やりとり全記録

第1ラウンド:計画と題材出しはAIに丸投げ

100個のツールを作るにあたり、自分で100個のアイディアを考えるのは大変です。
まずはClaude Codeに計画から丸投げしました。

image.png

(中略)

image.png

結果:

ものの数秒で、見事に10カテゴリ×10個=100個のツール案をリストアップしてくれました。

  • テキスト操作(大文字小文字変換、文字数カウントなど)
  • エンコード/デコード(Base64、URLエンコードなど)
  • データフォーマット(JSONフォーマッタ、CSV変換など)
  • 色・デザイン(カラーピッカー、CSSジェネレータなど)
  • ユーティリティ(ストップウォッチ、メモ帳など)

本当に100個の実用的なリストが完成。さらに、フレームワークや多言語対応(i18n)などの前提条件もヒアリングしてくれました。

🤖 ポイント: ゼロから要件定義するのではなく、AIに「計画と題材」を提案させることで、実現性の高いアイディアが即座に揃います。

第2ラウンド:基盤となる「雛形」の構築

題材が決まったので、提案された質問に答える形でプロジェクトの基盤構築を指示しました。

image.png

結果:

Vite環境の構築から始まり、React Routerによるルーティング、i18nの設定まで一気に構築してくれました。

驚いたのは、こちらが細かく指示しなくても「ツール登録のレジストリ機能」や「共通のコピーボタン」「サイドバー」など、後々の量産を見越した完璧な雛形とレイアウトを自発的に作り上げてくれたことです。

🤖 ポイント: 「共通化すべき部分」を細かく指示しなくても、開発のセオリーを理解して勝手に設計・実装してくれます。

第3ラウンド:ひたすら100本ノック(途中でAPI制限も)

雛形ができたので、ここからはカテゴリごとに実装を進めてもらいます。

image.png

image.png

結果:
ここからは「続けて」「次へ」と指示を出すだけのボーナスタイムです。

AIが必要なライブラリ(pdf-lib、qrcode、sql-formatter など)を的確に選定し、重いライブラリにはパフォーマンスを考慮して自発的にLazyロード(遅延読み込み)まで適用してくれました。

順調に進んでいましたが、70個を作り終えたところで事件が発生。

image.png

100個のツールを一気に作らせようとする熱量がサーバーに伝わってしまったのか、API制限に引っかかりました。

制限解除後、「100まで作成して。」と再開を指示し、無事に残り30個も一気に実装。100個のツールが完走しました。

image.png

🤖 ポイント: 100個という人間なら心が折れる単純作業も、「次へ」の一言で文句一つ言わずにこなしてくれる圧倒的持久力。

第4ラウンド:モバイル対応と仕上げ(UIの微調整)

機能は完成しましたが、スマホで見るとサイドバーが見づらかったため微調整に入ります。

image.png

やってみて気づいたこと

① 「完璧な指示」は必要ない

最初から100個の仕様書を書く必要はなく、「100個作って。題材も考えて」という雑な丸投げからスタートし、出てきたものを見て軌道修正するスタイルで十分形になります。

② ライブラリ選定も任せられる

機能実装に必要な js-yaml, mermaid, katex, bcryptjs などの多種多様なライブラリを、AIが要件に合わせて勝手に探してきてインストール・実装してくれます。自分でnpmを探し回る必要がありません。

③ 面倒な「量産」こそAIの真骨頂

1つのツールを作るなら人間でもすぐできますが、似たようなUIで100個の機能を作るのは非常に大変です。そのモチベーションが落ちない作業をAIが担当してくれるのは最高の体験でした。

まとめ

Claude Code を使うと、作りたいもののイメージと技術選定の知識さえあれば、個人でも多機能なWebアプリが圧倒的なスピードで作れる時代が来ています。

ポイントは:

  • 最初は雑でいい(計画も考えさせる)
  • 出てきたものを見て追加指示
  • 「共通化」や「最適化」はAIが空気を読んでやってくれる
  • 仕様じゃなく「こうしたい」を伝える

「コードを書く」のではなく、「作りたいものをどう設計して、どう指示を出すか」というPM(プロジェクトマネージャー)のようなスキルがこれからは大事になりそうです。

とはいえ、AIに的確な指示を出すためにプログラミングの知識は必要です!

完成したアプリはこちら

👉https://devtoys.goris.site/

(補足)機能リスト

1. テキスト操作(1-10)

1.大文字/小文字変換(camelCase, snake_case, kebab-case, PascalCase 一括)
2.文字数・単語数・行数カウンター
3.テキスト差分比較(diff viewer)
4.重複行削除・ソート
5.正規表現テスター(マッチ強調表示)
6.文字列置換(複数パターン一括)
7.改行コード変換(CRLF/LF/CR)
8.全角/半角変換
9.テキストリバース・並べ替え
10.Lorem Ipsum ジェネレーター

2. エンコード/デコード(11-20)

11.Base64 エンコード/デコード
12.URL エンコード/デコード
13.HTML エンティティ エスケープ
14.JWT デコーダー
15.Unicode エスケープ変換
16.ROT13 / Caesar 暗号
17.Hex ↔ ASCII 変換
18.Binary ↔ Text 変換
19.Morse コード変換
20.QR コード生成・読み取り

3. データフォーマット(21-30)

21.JSON フォーマッター/バリデーター
22.JSON ↔ YAML 変換
23.JSON ↔ CSV 変換
24.JSON ↔ XML 変換
25.JSON Path / JMESPath 検索
26.CSV ビューワー(テーブル表示・ソート)
27.TOML パーサー
28.JSON 圧縮(minify)
29.JSON Schema ジェネレーター(サンプルから推論)
30.Markdown ↔ HTML プレビュー

4. ハッシュ/暗号(31-40)

31.MD5 / SHA-1 / SHA-256 / SHA-512 ハッシュ
32.HMAC 計算
33.UUID / ULID ジェネレーター
34.パスワード生成(強度メーター付き)
35.パスフレーズ生成(diceware)
36.bcrypt ハッシュ確認(WASM)
37.AES 暗号/復号(Web Crypto API)
38.RSA 鍵ペア生成
39.ファイルチェックサム計算
40.パスワード強度判定

5. 色・デザイン(41-50)

41.カラーピッカー(HEX/RGB/HSL/HSV/OKLCH)
42.カラーパレット生成(補色・類似色)
43.グラデーション ジェネレーター(CSS出力)
44.コントラスト比チェッカー(WCAG)
45.画像からカラー抽出
46.シャドウ ジェネレーター(box-shadow)
47.ボーダー半径ビジュアライザー
48.CSS クランプ計算(clamp())
49.Tailwind ↔ CSS 変換
50.Favicon ジェネレーター(複数サイズ)

6. 画像・ファイル(51-60)

51.画像リサイズ・圧縮(Canvas)
52.画像形式変換(PNG/JPEG/WebP/AVIF)
53.画像 ↔ Base64
54.EXIF ビューワー/削除
55.SVG 最適化・プレビュー
56.SVG → PNG 変換
57.GIF 分解・結合
58.PDF 結合・分割(pdf-lib)
59.PDF からテキスト抽出
60.ファイルメタデータビューワー

7. 時間・数値(61-70)

61.Unix タイムスタンプ ↔ 日付
62.タイムゾーン変換
63.Cron 式パーサー(次の実行日時表示)
64.期間計算(日数・営業日)
65.進数変換(2/8/10/16進)
66.単位変換(長さ・重さ・温度・データ量)
67.数値フォーマッター(カンマ・%・通貨)
68.パーセンテージ計算
69.統計計算(平均・中央値・標準偏差)
70.乱数ジェネレーター(範囲・分布指定)

8. Web/開発支援(71-80)

71.HTTP ステータスコード辞典
72.User-Agent パーサー
73.URL パーサー(クエリ分解・編集)
74.ブラウザ情報ビューワー(画面・機能・対応API)
75.クッキー パーサー
76.mime type 検索
77..htaccess / robots.txt エディタ
78.レスポンシブ ビューワー(複数解像度プレビュー)
79.メタタグ ジェネレーター(OGP/Twitter Card)
80.文字幅シミュレーター(Tweet・OG画像)

9. コード/正規表現(81-90)

81.正規表現ビジュアライザー
82.Cheat Sheet(regex・git・vim 等の検索可能リファレンス)
83.SQL フォーマッター
84.JS / CSS / HTML minifier・beautifier
85.ASCII アート ジェネレーター(テキスト→図)
86.ASCII 表/Unicode 表ブラウザ
87.絵文字検索・コピー
88.数式レンダラー(KaTeX)
89.Mermaid / PlantUML 図プレビュー
90.ER 図エディタ(簡易)

10. ユーティリティ/おまけ(91-100)

91.ストップウォッチ・タイマー・ポモドーロ
92.クリップボード履歴(localStorage)
93.メモパッド(自動保存・検索)
94.URL 短縮プレビュー(リダイレクト先確認・fetch)
95.JSON Web 検査(API レスポンスを貼って整形)
96.抽選ツール(リストからランダム選択)
97.投票/アンケート結果集計(CSV取り込み)
98.テキスト読み上げ(Web Speech API)
99.音声入力 → テキスト(Web Speech API)
100 ホワイトボード(Canvas 手書き・PNG保存)

0
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?