AI × 個人開発：2ヶ月で「Draw.io＋Cacoo/200」をReactで作った話

初めまして。Zenn初投稿です。

2ヶ月で「Draw.ioとCacooを足して200で割ったアプリ」をReactで作った話です。ポエムはNoteに（ChatGPTがあることないこと）書いたので良ければ。

きっかけ

小さなSIerにいるんですが、いつまで経っても仕事でAI使う機会が出てず（大丈夫かSI業界）、ChatGPT-4oみて流石にマズいなと思い、個人開発で試したというところです。

Clineが良さそうですが、まずはスタンダードにGithubCopilot + ChatGPTでどれだけ効率変わるか、実際触って試してました。

あと、図形エディタのような高頻度なレンダリングにReactが耐えれるか試したかったのもあります。

できたもの

何かできるって段階にはまだ至ってないんですが、それらしく動くようになっています。それがこちら。

機能は大体こんな感じです。

• 四角形・円・線の作成
• 図形の移動・回転・拡大縮小・反転
• 図形内へのテキスト入力、文字サイズ・色・アライメントの変更
• 図形の塗りつぶし・枠線のスタイル変更
• 線分の頂点の追加・移動（※削除作るの忘れてた）
• グループ化およびグループ単位での変形
• 図形同士の接続（※時々千切れる不具合あり）
• Undo/Redo機能（※未完成・不安定）
• AIによる図形の自動作成（※実験的・非公開）

作っているうちにAI使う前のスピード感忘れてきましたが（今後見積ミスりそう...）、少なくとも効率が2〜3倍になったと思います。もっとかも。

ちなみにライブラリは基本Reactのみです。移動・変形・回転・反転等々全部自分で書いてます（この辺はAIもあんまりやってくれなかった）。
現状のdependencies。classnamesは使ってないけどいつの間にか居ました記憶がない。

"dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "classnames": "^2.5.1",
    "openai": "^4.91.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
},

Reactは高頻度描画に耐えれたのか？

答えはYes/Noのどちらでもありました。DOMの直接操作はせずに済んだのですが、メモ化をしても「dependencies array」の評価が地味に重く、以下のように「dependencies array」は空配列にして、参照をuseRefでバイパスしないと耐えられませんでした。

// Create references bypass to avoid function creation in every render.
const refBusVal = {
    id,
    items,
    startOwnerId,
    endOwnerId,
    autoRouting,
    onDiagramChange,
    canvasStateProvider,
};
const refBus = useRef(refBusVal);
refBus.current = refBusVal;

...

/**
 * Handle Path component change event.
 */
const handlePathChange = useCallback((e: DiagramChangeEvent) => {
    // Bypass references to avoid function creation in every render.
    const { onDiagramChange } = refBus.current;
		
    onDiagramChange?.({
    	...e,
    	endDiagram: {
    		...e.endDiagram,
    		autoRouting: false,
		},
	});
}, []);

アンチパターンではあると思いますが意外と可読性は下がらなかったので、高頻度な描画にはこの参照をパイパスするやり方が思います。ちなみにDOMを直接操作するのは複雑化しすぎてナシでした。

今後

直近は図形エディタとしての機能を作っていきますが、将来的には図形を書く感覚でAIエージェントだったりワークフローを組めるようにしたいなと、今のとこは思ってます。Difyでいいじゃんって話ですが、AI技術の進化は予測困難だと思うので、少なくとも必要であろうUIの基盤は自分で持っておきたいなと思っています。