管理画面UIを作る
Polaris Web ComponentsとApp Bridgeで、管理画面に馴染む画面を作れる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、Polaris Web ComponentsとApp Bridgeで、管理画面に馴染む画面を作れるようになります。
受託では、管理画面と同じ見た目・操作感の画面ほど使ってもらえるので、自作せずShopifyの部品を借ります。
Polaris Web Componentsとは、管理画面と同じ見た目の部品
<s-page> <s-section> <s-button> <s-text-field> <s-banner> <s-stack> <s-table>などのカスタム要素（ブラウザに登録する独自のタグ）です。
Polarisのスクリプト（polaris-1.js）を読み込むと使えます。
React RouterのテンプレートではAppProviderがApp BridgeとPolarisの両方のscriptタグを出すので、自分で足す必要はありません。
管理画面と同じ見た目・ダークモード・アクセシビリティが付いてきます。
React版Polarisも残っていますが、新規はWeb Componentsを選びます。
App BridgeのAPIで何を借りられるか
商品を選ぶピッカーや、トースト・モーダル・タイトルバーを、管理画面側から借りられます。
たとえばshopify.resourcePicker({ type: "product", multiple: true })は、選んだ商品を配列で返します（idはGID）。
キャンセルならundefinedです。
管理画面側のUIを借りるので、自作しません。
データの読み書きはReact Routerの流儀
読み取りはloader、書き込みは<Form method="post">とactionで行います。
結果はuseLoaderData / useFetcherで受け取ります。
発展：App Storeの要件と受託での意味
公開するなら、PolarisとApp Bridgeの利用、ナビゲーションの規約、レスポンシブ対応が審査項目になります。
カスタム配布でも同じ品質を目安にします。
自前のCSSフレームワークで管理画面を作ると、見た目が浮くだけでなく、審査で落ち、Polarisの更新にも乗れません。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。