Skip to main content

Shopifyプラットフォームアーキテクチャ

Shopify上で効果的に構築するためには、プラットフォームがどのように構成されているかを理解する必要があります。Shopifyは世界最大のマルチテナント型SaaSプラットフォームの一つであり、あらゆる業種にわたる数百万のマーチャントを支えています。このレッスンでは、それを実現するアーキテクチャを探ります。

マルチテナント型SaaSアーキテクチャ​

Shopifyはマルチテナントアーキテクチャで動作しており、すべてのマーチャントが同じアプリケーションインフラストラクチャを共有しています。セルフホスト型プラットフォーム（WooCommerce、Magento）とは異なり、マーチャントはサーバー、データベース、デプロイを管理しません。

開発者にとってマルチテナンシーが重要な理由​

Shopify開発者として、マルチテナンシーは以下の点で影響します：

  • サーバーアクセスなし：ShopifyサーバーにSSHしたりシステム設定を変更したりできません。コードはサンドボックス環境（アプリ、テーマ、Functions）で実行されます。
  • 共有レート制限：APIレート制限がプラットフォームを保護します。アプリはマーチャントのストア上の他のすべてのアプリとリソースを共有します。
  • 保証された稼働時間：Shopifyがインフラストラクチャ、スケーリング、セキュリティを処理します。アプリはShopifyの99.99%の稼働時間SLAの恩恵を受けます。
  • 標準化されたデータモデル：すべてのストアが同じ商品、注文、顧客データモデルを使用します。一度学べば、どこでも使えます。
大規模なShopify

Shopifyは年間2,000億ドル以上のGMV（総流通額）を処理しています。Black Friday/Cyber Mondayなどのピークイベント時には、1回の週末で42億ドル以上を処理します。アーキテクチャはこのレベルのスケールに設計されており、あなたのアプリもそのインフラストラクチャを継承します。

3つのサーフェス​

Shopifyは、ユーザーが操作する3つの主要なサーフェスを公開しています。これらを理解することは、コードがどこで実行されるかを知るための基本です。

1. ストアフロント​

ストアフロントは、顧客がマーチャントのオンラインストアを訪問した際に目にするものです。2つの方法でレンダリングできます：

Liquidテーマ（Online Store 2.0）：デフォルトの方法です。ShopifyのサーバーがLiquidテンプレート言語を使ってHTMLをレンダリングします。テーマはLiquidテンプレート、CSS、JavaScript、アセットのコレクションです。これは最も一般的なアプローチで、大多数のShopifyストアで使用されています。

Hydrogen（ヘッドレス）：カスタムストアフロントを構築するためのReactベースのフレームワーク。HydrogenはStorefront APIを使用してデータを取得し、ShopifyのOxygenホスティングまたは任意のNode.jsホストにデプロイできます。完全なデザインの自由が必要なブランドに使用されます。

2. 管理画面​

Shopify管理画面は、マーチャントのバックオフィスです。商品、注文、顧客、設定、インストールされたアプリを管理する場所です。アプリ開発者として、あなたのアプリはApp Bridgeを使って管理画面内に埋め込みで実行されます。

管理画面の主要概念：

  • App Bridge：埋め込みアプリがShopify管理画面と通信できるJavaScriptライブラリ（ナビゲーション、モーダル、トースト通知、リソースピッカー）
  • Polaris：ネイティブに感じる管理画面UIを構築するためのShopifyのReactコンポーネントライブラリ
  • Admin API：アプリがストアデータを読み書きできるGraphQLおよびREST API
  • 管理画面エクステンション：管理画面のページに直接アプリの機能を追加するUIエクステンション（例：商品ページのカスタムフィールド）

3. チェックアウト​

チェックアウトはShopifyの最も保護されたサーフェスです。セキュリティとコンプライアンスの理由（PCI DSS）から、チェックアウトは厳密に管理されています。特定のAPIを通じて拡張します：

  • Checkout UIエクステンション：チェックアウトフロー内の指定されたエクステンションターゲットにレンダリングされるReactコンポーネント
  • Shopify Functions：チェックアウトロジック（ディスカウント、配送、決済方法、カート変換）をカスタマイズするWebAssemblyモジュール
  • 購入後エクステンション：支払い後、サンクスページの前に表示されるUI
チェックアウトは自由ではない

他のプラットフォームとは異なり、Shopifyのチェックアウトに任意のJavaScriptを挿入することはできません。これは意図的なもので、コンバージョン率、セキュリティ、パフォーマンスを保護します。エクステンションとFunctionsは安全な境界内で強力なカスタマイズを提供します。

Online Store 2.0​

Online Store 2.0（OS2.0）は、2021年に導入されたShopifyの現在のテーマアーキテクチャです。レガシーテーマシステムを、より柔軟でマーチャントに優しいアプローチに置き換えました。

