1. はじめに
本記事では、JavaScript 初心者である私が、OpenAI の ChatGPT を活用して、ChatGPT 用の Chrome 拡張機能『ChatGPT Ctrl+Enter Sender』を開発した過程を紹介します。
ChatGPT を使用してプログラムを生成する際の Tips や苦労などを共有し、この記事が皆様の技術開発に役立つヒントやアイデアを提供できれば幸いです。
また、ぜひ以下のリンクから私が ChatGPT と作成した拡張機能を試してみてください。
- 以下の Chrome Web Store page から拡張機能を利用できます
- GitHub リポジトリ
- 紹介記事：ナポリタン寿司様のブログで取り上げていただきました
2. 拡張機能について
2.1. 開発のモチベーション
Enter キーで改行したかった。
これに尽きます。Slack 教なので「Enter は送信、Ctrl+Enter で送信」でないと気が済みませんでした。
特に私はエンジニアという特性上、ChatGPT にプログラムの質問をする際に改行を多用するため、改行を Shift+Enter ⇒ Enter に変更してストレスをなくすことによる恩恵が絶大です。また、日本語入力では変換を確定する際に Enter を押す必要があるため、英語話者よりもこれに悩まされる人が多いと考えています。
これらの問題を解決するために、送信ショートカットキーを「Ctrl+Enter」に変更する拡張機能を開発することを決めました。また、筆者自身が JavaScript 初心者であったため、このプロジェクトを通してスキルアップを目指すという目標もありました。
2.2. 詳細説明
『ChatGPT Ctrl+Enter Sender』は、メッセージ送信のショートカットキーを「Ctrl+Enter」に変更するという非常にシンプルな拡張機能です。拡張機能のアイコンをクリックすることで、トグルボタンを使って簡単にオン/オフを切り替えることができます。この拡張機能は以下のページで使用することができます。
3. ChatGPT を使用した開発 Tips
ChatGPT Plus に入っておらず GPT-4 を使えなかったこともあり、苦労したことが何点かあったため共有します。
3.1. 最初に全体像を決める
「○○をするための拡張機能を作って」というだけだと微妙でした。まず最初にする質問は、「○○を実現するためには何が必要か？」がよいと思います。最初から成果物（プログラム等）を求めても、非常に小規模な開発では乗り切れるかもしれませんが、複数のファイルが関連している場合などは、考慮すべきファイル（例：manifest.json）が漏れていたりするので、特にその領域に知見がない場合うまくいきません。
当り前と言われればそれまでですが、要件定義のようなステップで要求を細分化することは、人間が開発を進める上でも、ChatGPT を使って開発する上でも共通して必要です。
3.2. ファイル単位で出力させる
トークン数関連の問題です。一度に複数のファイルを出力させようとすると出力が途中で切れてしまうことがあります。これに関して、「続きを書いてください」などと打つことで解決できると言っている記事もあり、確かに GPT-4 では比較的正確に続きを書いてくれます。しかし、無課金の GPT-3.5 では続きを生成する際に、回答を最初から書き直したり前後の整合性が取れないということが頻発しました。
そのため、3.1 の通りファイルごとの役割を明確にし、それを実現するためのプログラムを出力するように、と出力を細分化することで、比較的質の高いアウトプットを得られるようになりました。
3.3. 関数にまとめるのを意識する
こちらもまたトークン数関連の問題です。3.2 の延長ですが、ファイル単位に分割しても出力がトークン制限にひっかかる場合、関数にまとめ、それは完成しているものとしてプログラム関連の質問文から除外することが効果的だと感じました。
この関数にまとめるという作業まで ChatGPT を使えば簡単にできてしまうので便利ですよね。
3.4. トークン数で困ったら英語で質問する
色んな手を尽くしても前提として与えたいことが多すぎたり出力がトークン数の制限にひっかかったりする場合には、英語で質問しましょう。
日英翻訳ツールの代表例として DeepL がありますが、文脈によって適切に単語を使い分けてくれないので、最近は ChatGPT を使って翻訳しています。
3.5. ファイル・関数の役割分担は人間が把握する
記憶に関しては、現時点では ChatGPT は強くありません。作成したいプロダクトに対して全体を俯瞰して、そこから各ファイル、関数などのコンポーネントでは何が求められているか、ということは私たちが把握しておく必要があると感じました。ChatGPT へのプロンプトが曖昧だと良い結果が期待できなかったため、それをクリアな情報として与えるという意味でも、今取り掛かっている課題に対する守備範囲や他の要素との位置関係についてはツールに任せるというより、自分で把握できるようにしておくとよいと思います。
3.6. ラリーを短くする
記憶（トークン数）に関係する問題です。最近、ChatGPT の使い方に関する解説で、「一度のラリーで完成させようとするな。複数回のラリーで回答をブラッシュアップせよ。」とよく耳にします。これは特定のケースで適用できる助言かもしれませんが、今回の開発のように、①前提の説明 ②実装したいこと・発生している問題 ③使用しているプログラム といった多くの情報を与える必要がある場合、ラリーを重ねることで最初の質問の内容を ChatGPT は忘れます。これは ChatGPT が回答を作成する上で材料とする範囲に関してもトークン数が定められており、ラリーを続ける中で必要な情報がその範囲外に出てしまうことが原因だと考えられます。
これを防止するために、ラリーを短くするように気を付けました。具体的には、Regenerate response やプロンプトを編集して再実行する（新しいメッセージをできるだけ追加しない）とよいと思います。
4. まとめ
以上の工程を経て、JavaScript 初心者である私が ChatGPT を活用してChrome拡張機能『ChatGPT Ctrl+Enter Sender』を開発することができました。本記事では、作成した Chrome 拡張機能、そしてChatGPTを活用した開発Tipsを共有しました。
今回の開発で得られた知見が、皆様が ChatGPT を活用した開発を進める際の参考になれば幸いです。
この拡張機能を通じて、ChatGPT をより快適に利用していただけることを願っています。
リンク: