Strawberryブラウザが、13万行のReactコードをSvelteに完全移植した。移植期間はわずか2週間。LLMベースのコーディングエージェントを活用し、従来なら数ヶ月かかる規模の書き換えを短期間で実現。結果として、本番環境でのブラウザ速度は2倍に高速化した。
Strawberryの創業エンジニアがブラウザパフォーマンスに強い執着を持ち、Svelteが解決策だと確信。業務時間外の数晩と週末を使い、コーディングエージェントの「swarms」（複数エージェント）を動員して大規模書き換えを開始。60%の進捗を示した時点で、チームは続行を判断。その後、チーム全体で規則に沿った移植を進め、2週間で完了。
Reactはシングルページアプリケーション（SPA）には十分だが、ブラウザアプリケーションでは限界がある。Reactの仮想DOM戦略では、毎回レンダリング時に内部モデルを再構築し、実際のDOMとの差分を調整する。単体のウェブサイト程度なら無視できるが、ブラウザのように複数のUIレイヤーが並行動作する環境では、オーバーヘッドが複合化する。
StrawberryはUIコンポーネントごとに独立したレンダラープロセスを持つ（設定ページ、モーダル、ドロップダウンなど）。これらが同時に複数起動すると、メインプロセスからのイベントが全Reactアプリに波及し、レンダリングカスケードを引き起こし、高性能端末でも反応が鈍くなっていた。さらにAI機能がバックグラウンドで常時UI更新を発火し、コンポーネントツリー全体の再レンダリングを繰り返す—Reactには対象を絞った更新機構がない。Jotaiやzustandなどの状態管理ライブラリも「Reactの上に貼り付けたパッチ」に過ぎない。
Svelte 5のRunes機能は、ネイティブな細粒度リアクティビティを提供。プレーンなJavaScriptにコンパイルされ、変更があった部分だけ手術的に更新するため、ランタイムオーバーヘッドはゼロ。キーストロークやタブ開閉、メニュー操作——全てが瞬間反応する必要があるブラウザに最適。
エージェント駆動の移植を成功させるため、詳細なSvelte実装規則が不可欠だった。「$effectを避ける」「コンポーネント状態よりstoreを優先」「リアクティビティを明示的に保つ」など、厳密なガイドラインを設定。LLMがReactの習癖で$effectを多用しパフォーマンスを損なうのを防ぐための指針。
その後、機能単位で段階的に移植。まずタブ機能からスタート。コーディングエージェントにタブプロバイダーをReactから$state RuneベースのSvelteシングルトンクラスへ移植させ、入念にテスト。同じパターンを全13万行に繰り返す。移植ブランチには旧React実装（react-srcフォルダ）を保持し、エージェントの参照資料とした。
コーディングエージェントに厳密な指示を与え、細粒度なコード制御を実現。ルール機能を活用して、一人の開発者が従来は数年前のエンジニアチーム全体に相当する速度で作業を進められた。
本番環境での計測結果は明確：
このプロジェクトは、提案書作成より「動く実装」の方が早い時代への産業転換を象徴する。従来なら、大規模書き換えの検証に数週間のリスクを抱えていた。今はエージェントで概念実証（PoC）を作る方が、提案書を書くより安い。Strawberryチームは、型破りな判断で2週間での完成を引き出した。
この記事はAI業界の最新動向を速報でお届けする「AI Heartland ニュース」です。