Shopify Checkout拡張の“役割分担”を理解する

Shopifyは2022年より、オンラインストアのチェックアウト領域を大幅にアップデートし、企業向けECに求められる柔軟性と拡張性を実現してきました。

これはCheckout Extensibilityという新しい拡張モデルとして段階的に公開され、エンタープライズECに求められる柔軟性と安全性を大幅に強化してきました。

その中心となる技術が Checkout UI Extensions と Shopify Functions です。

両者は「Checkoutをカスタマイズする」という目的は共通しつつも、実行環境・制約・役割が根本的に異なるため、誤って選択すると設計全体が崩れかねない重要な技術です。

本コラムでは、Checkout UI Extensions と Shopify Functionsの最新の技術仕様（2024–2025）に基づき、両者の性質と使いどころを、比較表をもとに整理します。

1. Shopify Checkout Extensibility (チェックアウト拡張機能)の全体像

ShopifyのCheckout Extensibilityは、以下の技術で構成されています：

• Checkout UI Extensions（UI拡張）*Shopify Plus限定

• Shopify Functions（ロジック拡張）

• Branding API（ブランディング変更）*Shopify Plus限定

• Web Pixel Extensions（アクセス解析）

• Payments Extensions（決済方法の拡張）

このうち、実際のプロジェクト要件の中心となるのが UI Extensions と Functions です。

重要な制約：Checkout UI Extensionsの中でも、Information（情報入力）、Shipping（配送方法）、Payment（支払い方法）ステップでの拡張はShopify Plusプラン限定です。Thank you（注文完了）ページとOrder status（注文状況）ページは全プランで利用できます。

2. Checkout UI Extensions：顧客体験を拡張する技術

Checkout UI Extensions は、その名の通りチェックアウト画面に表示されるUIを拡張するための技術です。

■ どこで動くのか？

ブラウザ上の安全な隔離環境（サンドボックス）で動作します。これにより、Shopifyのチェックアウト本体に影響を与えることなく、安全にUI要素を追加できます。

■ 開発に使う技術

• Preact（JavaScriptフレームワーク）が標準

• 2025年10月以降、Preactが推奨技術となりました

■ 外部サービスとの連携

外部のAPIを呼び出すことができます。ただし、設定ファイル（shopify.extension.toml）でnetwork_access = trueを指定する必要があります。

また、呼び出し先のサーバーがCORS（クロスオリジン）に対応している必要があります。

参考：Checkout UI Extensions Configuration

■ セキュリティ上の制約

• APIキーなどの機密情報をブラウザ側に置くことはできません

• 顧客情報の取得には専用の仕組み（Session Token）を使用します

■ 主な用途

• 配送オプションに追加の説明を表示

• ギフトラッピングの選択UI

• 配送予定日の表示

• カスタム入力欄の追加 など

「見た目」や「入力」に関わる部分を担当する技術、と理解するとわかりやすいでしょう。

3. Shopify Functions：ビジネスロジックを拡張する技術

一方、Shopify Functions は、チェックアウト処理のバックエンドロジックを拡張するための仕組みです。 

■ どこで動くのか？

Shopifyのサーバー上で動作します。ブラウザではなく、Shopifyのインフラ内で実行されるため、高速で安全です。 

■ 開発に使う技術

• Rust、JavaScript、Goなどのプログラミング言語で開発

• ShopifyはRustを推奨（最も高速で、5ミリ秒の制限内に収まりやすい）

• コードは最終的にWebAssembly（Wasm）という高速実行形式に変換される

■ Functionsの種類：なぜ複数のAPIがあるのか？

Shopify Functionsは「何をカスタマイズするか」によって、複数のAPIに分かれています。

割引を計算したいのか、配送方法を制御したいのか、決済方法を変更したいのか、注文を検証したいのか——カスタマイズする対象が異なれば、必要なデータ（入力）と返すべき結果（出力）も根本的に異なります。

例えば：

• Discount Functionは「どの商品にいくら割引するか」という結果を返す

• Delivery Customization Functionは「どの配送方法を表示・非表示にするか」という結果を返す

• Validation Functionは「この注文はOKか、NGか」という結果を返す

