Shop Minis 2026年5月6月アップデート解説

7月 21, 2026

SHOP MINIS

Shop Minis May/June 2026
React SDK強化 & CLI自動検証

バリアント選択フック・submit時ビルド検証・スコープ警告の3本立てアップデート

Shop MinisのReact SDKとCLIが2026年5月〜6月に大幅アップデートされました。開発者はバリアント選択・カート追加・即購入のネイティブUIを3つの型付きフックで呼び出せるようになり、CLIはsubmitフロー内でビルド検証を自動実行、スコープ設定漏れも事前警告するようになっています。

NEW HOOKS

01Product Variant Intent フック詳解

React SDKに追加された3フックは、Mini WebView上にShop アプリネイティブのバリアント選択シートを表示する仕組みです。商品IDさえ持っていれば、バリアント・数量の選択をShopの標準UIに委譲できます。

CLI IMPROVEMENT

02submit時のビルド検証と警告強化

CLIのsubmitコマンドがMinis専用のビルド検証ステップを内包するようになりました。検証はチェック単位でオーケストレーションされ、進行状況を人間が読める形式またはJSON形式で出力します。またスコープ依存フックを設定完了前に使用した場合、早期警告が出るようになっています。

USE CASES

03業務で活かせる具体ユースケース

課題: Mini内でバリアント付き商品を訴求したいが、独自のバリアント選択UIを作るコストが高い
打ち手: useAddToCart({productId})を呼び出すだけで、Shopネイティブのバリアント選択シートをオーバーレイ表示できる
効果: 実装工数を削減しつつ、ユーザーが慣れ親しんだShop UIでスムーズにバリアントを選択・購入できる
技術メモ: 商品IDのみ渡せばよく、バリアントID解決はShop側が担う。result.data.outcomeで遷移先を分岐できる

課題: Mini内で即購入フローを実装したい。リダイレクトのタイミングや結果判定を正確に把握する必要がある
打ち手: useBuyNowフックを使用。結果コード（ok/dismissed/error）と outcome（navigated_to_product / redirected_to_product）で詳細状態を判定する
効果: 購入完了・ユーザーキャンセル・エラーを明確に区別してUXを最適化できる。referral-product handoffも対応
技術メモ: resultのcodeとdata.outcomeの2段階で状態を評価する構造。ホストエラーは別途ハンドリングが必要

課題: Miniをsubmitする前に手動でビルド・Lint・型チェックを走らせるのが手間で、提出後にエラーが発覚することがあった
打ち手: CLIのshopify minis submitが自動でdependency validation・ESLint・TypeScript・ビルド出力・マニフェスト検証を順番に実行する
効果: 提出前にすべての検証が自動完了。CI/CD統合にはJSON出力モードを活用できる
技術メモ: 検証はチェックごとに分割されたオーケストレーションで動作。human-readableとJSONの2出力モードあり

DEVELOPER NOTES

04技術者が押さえるべき5つのポイント

項目	内容	注意点
新フックの種類	useSelectVariant / useAddToCart / useBuyNow の3種	それぞれ異なるintentをラップ。用途に合わせて使い分ける
resultの構造	code（ok/error等）+ data.outcome（added_to_cart等）の2段階	dismissedやhost errorは code レベルで分岐させること
CLIビルド検証	submit時に6種類のチェックが自動実行される	CI環境ではJSON出力モード（記載なし: 具体的フラグは公式ドキュメント確認推奨）を活用
スコープ警告	スコープ依存フックを使用前にsetupが完了していない場合にCLIが警告	早期フィードバックであり、エラーではなく警告。ただし本番前に必ず解消すること
対象SDKバージョン	記載なし。公式changelogで最新のReact SDKバージョンを確認すること	既存Miniのコードに既存intentラッパーがある場合は新フックへの移行を検討