開発者やエンジニアリーダーの方々と話す際によく受ける質問の一つが、「Shopifyアプリケーションとは正確には何か、また構築にはどのようなツールや技術が必要か」というものです。もう一つ、「Shopifyアプリの開発経験がなくても問題ないか」という質問も頻繁に寄せられます。
これらの疑問にお答えするため、Shopifyアプリケーション開発におけるさまざまな技術的側面を詳しく解説していきます。
Shopifyのカスタム開発をご検討中の方は、当社のShopifyエキスパートにご相談いただくか、フリーランスプラットフォームでShopifyスペシャリストをお探しください。
ShopifyアプリとWebアプリの比較
私たちの見解では、Shopifyアプリケーションは標準的なWebアプリケーションとほぼ同様に機能しますが、APIを通じてShopifyプラットフォームと密接に連携している点が特徴です。これにはいくつかの意味合いがあります。
- Shopifyアプリの構築には、Webアプリと同じ技術を使用できます。特定の技術に限定されることはありません（ただし、特定の技術を使うことで開発が容易になる場合もあります。これについては後述します）。
- 通常、バックエンドとフロントエンドの両方を構築する必要があります。
- アプリケーションのホスティングと運用は、開発者が責任を負います。
- Shopifyによる承認後、リリースプロセスも完全に開発者の管理下にあります。
マーチャント（加盟店）の視点から見ると、ShopifyはShopifyアプリと同様にSaaS（Software-as-a-Service）であると言えます。つまり、マーチャントはアプリをインストールする際に、コードを一切操作する必要がありません。
Shopifyアプリケーションの構成要素
Shopifyアプリケーションには、通常3つの論理的な構成要素があります。
- マーチャント管理画面
- Webhook処理
- 顧客向けアプリケーション（ストアフロントUI）
この3つのうち、最後のものは必須ではありません。マーチャントに提供したい機能によって異なります。例えば、当社のアプリCandy Rackはこれら3つの要素すべてで構成されていますが、Loyalは最初の2つの部分のみで構成されています。
マーチャント管理画面
マーチャント管理画面は、マーチャントがアプリケーションの設定や構成を行うダッシュボードです。Shopifyは、マーチャント管理画面をShopifyインターフェース内で提供すること（いわゆる埋め込みアプリ）を推奨しています。これは、iframeを使用してアプリをShopify管理画面に埋め込むことを意味します。
埋め込みアプリケーションには、いくつかの制限があります。
- 認証の仕組みにより、シングルページアプリケーション（SPA）アーキテクチャの使用がほぼ前提となります（TurbolinksやInertia.jsを使用すれば部分的な回避策も可能です）。
- フロントエンドの記述にはReactを使用するのが効率的かもしれません。Shopifyが提供するライブラリがあるためです。Polaris UIライブラリは、Shopify管理画面の他の部分と一貫したUXを保証し、App Bridgeは、iframe内で実行されているアプリケーションにShopifyのコンテキストデータを提供するフロントエンドブリッジとして機能します。
マーチャント管理画面は、アプリとマーチャントの最初の接点でもあり、インストールプロセスが行われる場所でもあります。インストールとは基本的に、OAuthを通じてマーチャントのストアデータにアクセスする権限を取得することを意味します。
また、アプリケーションが有料の場合、課金を管理する場所でもあります。
Webhook処理
Webhookは、注文の新規作成や商品の更新など、ストアで発生するさまざまなイベントをShopifyがアプリケーションに通知する仕組みです。どのイベントを購読するかは、開発者が決定します。
受信したイベントに基づいて実行されるビジネスロジックは、必ずバックグラウンドワーカーで処理するようにしてください。そうしないと、アプリケーションに過度な負荷がかかる可能性があります。また、イベントの受信をアプリケーション外に委譲することも検討してください。
顧客向けアプリケーション（ストアフロントUI）
アプリケーションがShopifyストアフロントを拡張する場合（ストアの顧客に新しい機能を提供するなど）、ストアフロントにアプリケーションを「挿入」する必要があります。そのためには、APIを通じてShopifyにJavaScriptリソースをストアフロントに注入するよう指示します。主な手法として、Script TagとApp Embed blockがあります。また、App Blocks（App sectionsとも呼ばれます）を使用して、ストアフロントのテーマを視覚的なコンポーネントで直接拡張することも可能です。
顧客向けアプリケーションの開発は、プロセス全体の中で最も困難な部分かもしれません。通常、ストアフロントのデフォルトの動作を拡張または上書きすることになります。その際、さまざまなShopifyテーマやストア設定で動作すること、そして予期せぬ状況で不具合が発生しないことを確認する必要があります。さらに、他のサードパーティ製アプリが干渉してくる可能性も常に考慮しなければなりません。
ストアフロントUIは、アプリのパフォーマンスとサイズにも注意を払うべき場所です。
Shopifyアプリ開発の進化
Shopifyアプリの構築は基本的にWebアプリケーション開発であると前述しましたが、それは半分しか正しくありません。2021年、Shopifyはチェックアウト拡張機能という概念を導入しました。それ以前は、Shopifyアプリでチェックアウト機能を拡張することは不可能でした。この点において、開発体験はWebアプリとは異なります。非常に制限された環境（あらかじめ用意された特定のReactコンポーネントセットのみ使用可能など）で動作し、ビルドやリリースのプロセスもShopifyによって管理されるためです。
将来的には、Shopifyがサードパーティ製アプリをより詳細に制御するために、他の領域でもこのアプローチを採用する可能性があります。その結果、Shopifyアプリ開発はWebアプリ開発からさらに乖離していくでしょう。
Digismoothieの技術スタック
DigismoothieがShopifyアプリの構築に使用している技術をご紹介します。
私たちが使用している技術の詳細については、ナレッジベースをご覧ください。
結論
技術的な観点からShopifyアプリを構築するとはどういうことか、またどのような技術が使用できるかをご理解いただけたなら幸いです。
最後に、冒頭の質問に戻りましょう。Web開発の経験を持つエンジニアが、Shopifyアプリを開発するチームに参加することは問題でしょうか？答えは間違いなく「いいえ」です。現代のWebアプリケーション開発の概念と技術を深く理解していれば、すぐに適応できるはずです。ShopifyのエコシステムやAPIに関する知識は、段階的に身についていくでしょう。
