ツールの概要
こんにちは。JUNOTAです。
今回は、AIと協働でコーディングをするときに使えるツールを作ったのでご紹介します。
ツールの名前は「コード統合ツール」です。
▶コード統合ツールを使ってみる
フォルダ内にある複数のコードファイルを読み込んで、ひとつのテキストファイルにまとめることができます。
このツールで作ったテキストファイルをAIと共有することで、プロジェクト全体の構成や現在のコードを一度に伝えることができます。
例えば、
「○○という機能を追加したいのですが、どうすればいいですか？ 現状のコードは添付ファイルの通りです。」
と伝えて統合したファイルを添付すると、現在のコードを踏まえて、どこをどのように書き換えればよいか提案してもらえます。
僕自身、AIと一緒にWebツールなどを作るときに使っています。
ツールを作った経緯
AIと協働でコーディングをしていると、こんなふうに思うことが度々あります。
「あれ？ こいつ、現状の全体像を見失ってないか？」
突然、存在しないファイル名を挙げてきたり、「おそらく、こんなふうに書いてあるはずです」と、実際のコードを確認せずに話を進めようとしたりすることがあります。
AIはいつでもプロジェクト全体のコードを把握しているわけではないので、現在の状態を改めて共有する必要があります。
そんなとき僕はこれまで、いくつにも分かれたファイルをひとつずつアップロードして、AIに現在のコードを伝えていました。
ファイルの数が少ないうちはそれでもいいのですが、プロジェクトの規模が大きくなってくると、毎回アップロードするのがだんだん大変になってきます。
「フォルダを丸ごと渡して、現在のコードを一発で伝えられたら楽なのにな」
と思ったことから作ったのが、この「コード統合ツール」です。
フォルダを指定すると、その中にあるコードファイルを読み込んで、ひとつのテキストファイルにまとめてくれます。
どのファイルに何が書かれているのか分かるように整理した状態で出力するので、作成された統合データをひとつAIに共有すれば、複数のファイルをひとつずつアップロードする必要がありません。
AIとのコーディング中に、
「いったん現在のプロジェクト全体を見てもらいたい」
というときに使うためのツールです。
このツールで出来ること
「コード統合ツール」でできることは、とてもシンプルです。
プロジェクトのフォルダを選択すると、そのフォルダ内にあるコードを読み込み、ひとつのテキストにまとめます。
たとえば、プロジェクトの中に
index.html
style.css
script.jsという3つのファイルがあった場合、それぞれのファイル名とコードの内容を整理したうえで、ひとつのテキストとして出力してくれます。
さらに、.gitやnode_modules、distなど、AIとのコード共有には必要ないことが多いフォルダは自動的に除外します。
対象になったファイル数やデータ容量、除外されたファイルも画面上で確認できます。
作成した統合データは、そのままコピーすることも、テキストファイルとして保存することもできます。
AIに現在のプロジェクト全体を見てもらいたいときには、保存したテキストファイルをアップロードして、
「このプロジェクトの現状は添付ファイルの通りです」
と伝えればOKです。
使い方
使い方は簡単です。
まず「フォルダを選択」を押して、AIと共有したいプロジェクトのフォルダを選択します。
フォルダを選択すると、自動的にコードが読み込まれ、
- 対象になったファイル
- 除外されたファイル
- ファイル数
- データ容量
- 統合後のテキスト
が表示されます。
内容を確認したら、「テキストを保存」を押してください。
すると、
プロジェクト名-combined.txtというテキストファイルが保存されます。
あとは、このファイルをChatGPTなどのAIに添付します。
例えば、
「このプロジェクトに○○という機能を追加したいです。現状のコードは添付ファイルの通りです。どのファイルをどのように変更すればいいですか？」
というように質問すると、プロジェクト全体の構成を踏まえたうえで提案してもらいやすくなります。
もちろん、保存せずに「コピー」ボタンから統合されたコードをそのままコピーすることもできます。
仕組み
このツールは、選択されたファイルをブラウザ上で読み込んで処理しています。
選択したコードをサーバーへアップロードして処理しているわけではありません。
そのため、基本的には自分のPC内で
フォルダを選択
↓
ブラウザがコードを読み込む
↓
ひとつのテキストに統合
↓
保存またはコピーという処理が完結します。
また、すべてのファイルを無条件に統合すると、画像や動画、ライブラリなど大量の不要なデータまで含まれてしまいます。
そこで現在は、HTML、CSS、JavaScript、JSON、Pythonなど、主にコードとして使われるファイルを対象とし、それ以外のファイルは除外する仕組みにしています。
除外されたファイルについては、画面上で理由を確認できます。
公開ページ
「コード統合ツール」は以下のページで無料公開しています。
インストールなどは必要ありません。
ブラウザからそのまま使うことができます。
また、このツールを含め、AIと協働して作ったツールは、以下のページにまとめて公開しています。
今後も、自分で使うために作った小さなツールを少しずつ追加していく予定です。
おわりに
最後までお読みいただきありがとうございました。
Webツールのほか、漫画・ZINE・アニメーションなども制作しています。
制作物の一覧はJUNOTA作品倉庫にて公開中です。ぜひ見てみてください！
