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

2026.3.17

誰しも「これぐらいは仕方がない」と放置してきた「ささいな不便」がたくさんあるのではないでしょうか。

例えば私の場合、ウェブ上でのリサーチやドキュメントの作成中、「ここのテキスト、何文字くらいだろう？」と確認したくなる瞬間がそれです。これまでは、そのたびに別タブで文字数カウントサイトを開き、コピペしていました。流れるようにできるほんの数秒の作業ですが、集中力はそがれます。チリも積もれば「業務の摩擦」、つまり痛み（ペイン）を生むのです。

しかし、わざわざ既存のツールを導入するほどではない、絶妙な不便さゆえ、まあいいか……と見過ごし続けてきました。

一方で、「私が不便だなと思うことは、地球上のどこかに同じように不便だと感じた人が必ずいるし、すでに解決できるようになっているはずだ」とも思います。

そして、その「解決策」へたどり着く方法は、今や検索エンジンではなくAIツールが適任だと思うのです。普段はチャットで私の不便を解消してくれているAIですが、自然言語（日本語）での対話でもコードが書けて、自分専用のツールを作れるというではないですか。

今回は、「バイブコーディング（Vibe Coding）」を用いて、日常のペインを爆速で解決したリアルな体験談をお届けします。

「右クリック文字数チェッカー」をGeminiと作る

バイブコーディングとは、自らコードの構文を書くのではなく、AIに「何をしたいか（要件）」を言葉で伝え、対話しながらシステムを構築していく手法です。「コーディングの知識はないけど、ノリ（vibe）でコードが書けちゃうよ」という感じでしょうか。

私は早速、日ごろから懇意にしているGeminiに向かってこう指示を出しました。

「ウェブブラウザ上で選択したテキストの文字数を、右クリックメニューから瞬時にカウントできるChrome拡張機能を作って」

Geminiはわずか数秒で、2つのコード（manifest.json と background.js）を出力してくれました。「これをどうすれば……？」と戸惑う私に、「フォルダを作って」「メモ帳にこれをコピーして」「名前はこうつけて」と、詳細な手順も教えてくれます。言われるがままにChromeに読み込ませるだけで、「欲しい機能」が「拡張機能」に昇華されました。

Geminiが教えてくれた作成手順は次の通り。

新しいフォルダ（例： word_counter ）を作り、2つのコードをメモ帳に貼るなどして、テキストファイルとして保存します。

Geminiが2つのコードを提示してくれるので、テキストファイルとして保存

保存したら、Chromeの拡張機能メニューから「拡張機能を読み込む」を選び、このフォルダを選択すれば、もう完了です。

試しに、適当なウェブサイトでテキストをなぞって右クリックすると、「選択したテキストの文字数をカウント」というメニューが出現しました。

「i4U」の記事で試してみた結果

クリックするとポップアップで文字数が表示されました。

ポップアップに表示された文字数

「小躍りしたいレベルで便利だ……」と思わずガッツポーズをした瞬間でした。

プロの洗礼と、数分で完了した「アジャイル改修」

「すっごい！見て！」とばかりに、この自作ツールをプログラミングにはちょっと詳しい有識者に見せたところ、即座にフィードバックが返ってきました。

いわく、「右クリックのコンテキストメニューは、Googleドキュメントなどサイト側が独自の右クリックメニューを実装している環境だと、競合して動かなくなるリスクがある。拡張機能のアイコン（ボタン）をポチッと押してカウントする仕様の方が、挙動が安定するよ」。

なるほど、確かにその通りです。これまでのシステム開発であれば、ここから再度要件を定義し直し、改修の工数とスケジュールを引き直すことでしょう。しかし、バイブコーディングの真骨頂はここからです。

私は再びGeminiに相談します。

「右クリックは動作が不安定なんだって。選択範囲のテキストを取得し、拡張機能のアイコンをクリックした時に文字数をポップアップするスタイルに書き換えて」

1分後、Geminiから修正版のコードが提示されました。

即時アップデート：安定版「ボタンポチ」文字数チェッカー

Geminiの指示は以下のとおりです。

先ほど作った「word_counter」フォルダの中身を、以下の2つの内容で上書きして保存します。Chromeの拡張機能画面で「更新（円の矢印マーク）」を押すだけで完了です。

1. background.js を開いて、中身を「すべて」消し、以下だけを貼り付ける

chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: {tabId: tab.id},
func: () => {
const text = window.getSelection().toString();
if (!text) {
alert("テキストが選択されていません。範囲を選択してからボタンを押してください。");
return;
}
const withSpaces = text.length;
const withoutSpaces = text.replace(/\s/g, '').length;
alert(`【文字数カウント】\nスペース含む: ${withSpaces} 文字\nスペースなし: ${withoutSpaces} 文字`);
}
});
});

2. manifest.json を開いて、中身を「すべて」消し、以下だけを貼り付ける

{
"manifest_version": 3,
"name": "文字数チェッカー（安定版）",
"version": "1.1",
"description": "選択したテキストの文字数を、アイコンクリックで安定してカウントします",
"permissions": [
"activeTab",
"scripting"
],
"action": {
"default_title": "選択テキストの文字数をカウント"
},
"background": {
"service_worker": "background.js"
}
}

これだけで仕様変更は完了です。Chromeブラウザの拡張機能に「文字数チェッカー（安定版）」が追加されます。