Shopify、React Nativeからネイティブ開発へ回帰

Native is now the future of mobile at Shopify

私たちは2020年にReact Nativeに全面的に注力することを決定し、それは非常に成功しました。一度だけ機能を作成することで多くの時間を節約でき、モバイル開発の経験がない開発者もアプリに貢献できるようになり、常に機能の同等性を追いかけることから解放されました。

2025年1月、私はReact Nativeの将来は明るく、Shopifyは引き続き投資する計画であると書きました。それは当時の私たちの知識に基づけば真実でした。React Nativeは私たちにとってうまく機能しており、優れたフレームワークであり続けています。しかし、それ以来、コーディングモデルは劇的に改善され、私たちのアプリとチームにとって、SwiftとKotlinで同じ機能を作成するコストはもはや以前ほどではなくなりました。

私たちは、一時的に成功したという理由だけで決定に固執しません。中心的な前提が変わったとき、私たちは立ち返ってそれがまだ正しい判断であるかを問い直すことを厭いません。LLMは、2020年の決定の根拠となった中心的な前提の1つを変えたため、私たちはゼロからモバイルスタックを再評価しました。

その結果、私たちはネイティブ開発へと回帰することになりました。

ネイティブ開発への回帰理由

2020年にネイティブからReact Nativeへ移行した理由は3つあります。

• 同じ機能を二度作るのをやめる
• 開発者がスタックを横断して作業できるようにする
• 機能の同等性を追いかける時間を減らし、価値を提供する時間を増やす

React Nativeは一貫してこれらのメリットを提供してくれました。私たちは、パフォーマンスの最適化、React Nativeの主要な基盤領域の改善、フレームワークのアップデートや外部依存関係の追従に多くの時間とリソースを費やしましたが、これらは許容できるトレードオフでした。React Nativeを使用するメリットは、これらの領域に費やす必要のある投資をはるかに上回っていました。

Shopifyは2021年（ChatGPTより1年前！）からLLMを使用してソフトウェアを構築してきました。当初は、機能の実装、バグの調査と修正、コードレビューに使用していました。モデルが改善するにつれて、私たちが信頼して任せられる作業の複雑さも増しました。2025年後半には、LLMは単にコードをより速く書くのを助けるだけでなく、ソフトウェアを二度作るということが、必ずしも二倍の作業を意味するのかどうかを疑問視させる能力を持つようになっていました。

私たちはモバイル技術スタックを再評価することを決定し、技術選択がまだ通用するかどうかを確認するためにプロトタイピングを開始しました。LLMを使用して、私たちの最大のアプリのいくつかのコア部分をSwiftとKotlinで再構築したところ、その効果の良さに驚きました。エージェントは以下のことが可能になりました。

• iOS版を参考にAndroid版で機能を実装する、またはその逆も可能
• 開発者がプライマリスタック以外の領域でも迅速に習熟し、効果的に貢献できるように支援する
• 共有仕様、テスト、レビューチェックポイントを通じて、プラットフォーム間の同等性を維持するコストを劇的に削減する

ネイティブ開発は依然として2つのプラットフォームでソフトウェアを構築・維持することを意味し、そのコストがなくなったわけではありません。しかし、エージェントが実装、翻訳、テスト、レビュー作業の多くを行えるようになったため、2020年当時のような決定的な要因ではなくなりました。

React Nativeアプリは高速になり得ます。私たちのアプリもそうです。私たちは、エージェントが実装の共有の利点を減らした一方で、各プラットフォーム向けに構築する利点は依然として残っているため、この変更を行っています。ネイティブ開発は、プラットフォームの機能とファーストパーティのツールに私たちをより近づけ、コードとプラットフォームの間のフレームワークや依存関係のレイヤーを少なくします。

React Nativeオープンソースライブラリの将来

移行方法に入る前に、この移行をクリーンに行いたいと考えています。当初から、React Nativeをより良くするために貢献したいと考えていました。私たちは、それぞれのカテゴリでトップの選択肢となったオープンソースライブラリを公開してきました。コミュニティからの素晴らしい反響に感謝しており、この移行がスムーズで驚きのないものになるよう尽力します。

React Native Skia

Shopifyは2026年末までこのライブラリのスポンサーを継続し、William Candillon氏はそれ以降も開発を続けます。彼は数ヶ月以内にリポジトリをフォークし、新しい名前でライブラリの発行を開始します。この移行が完了すると、元のリポジトリはアーカイブされます。移行期間中は随時アップデートを投稿し、皆様が移行する十分な時間を確保できるようにします。このライブラリに依存している場合は、スポンサーになることをご検討ください。

