便利は自分で作る時代！非エンジニアが「バイブコーディング」でツールを自作してみた

2026.3.17

欲張って「Claude Code」にも手を出した結果

Geminiとの壁打ちで「文字数チェッカー」が無事に動いた時は感動したものの、ある別の「痛み」に私は気づいてしまいました。それは人間（私）の「手作業（コピペ）」が最大のボトルネックになるということです。

実は、さっきの数分の作業の中には「Markdownの『```javascript』まで一緒にコピペして動かなくなったとGeminiに泣きつく私」「background.js に manifest.json の中身を上書きしてしまって、謎のエラーを出した私」など、お恥ずかしい失敗が隠れているのです。

AI自体は賢いのに、「AIからエディタへコードを移す人間の手作業」がバグを生み出している！でも「やっぱりエンジニアじゃないからなあ」で終わるようでは、AIを使う意味がない！

それにそもそも、AIが数秒で書いた完璧なコードを、わざわざ私がエディタを開いて、ファイルを作って、1文字のミスもなくコピペするの……結構ダルくないか？

Geminiは優秀なコンサルタントですが、最終的な「実装作業」をするのは私。このままでは私はAIの「人間クリップボード」になってしまいます。それも相当へなちょこの……。

先ほどの体験が楽しかったからこそ、欲が出ます。そこでコピペの手作業すら丸投げできると噂の「Claude Code」に手を出してみることにしました。もくろんだのは、文字数チェッカーをはるかに超える複雑なツールです。

すなわち「現在開いている長文サイトから見出しを抽出し、Chromeのサイドパネルに目次を自動生成してほしい」というものです。

できればめちゃめちゃ便利だけど、manifest.json だけではなく、バックグラウンド処理、UI側のHTML、ページを解析するスクリプトなど、複数のファイルがからむ「初心者の手作業なら絶対にバグる」構成だと思います。

本記事では、以下の環境で検証を行いました。

OS・端末： Windows 11（Surfaceを使用）
実行環境：ウェブブラウザ（Google Chrome）

必須となる事前準備として、GitHubの導入があります。AI（Claude）にウェブ上でコードを書かせる際、生成されたコードを保存・管理するための「保管庫」として利用するものです。

Claude Codeから要求されるままにGitHubのアカウントを作成し、ツールと連携させましたが、これによりウェブブラウザひとつで本格的なバイブコーディングが可能になりました。

Claude Codeとのやり取りはこんな感じです。

「現在開いているウェブページのh1〜h3タグを抽出して、Chromeのサイドパネルに目次として一覧表示する拡張機能を作って」

何やら生成し始めるClaude Code

数秒後、Claude Codeは「完成しました。/home/user/toc-extension/ （私が設定したフォルダ）に以下のファイルが作成されています。」とサラッと言います。そこにはすでにリンクし合ったファイル群がありました。

すぐにファイル群が生成された

私はコピペすらしていません。Claude Codeが私のPCの中に直接手を入れて、プロジェクトを構築したかのようです。しかもインストール手順まで案内してくれるホスピタリティ。

生成したファイルのインストール手順まで説明された

出来上がった拡張機能をChromeに読み込ませ、Wikipediaを開くと目次が表示されます。よしよし。

……ところが、最新の技術ブログやモダンなウェブサービスを開くと、サイドパネルが真っ白のままなことも。最近のサイトは、ページが開いた直後は空っぽで、後から非同期（JavaScript）で中身を描画している場合もあります。また、きれいな見出しタグ（<h1>など）ではなく、ただのブロックレベル（<div class="title-text">など）のようなタグを見出しとして使っているサイトもわんさかあるのです。以前の私なら、面倒くさくて泣いていたでしょう。

でも、今の私にはClaude Codeがいます。再び「雑な丸投げ（プロンプト）」を打ち込みます。

「Wikipediaでは動いたけど、モダンな技術ブログだと目次が出ない。非同期読み込み（SPA）で後から表示される見出しや、hタグじゃなくて特定のクラスがついたdivタグを見出しとして使っているサイトでも拾えるように、コードを改修して」

私の丸投げに応えようとするClaude Code

Claude Codeは自ら、先ほど自分が作ったJavascriptファイルを読み込み、文脈を理解し、複数ファイルを一気に自動で書き換えました。

もう、どこに何を書くかという「コードの管理」さえ、私が手を触れる必要がないのです。

「ここが不便だ、直して」と指示を出すだけで、AIが勝手にコードを保守・改修していく。私はコピペ作業員から、プロジェクトを統括する「現場監督」へ、勝手にステップアップしていたのです。

Geminiが「指示書をくれるコンサルタント」だとしたら、Claude Codeは「PCの中に直接手を入れて作業する実務担当者」です。

プロンプトを打つだけで、AIが勝手にファイルを作成し、コードを書き込み、エラーが出たら自らログを読んで自己修復する様子に驚きます。

ウェブブラウザからGitHubと連携させて動かすと、AIは「手」となり、PCの中の指定したフォルダ内にファイルを書き込む権限を持ちます。

人間が「文字数チェッカーを作って」と指示すれば、Claude Codeはユーザーの「手」となって勝手に manifest.json と background.js のファイルを作成し、正しいコードを直接書き込んでくれるというわけです。人間はもう、エディタを開いてコピペする必要すらないのです。

「やったことがない」で済ますのは惜しい、AI時代の「丸投げ」の正体

コマンド1つで、AIが勝手に複数ファイルを構築し、エラーを自己修復していくのを見ていると、AIに対して「もっとこうしてほしい」「これもできるのでは？」という「欲」が次々と湧いてきます。そして面白いことに、AIは人間が欲を出せば出すほど、いい感じのシステムを組み上げてくれるのです。

「プログラミングなんてやったことがないから」とずっと思っていたけれど、AIが「最強の手（実行環境）」を持った今、その言い訳はあまりにも惜しいことではないでしょうか。

ただし、私はこの記事で「AIに丸投げした」と書いてはいますが、「どこに痛み（不便）を感じているか」「その痛みを、どんな体験（UI/UX）で解決したいか」といった「コアとなるアイデア」だけは、AIには絶対に思いつけないものです。

日常の解像度を上げ、ペインを見つけ出し、最初の「思いつき」を言葉にするのは、人間の仕事です。

これからも、日常のささいな「思いつき」や「欲」を大切に、そして、AIたちと壁打ちしながら、その思いつきを最高に「いい感じ」の形にデプロイし、「あったらいいな」を形にしたいと思います。