今年の2月にGitHub Copilotを使い始めたのをきっかけに、およそ10ヶ月間、AIを活用したコーディングを続けてきました。
開発していたのは、JSONで構造を持つAIネイティブな作図アプリケーションです。
まだまだPre-Alpha版ですが、ある程度形になってきたのと、今年ももうすぐ終わるので、ここまでの振り返りを兼ねて紹介します。
作ったもの
まずコードがこちらです。
https://github.com/gznnk/json-draw-prealpha
そして、実際に動かせるものがこちら。
https://gznnk.github.io/json-draw-prealpha/
Pre-Alpha版なので、コードが整理されていなかったり、UIが未完成だったり、バグがあったりしますが、作図アプリケーションとしての基本的な機能はあらかた実装しています。
何を目指したのか
このアプリケーション開発で目指したのは、主に以下のポイントです。
- AIとの親和性: AIを前提とし、AIでも扱いやすいJSON形式で図形データを保存する。
- AI開発の限界への挑戦: AIによる補助により、個人開発でどこまで大きく複雑なアプリケーションを作れるか試す。
他にも以下のような技術的な興味や検証項目がありました。
- ライブラリを極力使用せず、AIの力を借りて自前で実装することで、ライブラリの制約に縛られない設計にする。
- Reactでどこまで描画性能を引き出せるか。
- 1枚のキャンバス上ですべての情報を管理するのは便利なのか。
- そもそも作図アプリケーションはどうやって作るのか。
JSONはAIと相性が良かったのか？
結論として、相性は良いと感じています。
YAMLの方が適しているという意見も見かけますが、私が試した限りでは、JSONでも問題なく理解できていました。
デモで表示してるのは以下のJSONです。デカいので注意。
https://github.com/gznnk/json-draw-prealpha/blob/main/data/sample.json
例えば（実際にデモを見ていただきたいのですが）、4つある画面デザインのうち右下のものは、その上の図形データをもとにHTML化したものです。各要素の位置や色が高い精度で再現されており、AIがJSONの構造をしっかり理解していることがわかります。
また、左下にある画面デザインは、同じデザインをVSCode上でClaudeに依頼してデザインテーマを変更してもらったものです。これは色を変えるだけなので難易度は低いとは思いますが、JSONの加工も十分可能であることが予感されます。
ここはデータ構造の問題というよりはコンテキストウィンドウとの戦いになるため、LLM側の進化を待つか、AIがJSONを分割して理解できるように周辺環境を整える必要があると考えています。
他にもシーケンス図を見て、ちゃんとシーケンス（順序や構造）も理解できていますし、フォーマットはJSONで良いと感じています。
モデルはGPT-5を使っていて、API Keyを入力すれば誰でも試せるので、興味ある方はぜひ触ってみてください。
「選択中の図形は何か？」「図形の色を変えて」「図形を追加して」など、自然言語でいろいろ試せます。
個人開発でどこまで作れたか
Pre-Alpha版のコード量は以下の通りです。
Total : 1273 files, 71738 codes, 9935 comments, 7130 blanks, all 88803 lines
これを10ヶ月間、日中の仕事や家事・子育ての合間にコツコツと開発してきました。費やした時間は概ね500時間くらいでしょうか。
1時間あたり約143行のコードを書いた計算になります。
AIによる生成が当たり前の今となっては少なく感じるかもしれませんが、初めて作る作図アプリケーションであり、何度も構造を見直しながら作ってきたことを考えると、効率的に開発できたと感じています。
実装した機能は以下の通りです。
- 図形の移動、拡大縮小、回転
- 重なり順変更、グループ化、複製、削除
- 属性変更（色、線の太さなど）
- 複数図形の選択
- 元に戻す・やり直す（Undo/Redo）
- ズームイン・ズームアウト、慣性スクロール
- エッジ接続、エッジの自動ルーティング
- AI Workflow
- AIによる図形生成支援
などなど。他にも細かな機能はありますが、本業でのトラブル対応（火消しに追われた1年でした...）などもあり、細かい部分は記憶が曖昧です。
実際に作ってみて痛感しましたが、作図アプリケーションは1枚の画面に多くの処理を詰め込む必要があり、非常に難易度が高かったです。
開発初期は、慣れない幾何学的計算をAIに教えてもらったり、代わりに書いてもらうことで、AIがない場合に比べて格段に効率よく進められることができました。しかし、ある程度慣れてきて、シビアな状態管理やパフォーマンスチューニングが必要なフェーズになると、AIだけでは解決できないことが増え、ほとんど自力で解決することになりました。
この10ヶ月を通じて感じたのは、現在のAI（LLM）は結局のところ「尤もらしい文章製造機」であるということです。「尤もらしい文章製造機」で解決できそうな領域と、そうでない領域を見極め、適材適所で使うことが重要だと感じました。
とはいえ、『脳の大統一理論』などを読むと「人間の脳も推論しているだけ」という話もあり、もしかしたらあとは個々の推論をどう組み合わせるかだけの問題なのかもしれない、とも思ったりします。このあたりは来年検証してみたいなと思っています。
今後
開発を通じて分かったもう一つのこととして、「1つのキャンバス上にすべての情報を詰め込むのは無理がある」という点があります。
性能的な問題というより、単純に情報が整理しきれず、ぐちゃぐちゃになってしまうためです。
最近仕事でMiroを使っているのですが、大概散らかっているので、これは作図アプリケーション全般に言える課題かもしれません。
そのため、今後は1ヶ所にまとめる方針を改め、ファイル単位で分割する方向で開発を進めていこうと思っています。
ファイルエクスプローラーを真面目に作るとこれまた時間かかりそうなので、VSCodeの拡張機能にしてしまうのもありかなと思っています。
ということで引き続き来年もコツコツ進めていこうと思います。