FlashList

このライブラリは週に約200万ダウンロードされており、React Nativeで高性能なリストをレンダリングする際のデフォルトとなっています。エコシステムにとって非常に重要であるため、Shopifyは互換性を壊す重大なバグの修正を継続します。現在、FlashListの長期的な管理を引き継ぐ複数の企業と協議中です。ご興味のある方は、こちらから私にご連絡ください。

Restyle

Restyleは他のライブラリよりもユーザーベースが小さいため、このリポジトリはアーカイブします。2026年末までは動作し続けますが、その後はメンテナンスを停止します。誰でもフォークして引き継ぐことができます。もしチームが引き継ぎたい場合は、お手伝いします。

移行方法

Shopifyにはいくつかの大規模なアプリがあります（Shopify、Shop、Point of Sale、Inbox）。世界中の何百万ものマーチャントとバイヤーが、生計を立てたり、愛するブランドから商品を買い求めたりするために、毎日これらのアプリに依存しています。

段階的にネイティブへ移行する（ブラウンフィールド）か、ゼロから再構築する（グリーンフィールド）かで議論しました。過去にReact Nativeへ移行した際には、いくつかの最大規模のアプリでブラウンフィールドアプローチを選択しました。それらを書き直すには何年もかかり、書き直し中は新機能のリリースを停止する必要があったからです。

しかし、今回はグリーンフィールドが以下の理由で明確な勝者となりました。

• LLMは、React Native版を参考にSwiftとKotlinで機能を構築するのが得意です。
• 過去の制約なしに、最良の方法で再構築するためのクリーンなスタートが得られます。
• プロトタイプは、コーディングエージェントが登場する前よりも大幅に速くこれらのアプリを再構築できることを示しました。

アプリストアのショッピングカテゴリで常に上位にランクインしているShopアプリが、最初に移行されました。AIの支援により、チームはわずか12週間で概念実証から完全に再構築されたネイティブアプリをアプリストアで公開することができました。この移行については、こちらで詳しく説明しています。

Shopifyアプリ（300以上の画面、ホーム＆ロック画面ウィジェット、Apple Watchアプリ、コンプリケーション、Siriショートカットなどを持つ、私たちの最大のアプリ）の移行も進行中であり、今年後半にリリースされる予定です。残りのアプリもすぐに移行されます。

スロップ（不整合）の防止

LLMにReact Nativeのコードベースを指示して、ネイティブで同じ機能を一度で作り上げようとするのは魅力的ですが、うまくいきません。事前にできるだけ多くの情報を収集し、それを仕様、タスクファイルに固定してから実装するように指示しても、最終的には ship できない、メンテナンス不可能なコードの山ができあがります。

この問題に対処するために、私たちはHelixというシステムを構築しました。これはより段階的なアプローチを取ります。最初の出力が正しいとは期待せず、不完全な試みが良い結果になるまで前進できないループを構築します。

開発者はHelixに画面を指示します。HelixはReact Nativeコードを読み取り、数分でレビューできるチェックポイント（作業の小さく順序付けられたスライス）のシーケンスを提案します。次に、チェックポイントごとに構築を進めます。各チェックポイントは、テストでその動作を証明し、視覚的なレビューで実行中のアプリと一致し、2人の敵対的なコードレビュー担当者を通過し、人間の承認を得てからコミットされ、次のチェックポイントが開始されます。各レビューからのフィードバックは記憶されるため、移行が進むにつれてループはより自律的になります。

［画像］**HelixがSwiftとKotlinを使用してShopifyモバイルアプリの画面を再構築している様子

このアプローチは非常にうまく機能しており、アプリを fraction of the time で再構築することを可能にしています。

高速なフィードバックループの実現

シミュレータのエージェント制御はボトルネックとなっていました。エージェントが reliably にビルド、テスト、イテレーションできなかったため、私たちは常に監視する必要がありました。私たちは、エージェントがバグを再現し、修正し、その修正を自律的に検証できるようにするツールを構築しましたが、それは遅く、脆いものでした。React Nativeのホットモジュールリロードは状況を改善しますが、シミュレータ制御が遅いため、問題を解決しません。これは主に、アプリの状態を取得し、アクションを実行し、結果を検証するために、アクセシビリティツリーやスクリーンショットに依存しているためです。エージェントは数秒でコード変更を行えますが、その結果をテストするには数分かかります。これにより、イテレーションが非常に遅く、手動になります。モデルがどれほど優れていても、作業を迅速にテストできなければ意味がありません。これはモバイルでは特に困難です。

