ShopifyがShop.appを構築した方法：Remix成功事例

Shopは、ユーザーが商人を発見し、購入を行い、さまざまな配送サービスでの注文を追跡できるShopifyの人気モバイルアプリです。2023年初頭、ShopifyはShopをウェブに持ち込むことを決定し、ネイティブアプリと機能的に同等のものを目指し、ウェブプラットフォームの独自の利点を活かすことを目指しました。この決定は、より多くのユーザーを獲得し、迅速なフィードバックループを作成し、迅速な実験と改善を可能にする可能性に基づいていました。

Shopifyは、Shop.appの構築にRemixをフレームワークとして選択しました。その理由はいくつかの重要な要素に基づいています。まず、RemixのReactとの互換性により、チームは既存のReact Nativeアプリからロジック、スタイル、UXを再利用できました。次に、Remixは、Apollo Clientを使用したデータ取得など、チームの既存のパターンに対応する柔軟性を提供しました。さらに、RemixはUXとSEOを改善するためのサーバーサイドレンダリングなどの重要な機能を提供しました。このフレームワークの適応性は、Shop.aiという小規模プロジェクトで最初に証明され、チームはShop.appプロジェクトにおけるRemixの能力に自信を持ちました。

Remixを使用したShop.appの開発は、ShopのiOS、Android、ウェブバージョンのソースコードを含むShopifyの既存のモノレポ構造を活用しました。このセットアップにより、既存のマーケティングページの移行が簡素化され、ネイティブ開発者とウェブ開発者の間でのコラボレーションが容易になりました。Remixの柔軟性により、既存のインフラストラクチャとのシームレスな統合が可能になり、チームは迅速に開発を開始できました。チームはわずか3か月で初期製品ページを立ち上げ、Remixの迅速な開発サイクルを示しました。

チームが直面した課題の一つは、最初は約9秒かかっていた遅いホットモジュール置換（HMR）時間でした。この問題は、Remixの新しいViteプラグインを採用することで解決され、HMR時間は2.3秒に改善されました。さらに、Tailwind CSSのビルドプロセスを並列化することで、HMR時間は驚異の0.1秒に短縮されました。この90倍の開発速度の改善は、チームの生産性と迅速な反復能力を大幅に向上させました。

Remixを使用してShop.appを成功裏に開発したことは、いくつかの重要な成果を示しました。チームは、シンプルなマーケティングサイトを数百万のユーザーにサービスを提供する完全なウェブアプリケーションに迅速に変換することができました。Remixの柔軟性により、既存のパターンやライブラリの統合が可能になり、Remix特有の機能を段階的に採用するオプションも提供されました。このプロジェクトは、プロジェクトの制約や目標に合った適切なツールを選択する重要性を強調しました。最終的に、ShopifyのShop.app構築におけるRemixの経験は、短期間で複雑でスケーラブルなウェブアプリケーションを効率的に開発するためのフレームワークの可能性を示しています。