OS2.0の主要機能​

  • JSONテンプレート：テンプレートはJSONで定義され、どのセクションをどの順序でレンダリングするかを指定します。マーチャントはコードを編集せずにセクションを追加、削除、並べ替えできます。
  • どこでもセクション：セクションは再利用可能で設定可能なコンテンツのブロックです。OS2.0では、ホームページだけでなく、すべてのページタイプでセクションが機能します。
  • ブロック：セクションにはブロックが含まれます。マーチャントがセクション内で追加・並べ替えできるより小さなコンテンツ単位です。
  • メタフィールド：商品、コレクション、注文、その他のリソースに付けられるカスタムデータフィールド。OS2.0でメタフィールドがテーマエディタでアクセス可能になりました。
  • アプリブロック：アプリはテーマブロックを登録でき、マーチャントがエディタを使ってテーマにドラッグ＆ドロップできます。

HydrogenとOxygen​

ストアフロントを完全にコントロールする必要があるマーチャント向けに、Shopifyはヘッドレスコマースソリューションを提供しています。

Hydrogen​

HydrogenはRemix上に構築されたReactフレームワークで、Shopifyストアフロント専用に設計されています。以下を提供します：

  • 商品、コレクション、カート、顧客アカウント用のShopify固有のフックとコンポーネント
  • 組み込みキャッシュと楽観的更新を備えたStorefront APIの統合
  • メタタグ、サイトマップ、構造化データを管理するSEOユーティリティ
  • 高速な初回ページロードのためのストリーミングSSR
  • すぐに使える完全なストアフロントを提供するスターターテンプレート

Oxygen​

OxygenはHydrogenストアフロント用のShopifyのホスティングプラットフォームです。主な利点：

  • グローバルエッジデプロイ -- ストアフロントが世界中の顧客に近い場所で実行される
  • 自動スケーリング -- 設定なしでトラフィックスパイクに対応
  • Gitベースのデプロイ -- mainにプッシュするとOxygenが自動的にデプロイ
  • 環境変数 -- シークレットを安全に管理
  • プレビューデプロイ -- すべてのブランチにプレビューURLが付与
HydrogenとLiquidの使い分け

Liquidテーマを使う場合：マーチャントが標準的なeコマース体験を必要とし、テーマエディタを使いたい場合、継続的なメンテナンスのための開発チームがない場合。

Hydrogenを使う場合：ブランドが完全にカスタムなデザインを必要とする場合、アプリのようなインタラクティビティが必要な場合、Shopify以外のデータソースを統合する必要がある場合、Reactに精通した開発チームがある場合。

ほとんどのストアにはLiquidテーマが適切です。Hydrogenはハイエンドブランド、マーケットプレイス、複雑なマルチソースストアフロントに最適です。

Shopify Functionsランタイム​

Shopify Functionsは、プラットフォームアーキテクチャの最新の主要な要素です。Shopifyのインフラストラクチャ上で実行される軽量でサンドボックス化されたプログラムで、コアコマースロジックをカスタマイズします。

Functionsの動作原理​

  1. エクステンションターゲット：コマースフローのどの部分をカスタマイズするかを選択（ディスカウント、配送料、決済方法、カート変換、注文ルーティングなど）
  2. 入力クエリ：Functionが必要とするデータを定義するGraphQLクエリを記述（カートの内容、顧客情報、メタフィールドなど）
  3. Functionロジック：JavaScriptまたはRustでカスタマイズロジックを記述。コードはWebAssembly（Wasm）にコンパイルされます。
  4. 出力：Functionがチェックアウトに適用される構造化されたレスポンスを返します。

Functionsは厳格なメモリ制限の下で5ms未満で実行されます。高速で安全に設計されており、ネットワークリクエスト、ファイルシステムへのアクセス、I/Oを実行できません。すべてのデータは入力クエリを通じて取得されます。

ScriptsからFunctionsへの移行

Shopify Scripts（Rubyベースのチェックアウトカスタマイズ）を保守している場合、Scriptsは非推奨であり、2026年6月に削除されます。すべてのScriptsをFunctionsに移行する必要があります。移行プロセスの詳細はShopify Functionsのレッスンで説明します。

すべてのつながり​

プラットフォームコンポーネントが互いにどのように関連しているかの全体像：

主なポイント​

プラットフォームアーキテクチャを理解することで、Shopify開発者としてのすべての判断のためのメンタルモデルが得られます：

  • マルチテナンシーはプラットフォームを拡張するものであり、インフラストラクチャを制御するものではない
  • 3つのサーフェス（ストアフロント、管理画面、チェックアウト）はそれぞれ異なるエクステンションメカニズムを持つ
  • Online Store 2.0はセクションとブロックを持つ柔軟でマーチャントが編集可能なテーマを提供する
  • Hydrogen + Oxygenは完全なコントロールが必要なブランド向けのヘッドレスストアフロントを実現する
  • Shopify Functionsは高速でサンドボックス化されたランタイムでコマースロジックをカスタマイズする

次のレッスンでは、Shopify APIの全体像を調査し、各タスクに適したAPIの選び方を学びます。