2026年最新版として、実務ベースで厳選しています。
Shopify Scriptsは2026年6月30日(日本時間7月1日)に完全停止します。この日を過ぎると、Scriptsで動かしていたすべての割引・配送カスタマイズ・支払い方法の制御が一切機能しなくなります。
この記事では、こんな疑問・悩みにお答えします:
- 自分のストアでScriptsを使っているかどうか、どこで確認できる?
- Scriptsって何をやっていたの?Functionsとどう違う?
- エンジニアに頼まなくてもノーコードで移行できる?
- JavaScriptとRustのどちらで実装すればいい?
- 開発環境のセットアップから実装・デプロイまでの手順は?
- 新規ストアはどうすればいい?最初からFunctionsを使う方法は?
比較表はスプレッドシートに貼り付けたり、CSVでダウンロードしてチーム共有やクライアント説明にも活用できます。
🚨 期限が迫っています
- 2026年4月15日(経過済み):Scriptsの新規作成・編集が不可に
- 2026年6月30日:Scriptsの実行が完全停止
移行には最低でも1〜2週間の余裕が必要です。Plusストアで複数のScriptsを使っている場合は、今すぐ着手してください。
目次
- 1 まず確認:自分のストアはScriptsを使っている?
- 2 迷ったらこの判断フローで動く
- 3 【初心者・店舗オーナー向け】ScriptsとFunctionsを知るための基礎知識
- 4 Scripts → Functions 対応表(コピー・CSV対応)
- 5 【パターンB】ノーコードで移行する:アプリを使った移行手順
- 6 【パターンC】エンジニア向け:Functionsの実装手順
- 7 【パターンD】新規ストア・新規実装向けガイド
- 8 エンジニア目線でよくある失敗と対策
- 9 まとめ:あなたのパターン別チェックリスト
- 10 関連記事
- 11 Shopifyをこれから始める方へ
まず確認:自分のストアはScriptsを使っている?
確認方法(2ステップ)
STEP 1:管理画面から確認
Shopify管理画面 →「アプリ」→「Script Editor」を開きます。Script Editorアプリがインストールされており、かつ「アクティブ」なスクリプトが存在する場合は移行が必要です。
STEP 2:カスタマイズレポートを確認(推奨)
管理画面 →「設定」→「チェックアウト」→「カスタマイズレポート」から、現在稼働中のScriptsの一覧と、各Scriptsに対応するFunctions移行先が自動で表示されます。このレポートが移行作業の出発点になります。
Scriptsを使っていない場合は?
Script Editorをインストールしていない、またはアクティブなスクリプトがない場合は、今回の廃止による直接的な影響はありません。ただしFunctionsは新しい強力な機能なので、今後の実装の参考にこの記事を活用してください。
Scriptsは主にShopify Plus限定の機能でした。BasicやGrowプランで運営しているストアはほぼ影響を受けません。
迷ったらこの判断フローで動く
▼ あなたはどのパターン?
パターンA:Scriptsを使っていない・Plusプランではない
→ 今すぐの対応不要。新規でチェックアウトのカスタマイズが必要になったらFunctionsを使います。初心者向けセクションへ。
パターンB:Scriptsを使っているが、コードは触れない
→ ノーコード移行アプリを使う。エンジニアに依頼せずに移行できます。ノーコード移行セクションへ。
パターンC:Scriptsを使っており、自分でコードを書いて移行したい
→ Functionsを自作する。JavaScript(推奨)またはRustで実装します。エンジニア向けセクションへ。
パターンD:これから新しいストアを作る・新規機能を実装する
→ 最初からFunctionsで設計する。Scriptsは使わないでください。新規ストア向けセクションへ。
【初心者・店舗オーナー向け】ScriptsとFunctionsを知るための基礎知識
Shopify Scriptsとは何だったのか
Shopify Scriptsは、主にShopify Plusプランのみで使える、チェックアウト画面をカスタマイズするための仕組みです。Rubyというプログラミング言語で書かれた小さなプログラムで、以下のことができました:
- カートの合計金額に応じて自動で割引を適用(例:3万円以上で10%オフ)
- 特定の商品を購入したら別の商品を無料にする(BOGO:1個買ったら1個無料)
- 会員タグがついている顧客だけに送料無料を適用
- 金額が低い注文では代金引換を非表示にする
- 特定の配送会社を条件によって隠す・名前を変える
Shopify Functionsとは何か
Shopify FunctionsはScriptsの後継となる仕組みです。Scriptsと違い、Basicプラン以上のすべてのストアで使えます(ただしカスタム実装にはエンジニアが必要)。技術的にはWebAssembly(Wasm)という仕組みで動作し、実行速度が5ms以下と非常に高速です。
もっとわかりやすく言うと:
- Scriptsは「Plusだけが使えた特別な裏口」
- Functionsは「全プランに開放された正式な入口」
機能的にはScriptsと同じことができ、さらに多くのことが可能になりました。
廃止されたらどうなる?
2026年6月30日以降、アクティブなScriptsは何も通知なく実行されなくなります。具体的には:
- 「3万円以上で10%オフ」のScriptsがあれば → 割引が適用されなくなる
- 「送料無料」Scriptsがあれば → 通常送料が請求されるようになる
- 「代引不可」Scriptsがあれば → 代引きが再び選択できるようになる
いずれもお客様に直接影響が出るため、期限前に必ず移行を完了させてください。
Scripts → Functions 対応表(コピー・CSV対応)
どのScriptsがFunctionsのどの機能に対応するかの一覧です。
| Scriptsの種類 | 主なユースケース | 移行先 Functions API | ノーコード移行アプリ | プラン要件 |
|---|---|---|---|---|
| ラインアイテムスクリプト | BOGO・数量割引・タグ別割引・カート合計割引・無料ギフト | Product Discount Function Order Discount Function Cart Transform Function |
Kite: Discounts & Free Gifts Function Studio |
Basic以上 |
| 配送スクリプト | 配送方法の表示・非表示・名称変更・送料割引・条件付き送料無料 | Delivery Customization Function Shipping Discount Function |
Checkout Wiz Function Studio |
Basic以上 |
| 支払いスクリプト | 支払い方法の表示・非表示・並び替え・条件制御(代引不可など) | Payment Customization Function | Checkout Wiz Function Studio |
Basic以上 |
| (新機能) | カート内でのバンドル表示・ネストされたカートライン | Cart Transform Function | Fly: Bundles & Cross Sell | Basic以上 |
| (新機能) | チェックアウト前のカート検証(購入条件チェック) | Cart & Checkout Validation Function | Function Studio | Basic以上 |
※料金は2026年4月時点の情報をもとにしています。各アプリの月額費用は別途発生します。
【パターンB】ノーコードで移行する:アプリを使った移行手順
エンジニア不要で移行できるケースがほとんど
多くのScriptsのユースケースは、Shopify Functionsをベースに作られたノーコードアプリで置き換えられます。コードを書く必要はなく、管理画面上の設定だけで移行が完了します。
主要なノーコード移行アプリ
① Kite: Discounts & Free Gifts(ラインアイテムスクリプトの移行に最適)
- BOGO・無料ギフト・数量割引・カートベース割引に対応
- 顧客タグ・商品タグ・カート合計などの条件設定がUIで完結
- キャンペーンのスケジュール設定も可能
- Shopify Functionsの上に構築されているため、Scripts廃止後もそのまま動作
② Checkout Wiz(配送・支払いスクリプトの移行に最適)
- 配送方法の表示・非表示・名称変更をノーコードで設定
- 支払い方法の並び替え・条件制御(代引不可・BNPL制限など)に対応
- カート金額・商品タグ・顧客属性による条件指定が可能
③ Function Studio(複雑なロジックをビジュアルで設定)
- ディスカウント・配送・支払い・バリデーションをビジュアルフローで構築
- 複数の条件の組み合わせが必要な複雑なケースにも対応
- ScriptsからFunctionsへの移行専用モードあり
ノーコード移行の手順
- 管理画面の「設定 → チェックアウト → カスタマイズレポート」で現在のScriptsを確認
- 各Scriptsがどの機能(割引・配送・支払い)に該当するかを把握
- 対応するアプリをインストールし、同じ条件・ロジックを設定
- 開発ストアまたはテスト注文で動作確認
- 問題なければ元のScriptsを「非アクティブ化」(削除ではなく無効化が安全)
- 6月30日以降はScript Editorアプリをアンインストールしてよい
⚠️ 注意:ScriptsとFunctions(アプリ経由含む)は同一ストアで同時に動作できます。移行期間中は両方を並行稼働させ、新しいアプリの動作確認が取れてからScriptsを無効化するのが安全です。
【パターンC】エンジニア向け:Functionsの実装手順
開発前に知っておくべき全体像
Shopify FunctionsはShopifyアプリのExtension(拡張機能)として実装します。以下が全体の流れです:
- Shopifyパートナーアカウント・開発ストアを準備
- 開発環境(Node.js・Shopify CLI)をセットアップ
- アプリを作成し、Function Extensionを追加
- GraphQLでインプットを定義し、JS/Rustでロジックを書く
- ローカルでテストし、本番にデプロイ
- 管理画面でFunctionを有効化・設定
Functionsの11種類(API一覧)
| Function API名 | 主な用途 | Scripts対応 | プラン |
|---|---|---|---|
| Product Discount | 商品単位の割引(数量割引・タグ別・BOGO) | ラインアイテム系 | Basic以上 |
| Order Discount | 注文合計への割引(カート合計・会員別) | ラインアイテム系 | Basic以上 |
| Shipping Discount | 送料の割引・送料無料条件 | 配送系 | Basic以上 |
| Delivery Customization | 配送方法の表示・非表示・名称変更・並び替え | 配送系 | Basic以上 |
| Payment Customization | 支払い方法の表示・非表示・並び替え・条件制御 | 支払い系 | Basic以上 |
| Cart Transform | カートラインの変換・バンドル表示・アドオン処理 | 新機能 | Basic以上 |
| Cart & Checkout Validation | 購入前のカート検証(最低購入数量・購入条件) | 新機能 | Basic以上 |
| Order Routing | 注文のフルフィルメント先を条件でルーティング | 新機能 | Plus推奨 |
| Pickup Point Delivery | 受け取りポイントのカスタム表示 | 新機能 | Basic以上 |
| Local Pickup Delivery | 店舗受け取りオプションのカスタマイズ | 新機能 | Basic以上 |
| Fulfillment Constraints | フルフィルメントの制約定義 | 新機能 | Plus推奨 |
JavaScript vs Rust:どちらで実装する?
| 比較項目 | JavaScript / TypeScript | Rust |
|---|---|---|
| 学習コスト | 低(Shopify開発者なら即着手可) | 高(言語自体の学習が必要) |
| 実行速度 | ○(5ms以内で十分動く) | ◎(WASMへの直接コンパイルで最速) |
| Shopifyの推奨 | ほとんどのユースケースで推奨 | 複雑ロジック・高負荷時に有利 |
| インストール要件 | Node.js 18+ のみ | Node.js 18+ + Rustツールチェーン |
| Scriptsからの移行 | ◎(まずJSで移行が正解) | △(移行後にパフォーマンス改善が必要なら検討) |
結論:Scriptsからの移行はJavaScriptで始めてください。ほぼすべてのユースケースでJSで十分動きます。Rustは「JSで5ms上限に引っかかった」「特殊なロジックでどうしても重い」という局面で検討すれば十分です。
開発環境のセットアップ
以下のツールを順番にインストールしてください。
必要なもの
- Node.js 18以上(
node -vで確認) - npm または yarn
- Shopify CLI 3.x(
npm install -g @shopify/cli) - Shopifyパートナーアカウント(無料)
- 開発ストア(パートナーダッシュボードから作成)
インストール確認コマンド
# Node.jsバージョン確認
node -v
# → v18.x.x 以上であること
# Shopify CLIインストール
npm install -g @shopify/cli @shopify/app
# インストール確認
shopify version
実装の全体手順(JavaScript版)
STEP 1:アプリを作成する
# アプリ作成(プロジェクト名は任意)
shopify app init my-functions-app
# 作成したディレクトリに移動
cd my-functions-app
作成後、ターミナルでShopifyパートナーアカウントにログインするよう促されます。ブラウザで認証を完了してください。
STEP 2:Function Extensionを追加する
# Function Extensionを追加
shopify app generate extension
# 対話形式で以下を選択:
# Extension type → Function
# Function type → 実装したい種類を選ぶ
# 例:discount(割引)
# delivery_customization(配送カスタマイズ)
# payment_customization(支払いカスタマイズ)
# Language → JavaScript(推奨)
# Extension name → 任意の名前(例:volume-discount)
コマンド実行後、extensions/フォルダ内に以下のファイルが生成されます:
extensions/volume-discount/
├── shopify.extension.toml # Function設定ファイル
├── src/
│ ├── run.graphql # インプットクエリ(何のデータを受け取るか)
│ └── run.js # Functionのロジック本体
└── package.json
STEP 3:インプットクエリを定義する(run.graphql)
Functionが受け取るデータを定義します。以下は「カートの各商品・数量・タグ・顧客タグ」を受け取る例です:
query RunInput {
cart {
lines {
id
quantity
merchandise {
... on ProductVariant {
id
product {
tags
title
}
}
}
}
buyerIdentity {
customer {
hasTags(tags: ["vip", "member"]) {
hasTag
tag
}
}
}
}
}
STEP 4:ロジックを実装する(run.js)
以下は「カートに5個以上の同一商品があれば10%オフ」を適用するシンプルな例です(数量割引の移行例):
// @ts-check
/**
* @typedef {import("../generated/api").RunInput} RunInput
* @typedef {import("../generated/api").FunctionRunResult} FunctionRunResult
*/
/**
* @param {RunInput} input
* @returns {FunctionRunResult}
*/
export function run(input) {
const QUANTITY_THRESHOLD = 5; // 5個以上で割引
const DISCOUNT_PERCENTAGE = 10; // 10%オフ
const discounts = input.cart.lines
.filter((line) => line.quantity >= QUANTITY_THRESHOLD)
.map((line) => ({
targets: [
{
cartLine: {
id: line.id,
},
},
],
value: {
percentage: {
value: DISCOUNT_PERCENTAGE.toString(),
},
},
message: `${QUANTITY_THRESHOLD}個以上で${DISCOUNT_PERCENTAGE}%オフ`,
}));
// 割引対象がなければ何もしない
if (discounts.length === 0) {
return { discounts: [], discountApplicationStrategy: "FIRST" };
}
return {
discounts,
discountApplicationStrategy: "ALL",
};
}
STEP 5:ローカルでテストする
# 開発サーバーを起動(開発ストアと接続)
shopify app dev
# 別のターミナルで:Functionのユニットテスト実行
shopify app function run
# テスト用のJSONインプットをファイルで渡す場合
shopify app function run --input='{"cart":{"lines":[...]}}'
STEP 6:本番にデプロイする
# アプリをShopifyパートナーダッシュボードにデプロイ
shopify app deploy
# ※ --allow-updates フラグについて
# 2026年5月に --force フラグが廃止される予定(Winter '26対応)
# CI/CDに組み込む場合は --allow-updates を使用すること
shopify app deploy --allow-updates
STEP 7:管理画面でFunctionを有効化・設定する
デプロイ後、Shopify管理画面で設定が必要です:
- 割引Functionの場合:管理画面 →「ディスカウント」→「ディスカウントを作成」→ アプリから作成 → 作成したFunctionを選択 → 条件・割引率を設定して保存
- 配送Functionの場合:管理画面 →「設定」→「配送と配達」→「カスタマイズ」→ Functionを選択して有効化
- 支払いFunctionの場合:管理画面 →「設定」→「支払い」→「カスタマイズ」→ Functionを選択して有効化
STEP 8:元のScriptsを無効化する
Functionsの動作確認が完了したら、Script Editorのアクティブなスクリプトを無効化します。削除ではなく「非アクティブ化」にしておくと、万一の際に参照できます。
よくある実装パターン:Scripts別の移行コード例
パターン①:VIP会員に送料無料(配送スクリプトの移行)
旧Scriptsでは配送スクリプトのRubyコードで実現していたものを、Delivery Customization Functionで移行します。
// run.js - VIPタグがある顧客に「送料無料」以外の選択肢を隠す
export function run(input) {
const isVip = input.cart.buyerIdentity?.customer
?.hasTags?.some((t) => t.tag === "vip" && t.hasTag);
// VIPでなければ何もしない(全配送方法を表示)
if (!isVip) {
return { operations: [] };
}
// VIPには「FREE_SHIPPING」以外を非表示に
const hideOperations = input.deliveryGroups
.flatMap((group) => group.deliveryOptions)
.filter((option) => !option.code?.includes("FREE"))
.map((option) => ({
hide: { deliveryOptionHandle: option.handle },
}));
return { operations: hideOperations };
}
パターン②:金額が1万円以下の場合に代引きを非表示(支払いスクリプトの移行)
// run.js - カート合計が10,000円未満のとき代引き(COD)を非表示
export function run(input) {
const MIN_AMOUNT = 10000;
const cartTotal = parseFloat(
input.cart.cost.totalAmount.amount
);
// 合計が1万円以上なら何もしない
if (cartTotal >= MIN_AMOUNT) {
return { operations: [] };
}
// CODを含む支払い方法を非表示
const hideOps = input.paymentMethods
.filter((m) => m.name.includes("代金引換") || m.name.includes("COD"))
.map((m) => ({
hide: { paymentMethodId: m.id },
}));
return { operations: hideOps };
}
パターン③:3点購入で最安商品が無料(BOGO系・ラインアイテムスクリプトの移行)
// run.js - カートに3点以上あれば最安値商品を100%オフ
export function run(input) {
const lines = input.cart.lines;
const totalQuantity = lines.reduce((sum, l) => sum + l.quantity, 0);
if (totalQuantity < 3) {
return { discounts: [], discountApplicationStrategy: "FIRST" };
}
// 最安値の商品ラインを特定
const cheapest = [...lines].sort(
(a, b) =>
parseFloat(a.merchandise.price.amount) -
parseFloat(b.merchandise.price.amount)
)[0];
return {
discounts: [
{
targets: [{ cartLine: { id: cheapest.id } }],
value: { percentage: { value: "100" } },
message: "3点購入で最安商品が無料",
},
],
discountApplicationStrategy: "FIRST",
};
}
テスト・デバッグのポイント
① shopify app function runでインプットを渡してテスト
本番前にJSON形式でインプットを渡してFunctionの出力を確認できます。チェックアウトを開かずにロジックのテストが完結します。
② 開発ストアで実際のチェックアウトをテスト
shopify app devで開発ストアに接続した状態で、実際にカートに商品を追加してチェックアウト画面で動作を確認します。
③ ScriptsとFunctionsを並行稼働してパリティチェック
同じ条件で旧ScriptsとFunctionsの両方を動かし、まったく同じ結果が出ることを確認してから切り替えます。
④ 技術的な制限を頭に入れておく
- WASMバイナリサイズ上限:256KB
- 実行時間上限:5ms
- インプットクエリの複雑度上限:30ポイント
- Function同士の実行順序は固定(変更不可)
【パターンD】新規ストア・新規実装向けガイド
新規ストアはScriptsを使わない
2026年4月15日以降、新規でScriptsを作成・公開することはできなくなりました。新規ストアおよびこれから新たなチェックアウトカスタマイズを実装する場合は、最初からFunctionsで設計してください。
新規ストアの選択フロー
- コードを書かずに割引・配送・支払いをカスタマイズしたい
→ ノーコードアプリ(Kite・Checkout Wiz・Function Studio)を導入する - 独自の割引ロジック・条件が複雑でアプリでは対応できない
→ Functionsをエンジニアに実装してもらう(この記事のエンジニアセクションを参照) - Scriptsと同じことがしたいだけ
→ Functionsベースのノーコードアプリでほぼすべてカバーできます。まずアプリを試してください
チェックアウト拡張機能との違い(混同しやすい)
Functionsと似た用語に「Checkout UI Extensions」があります。混同しやすいので整理します:
| Shopify Functions | Checkout UI Extensions | |
|---|---|---|
| 役割 | バックエンドのロジック(割引・配送・支払い制御) | チェックアウト画面のUIカスタマイズ(表示追加) |
| お客様への見え方 | 直接見えない(価格・選択肢が変わる) | チェックアウト画面に要素が追加される |
| Scriptsとの関係 | Scriptsの直接の後継 | checkout.liquidの後継(別の話) |
| 実装言語 | JavaScript / Rust(WASMへコンパイル) | React(JSX) |
エンジニア目線でよくある失敗と対策
失敗1:移行を「7月になってから」と思って後回しにした
6月30日は「Scriptsが停止する日」であり「移行を始める日」ではありません。テストを含めると1〜2スプリントは必要です。Plusストアで複数のScriptsがある場合は特に余裕を持ってください。
失敗2:ShopifyパートナーアカウントなしでFunctionsを開発しようとした
Functionsはパートナーダッシュボードから開発ストアを作成し、アプリとして作成する必要があります。パートナーアカウントなしでは開発環境が整えられません。まずパートナー登録から始めてください(無料)。
失敗3:run.graphqlで必要なフィールドを取得し忘れた
Functionのロジックで使いたいデータはrun.graphqlに明示的に書かないと取得できません。「顧客タグで条件分岐したい」ならbuyerIdentity.customer.hasTagsを、「商品タグで判定したい」ならmerchandise.product.tagsをクエリに含める必要があります。ロジックを先に書いてからクエリを逆算するとミスが減ります。
失敗4:CI/CDで–forceフラグを使っていた
2026年5月にShopify CLIの--forceフラグが廃止されます。CI/CDパイプラインにshopify app deploy --forceが入っている場合は今すぐ--allow-updatesに置き換えてください。
失敗5:ScriptsとFunctionsが同時に動いて二重割引が発生した
移行テスト期間中はScriptsとFunctionsを同時に稼働させられます。ただし両方がアクティブだと条件が重なって二重に適用される可能性があります。テスト用の顧客タグやコレクションを使って適用範囲を分けてからテストするのが安全です。
まとめ:あなたのパターン別チェックリスト
既存ストア(Scriptsを使っている)
- □ 管理画面の「カスタマイズレポート」で使用中のScriptsを一覧化した
- □ 各Scriptsがどの機能(割引・配送・支払い)かを把握した
- □ ノーコードアプリで移行できるか確認した
- □ エンジニア実装が必要な場合は開発環境をセットアップした
- □ 開発ストアで動作テストを完了した
- □ 本番での並行稼働テストを実施した
- □ 旧Scriptsを非アクティブ化した
- □ 6月30日以降にScript Editorをアンインストールした
新規ストア・新規実装
- □ Scriptsは使わないと決めた(2026年4月15日以降は作成不可)
- □ ノーコードアプリ or Functionsカスタム実装を選択した
- □ 必要なFunction APIの種類を特定した(対応表を参照)
Scriptsの移行や、Functionsの実装についてご不明な点があれば、お気軽にご相談ください。
関連記事
- 【2026年冬】Shopify Editions Winter ’26 開発者向けアップデートまとめ
- 【2026年最新】Shopifyの始め方完全ガイド
- 【2026年最新】Shopify決済サービス完全ガイド
Shopifyをこれから始める方へ