私たちは、人間とエージェントの両方で機能するようにアプリアーキテクチャを設計することで、これを解決しています。ここでのコア原則は、ビジネスロジックがUIから完全に分離され、デスクトップでヘッドレスで実行できる必要があるということです。次に、エージェントがシミュレータを介さずにミリ秒単位でイテレーションできるようにするCLIを介して、それをエージェントに提供します。

CLIを使用してアプリをナビゲートし、アクションを実行する

CLIを使用すると、エージェントはアプリの状態を検査し、異なるセクション間を移動し、UIに触れることなくすべてのアクションを実行できます。これにより、非常に高速なフィードバックループが実現し、エージェントは数時間連続して自律的に作業できます。

シミュレータの操作が必要な場合、CLIはリモートモードを介してシミュレータに接続し、レイアウトやアクセシビリティツリーを検査することなくコマンドを介してUIを駆動できます。これにより、非常に高速なパフォーマンスとE2Eテストが可能になります。

これはリアルタイムです（早送りではありません）

今後の展望

私たちは、プロセス全体を通じてAIを活用し、すべてのモバイルアプリをSwiftとKotlinに移行します。Shopアプリはすでに完全にネイティブアプリとしてリリースされており、Shopifyアプリは現在進行中であり、残りのアプリもすぐに続きます。私たちは迅速に進んでいますが、基準を下げることはありません。すべての再構築は、人々が今日期待するパフォーマンス、安定性、アクセシビリティ、製品品質と同等以上を満たす必要があります。これは単に異なる言語で書き直された同じアプリではありません。私たちは、人間とエージェントの両方が迅速に理解、テスト、変更できるように再構築しています。

移行はゴールではありません。成功とは、私たちのチームがこれまで以上に迅速に、マーチャントとバイヤーにより良いエクスペリエンスを提供できることを意味します。私たちはこれを、製品のベロシティ、アプリの品質、そしてエージェントが自律的に完了できる作業量を通じて測定します。

私たちは、Helix、エージェント対応アーキテクチャ、そしてエージェントでモバイルアプリを構築する方法についての詳細な分析を含め、この過程で学んだことを共有します。私たちはReact Nativeから学んだことをオープンに共有しましたが、この移行についても同様にオープンでありたいと考えています。

これは、私たちが取り組んできた最も野心的なモバイルエンジニアリングプロジェクトの1つです。Shopifyの次世代モバイルアプリの構築に貢献したい場合は、モバイルエンジニア、インフラストラクチャエンジニア、そしてAIとソフトウェアエンジニアリングの交差点で働く開発者を募集しています。

謝辞

ネイティブ開発は現在Shopifyにとって正しい選択ですが、React Nativeは2020年のShopifyにとって正しい選択でした。その成功は、それを実現した人々のおかげでしかありませんでした。

Meta

MetaのReact Nativeチームの皆様、フレームワークの優れた管理者として、私たちのフィードバックに耳を傾け、長年にわたり緊密に協力してくださったことに感謝します。皆様のアーキテクチャ、パフォーマンス、ツール、コミュニティへの投資のおかげで、React Nativeは今日、格段に優れたものになっています。

William Candillon

React Native Skiaを作成し、私たちの想像をはるかに超えるレベルまで発展させてくれたことに感謝します。あなたはReact Nativeにおけるグラフィックスとアニメーションの可能性を再定義しました。次にあなたがどこへ向かうのか、楽しみにしています。

Software Mansion

Reanimatedに関する皆様のすべての作業、私たちのフィードバックに耳を傾け、アプリにおける最も困難なアニメーションとパフォーマンスの問題の一部を解決するのを助けてくれたことに感謝します。

Shopifyエンジニア

何百人ものエンジニアが、React Nativeの採用、アプリの移行、共有基盤の構築、パフォーマンスの向上、統合の維持、エコシステムへの貢献に貢献しました。多くの方々が初心者に戻り、長年の前提に疑問を投げかけ、マーチャントとバイヤーのためにリリースを続けながら、この移行を成功させました。感謝します。

React Nativeコミュニティ

私たちのオープンソースライブラリを使用してくれた方々、コードを提供してくれた方々、問題を報告してくれた方々、私たちの決定に異議を唱えてくれた方々、そして学んだことを共有してくれた方々、すべてに感謝します。皆様の貢献とフィードバック（辛辣なものも含め）は、私たちの仕事をより良いものにしてくれました。

過去6年間に築かれたツール、教訓、人間関係は、今後もShopifyでモバイルアプリを構築する方法を形作っていくでしょう。その一部であったすべての人々に深く感謝しています。