英語地獄に苦しむ国語教員が、Chrome拡張機能を作った話

※この記事は、note で公開した記事の転載です。元記事:https://note.com/naomistyle/n/n6c48296f07c4

日本語ならすらすら打てるが、英語になると・・・

国語の教員をしていると、英語を打つことがほとんどありません。

タイピングはローマ字入力なのですが、アルファベット配置を覚えてなくて、「に」だったら「に」と打てる動き、配置を覚えているのです。

なのでjapanと打つ時は、じっとキーボートを見ていましたｗ

そんな私が、ずっと地味に困っていたことがありました。

生成AIを活用するようになってから、英語を打つシーンが増えてきたことです。その最たるものがブログ＝WordPressの再構築でした。

WordPressの記事を書くたび、スラッグ（記事のURLに使う部分で、以前はパーマリンクと呼ばれていました）を日本語から英語にしなければならず、そのたびに固まっていたのです。

ファイルやデータの名前を英語表記にする時も同じでした。

Chrome拡張機能を思いつく

そこで、「日本語を入力したら、プログラミングで使う英語表記（Title Case、camelCase、snake_caseなど）に自動変換して、ワンクリックでコピーできる仕組みがあったら楽だな」と思いつきました。

まずGeminiに「こういうものは作れそうか」と聞いてみると、できるという返事。

ただ、以前少し拡張機能を触った経験があったAntigravity IDEというツールに、実際の開発をお願いすることにしました。

驚いたのは、まずその速さです。

思いついた15分後に、動くものが完成しました。

次に驚いたのは、私が細かい仕様も専門用語もほとんど使わず、素人丸出しの言葉で「こんな感じのものを作って」とお願いしただけなのに、こちらの意図をちゃんと汲み取って形にしてくれたことです。

AIエディタ（Antigravity IDE）が裏で考えていた「神対応」の秘密

そして三つ目は、完成後にAIとのやり取り（計画書）をGeminiに渡して評価してもらった時のこと。

専門用語を噛み砕いて解説すると、AIはこんなことを自動で考えてくれていたみたいです。

（１）「ただの直訳」ではなく「自然な英語」にする仕組みを勝手に選んでくれた
AIの判断：「辞書通りの直訳だと変な英語になっちゃうから、無料で手軽に使える翻訳エンジン（Google翻訳などの仕組み）を裏でコッソリ繋いでおくね！」

結果： APIキーなどの面倒な事前設定を一切することなく、「プロンプトビルダー」と入れるだけで自然な英語を引っ張ってきてくれるようになりました。

（２）プログラマーが涙を流して喜ぶ「表記バリエーション」を一瞬で一括作成
AIの判断：「プログラミングって、単語の繋ぎ方にいろんなルール（promptBuilder とか prompt_builder とか）があるんだよね。どれが必要かわからないから、ボタン1つで全パターンを一気に作って選べるようにしておこう！」

結果：入力した瞬間に6種類のプログラミング用表記（camelCase, snake_caseなど）がずらりと並び、好きなものをクリックするだけでコピーできる神仕様になりました。

（３）見た目（UI）も勝手に「モダンでかっこいいデザイン」にしてくれた
AIの判断：「せっかく作るなら、暗めの背景（ダークモード）で今風のツールの見た目にして、コピーした時に『コピーしました！』ってアニメーションが出たら気持ちいいよね！」

結果：開発知識がなくても、まるで市販のプロ向けアプリのような洗練されたデザインが一発で完成しました。

（４）過去に使った単語を覚えている「履歴機能」まで追加
AIの判断：「一度変換した単語、あとでもう一度使いたくなるかもしれないから、直近の履歴を保存しておく機能もつけておこう！」

結果：頼んでもいないのに「履歴タブ」まで実装されていました。

（５）実際に作られていたファイル（裏側の仕組み）を超ざっくり解説！
AIが自動で作ってくれたファイル群は、実はこんな役割分担になっていました。

manifest.json ：ツールの説明書（Chromeに「これはこういう拡張機能だよ」と教える設定ファイル）

popup.html ：画面の骨組み（入力欄やボタン、履歴の表示エリアなど）

popup.css ：画面の洋服・デザイン（黒基調のかっこいい見た目やアニメーション）

popup.js ：ツールの頭脳（日本語を英語に変えたり、ボタンを押したらコピーしたりする全処理）

icons/ ：ツールのアイコン（Chromeの右上に表示されるマーク）