このように、各APIは特定の役割に特化した入力と出力の型を持つため、別々のAPIとして提供されています。

主なFunctions API：

• Discount Function API：商品割引・注文割引・配送割引を統合管理

• Delivery Customization API：配送方法の表示・非表示、並び替え

• Payment Customization API：決済方法の表示・非表示、並び替え

• Cart and Checkout Validation API：注文の検証とチェックアウトのブロック

• Cart Transform API：カート内商品の表示方法の変更（バンドル表示など）

なお、これらのFunctionsはチェックアウト時に自動的に実行され、複数のFunctionsを組み合わせて使うことも可能です。

■ 外部サービスとの連携

• 基本的には外部通信不可（セキュリティとパフォーマンスのため）

• Shopify Enterprise（最上位プラン）限定で、一部のFunctionsのみ外部API呼び出しが可能

  • 例外：Pickup Point Delivery Option Generator（ピックアップポイント配送）はShopify Plusプランでも早期アクセス可能（リクエストベース、申請が必要）

■ 厳格な制約

チェックアウトの速度を守るため、非常に厳しい制限があります：

• 実行時間：5ミリ秒以内（0.005秒）

• メモリ：10MB

• プログラムサイズ：256KB以下

この制限により、どんなに複雑な計算でもチェックアウトが遅くならない設計になっています。

■ 主なユースケース

• カスタム割引ロジック（Buy X Get Y「3つ買うと1つ無料」など）

• 配送方法の表示順序の変更や条件付き非表示

• 支払い方法の制御

• カート内容のバリデーション（例：法人顧客は最低1万円以上の注文が必要）

4. UI Extensions と Functions の違い（比較表）

 

5. 実例で理解する使い分け

UI Extensionsの実装する例

例1: ギフトメッセージ入力欄の追加 

チェックアウト画面にギフトメッセージの入力欄とギフト包装の選択チェックボックスを追加します。入力内容はカート属性として保存され、注文情報に含まれます。Functionsは不要です。

例2: 配送予定日の表示

外部APIから配送見積もりを取得し、「○月○日到着予定」と表示します。情報の表示だけなので、Functionsは不要です。

例1: ボリュームディスカウント（Buy 3 Get 1 Free）

「同じブランドの商品を3点購入すると、最も安い1点が無料」という割引を実装します。

• 使用API: Discount Function API

• 実装内容: カート内容を解析し、条件に合致する商品の割引を自動計算

• なぜFunctionsを使うか: 価格計算ロジックの変更が必要で、Shopifyのサーバー側でしか実行できない

例2: 最低注文金額のバリデーション

「法人顧客は最低10,000円以上の注文が必須」というルールを実装します。

• 使用API: Cart and Checkout Validation Function API

• 実装内容: 顧客タグとカート金額をチェックし、条件未達時はエラーを返してチェックアウトをブロック

• なぜFunctionsを使うか: サーバー側で確実に検証し、回避不可能なビジネスルールを強制するため

例3: 配送方法の条件付き制御

「北海道・沖縄への配送は、重量10kg以上の商品は通常配送のみ」というルールを実装します。

• 使用API: Delivery Customization Function API

• なぜFunctionsを使うか: Shopifyの配送オプション表示ロジックそのものを変更する必要がある

 

6. どちらを選ぶべきか？

― 両者は「競合」ではなく「補完」の関係 ―

結論として、UI Extensions と Functions は 役割がまったく異なる技術です。

• UI Extensions = 顧客体験のための技術

• Functions = ビジネスロジックのための技術

エンタープライズ規模のECでは、「UIはExtensionsで」「計算ロジックはFunctionsで」というように、両者を適切に組み合わせることが成功の鍵になります。

フラッグシップでは、要件と制約の双方を踏まえ、UI・ロジック・外部連携のバランスが取れたCheckout拡張アーキテクチャをご提案しています。

お問い合わせはこちら

---

参考

About network access for Shopify Functions

Shopify Function API リファレンス

Checkout UI Extensions 設定ドキュメント

Shopify Unite Insights: What's coming next for your Shopify store?

Shopify公式 UI Extensions React パッケージ（@shopify/ui-extensions-react）