ーーWeb版ChatGPTの結果を“貼り付けるだけ”で安全にコード反映できる AI Folder Editor
最近のAIコードエディタ、便利ですよね。
- Cursor
- Windsurf
- Claude Code
- Cline
- Continue
などなど。
ただ、自分にはずっと不満がありました。
- API Key が必要
- 課金前提
そこで、自分の理想のAIエディタを作りました。
AI Folder Editor
こちらです。
GitHub Pages版（すぐ使える）
GitHub（ローカル運用向け）
※ ローカル版は File System Access API を使うため、サーバー環境で動かす必要があります。
コンセプト
このエディタの思想はかなりシンプルです。
「AIは ChatGPT のWeb版で十分」
です。
つまり、
- エディタ側でプロンプト生成
- ChatGPT を開く
- 貼り付ける
- 出力を貼り返す
- 差分確認して反映
これだけです。
API Key 不要
これがかなり重要でした。
最近のAIエディタは、
- OpenAI API Key
- Anthropic API Key
- 月額課金
などが必要なことが多いです。
でも個人的には、
「ChatGPT無料版で十分強い」
と思っています。
だったら、
- ChatGPTのページを開く
- 貼り付ける
- 出力を貼り返す
だけでいい。
その少しの手間と引き換えに、
- API Key不要
- 無料でも使える
- OpenAI側のUIもそのまま使える
- ChatGPT Plus にもそのまま対応
という構成のほうが好みでした。
使い方
1. フォルダを開く
「フォルダを開く」を押します。
ブラウザ上でローカルフォルダを直接編集できます。
2. ファイルを選ぶ
左のツリーから編集対象を選択。
3. AIへ依頼を書く
例えば、
この関数をリファクタしてください
など。
4. 「プロンプトをコピーしてChatGPTを開く」
押すと、
- 必要コードを自動収集
- ChatGPTを開く
- プロンプトをコピー
してくれます。
参照ファイルの自動収集
地味に便利な機能です。
現在のファイル中で参照されている名前を見て、
styles.css
utils.js
Player.cs
などを自動的にプロンプトへ含めます。
そのため、
「関連コードが足りない」
問題をかなり減らせます。
差分確認が超重要
このツールは、
AIに直接ファイルを書き換えさせません。
必ず差分確認を挟みます。
- 追加
- 削除
- 変更
をすべて確認できます。
しかも、
- 提案を採用
- 元のまま
をファイルごとに選択できます。
ここはかなり重視しました。
「不完全に読み込んだら反映しない」安全性
このツールには、
小さいですが安全機構があります。
AIの出力は、
OLD
既存コード
NEW
変更後コード
のような形式で扱われます。
しかし、
- OLD が現在コードに一致しない
- OLD が複数箇所に一致する
- JSONが壊れている
- Patch形式が崩れている
場合は、
処理を停止します。
つまり、
「AIが中途半端に壊れた出力をした」
場合に、
無理やり反映しません。
これはかなり重要だと思っています。
最近のAIツールは、
勢いでファイルを書き換えることが多いですが、
個人的には、
「不完全なら止まれ」
のほうが安心です。
実際かなり快適
特に便利だったのは、
- HTML/CSS/JS
- Unity C#
- 小規模Webツール
- リファクタ
- UI修正
です。
「ChatGPTに貼るだけ」
という割り切りが、
逆にかなり快適でした。
技術的にはかなり軽量
サーバーはありません。
ほぼブラウザのみです。
使っているのは主に：
- File System Access API
- Vanilla JavaScript
- 差分表示
- Patch解析
だけです。
まとめ
自分は、
「AIが全部やるIDE」
よりも、
「人間が確認しながら使うAI補助エディタ」
のほうが好きでした。
そして、
- API Key不要
- 無料でも使える
- ChatGPTそのものを使う
- 差分確認できる
- 壊れたPatchは止める
という構成が、
かなり理想に近かったです。
もし同じ思想の人がいたら、
ぜひ使ってみてください。
GitHub Pages版
GitHub