9年前に作った React Native のチャートライブラリを、9年ぶりに 2.0.0 へアップデートして npm に公開しました。今回のアップデート作業の大半は AI エージェントが実行したので、その過程を共有します。
まずライブラリの紹介です。react-native-pure-chart は名前の通り「pure」であることがアイデンティティです。react-native-svg も、ART も、最近の標準になっている Skia も使わず、RN の純粋な View/Text コンポーネントだけでライン/バー/パイチャートを描きます。レンダリングの原理はこうです。2つのデータポイント間の距離と角度を三角関数で計算し、細長い View を rotate transform で回転させて線分のように見せ、このようなピースをつなぎ合わせてチャート全体を構成します。ネイティブの描画ライブラリを link したり、pod install の過程でビルドが壊れたりする心配なく、npm install の1行で使えること、つまり依存関係ゼロが中核的な価値です。ピーク時には npm の週間ダウンロード数が 2,000、約820プロジェクトで使われ、star は289でした。その後9年間放置され、最新の RN で動作するかどうかも分からない状態でした。
ちょうどもうすぐ上限がリセットされる AI アカウントが1つ残っていたので、昼休みにプロンプトを1つ残しておきました。
「git clone してあるので、最新の expo/RN 環境でちゃんと動くようにして。ハーネスのドキュメントを参照」
ここでいう「ハーネス」は、事前にセットアップしておいた自己検証環境です。Maestro のようなモバイル e2e ツールで iOS シミュレータと Android エミュレータを直接操作し、スクリーンショットを撮ってレンダリング結果を確認できるようにした構成です。今回の作業の核心はここにあります。
9年前の RN コードベースを最新の expo/RN で動作させるには、手を入れる箇所が多くあります。当時のコンポーネントの書き方や API がそのまま残っていたため、単なるバージョンアップではなく、実質的には現代化のリファクタリングが必要な状態でした。こうした作業は、それぞれの難易度は高くありませんが量が多く、1つ直すたびに実際の画面で壊れている部分がないか確認する必要があるため、人間が直接やるとかなり時間がかかる種類のものです。
私が別の作業をしている間、エージェントは数時間にわたってひとりでループを回していました。コードを修正し、シミュレータとエミュレータでアプリを起動し、e2e で画面を操作した後にスクリーンショットを撮り、そのスクリーンショットを見てレンダリングの問題を判定し、またコードを修正するという繰り返しです。この検証がコンパイルエラーやテスト通過のレベルではない点が重要です。チャートライブラリはビルドが成功しても、線がずれていたり軸が押し出されていたりすれば失敗です。正解が「画面に見えるもの」であるプロジェクトなので、スクリーンショットを判定基準にする視覚的リグレッションループが、ユニットテストでは確認できない部分を補ってくれました。
今回のバージョンで最も大きな変化は、曲線（スムーズライン）チャートのサポートです。実は9年前は曲線チャートをサポートできませんでした。直線は View 1つを回転させれば済みますが、曲線は区間を細かく分割して各ピースの座標と角度を計算し、短い線分で近似する必要があります。しかし当時は、ピース同士の間がわずかに途切れたり角張って見えたりする問題を解決できず、機能自体を入れませんでした。今回、エージェントは全体スクリーンショットの確認にとどまらず、曲線が途切れている疑いのある区間を拡大キャプチャして点検しました。そして、ピースの座標と角度の計算に使われる変数値を調整し、再レンダリングし、再び拡大して確認するサイクルを繰り返しました。パラメータを変えて結果を目で確認するチューニングループを人間が直接繰り返すと、どこかの時点で妥協してしまいますが、エージェントは収束するまで繰り返し続け、その結果として滑らかな曲線チャートが新機能として追加されました。9年前に実装できなかった機能が、今回入ったわけです。
結果として、最新の expo/RN 環境への対応、曲線チャートの新規サポート、README のチャートスクリーンショット更新、npm 2.0.0 のビルドと公開まで完了しました。9年ぶりのアップデートです。
今回の作業で感じたことです。エージェントコーディングのボトルネックは、モデル性能よりも検証環境にあると思うようになりました。結果を自分で確認できるハーネスが整っていれば、人間のレビューなしでも視覚的な品質まで収束します。特に UI ライブラリのように正解が画面上にあるプロジェクトでは、e2e 操作とスクリーンショット判定の組み合わせが効果的でした。レガシーの現代化のように、難易度は低いものの反復確認のコストが大きい作業は、エージェントに任せるのに向いたカテゴリになったように思います。
GitHub: https://github.com/oksktank/react-native-pure-chart
npm: https://www.npmjs.com/package/react-native-pure-chart
まだコメントはありません。