Polaris 2.0 が stable に 新しい管理画面デザインに合わせた初のメジャー版

図解 ： Polaris 2.0 が stable に（Polaris Web Components 2.0 / CDN） Developer / Polaris Web Components Polaris 2.0 が stable に 新しい管理画面デザインに合わせた初のメジャー版 Polaris Web Components 2.0 が CDN の stable チャネルで配信開始。CDN がセマンティックバージョニングになってから初めてのメジャーリリース。ただし 自動では切り替わらない ので、script タグを polaris-2.js に変える必要がある。 このページの構成 そもそも何が変わるのか（30秒で理解） CDN URL とバージョンの対応図 URL ごとの挙動の比較 アップデート手順（3ステップ） React Router テンプレート／TypeScript の場合 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が変わるのか Polaris Web Components 2.0 が stable の Polaris CDN チャネルで使えるようになった。 リニューアルされた Shopify 管理画面（ 新しいフレーム・新しいナビゲーション・新しい外観 ）に合わせた版で、CDN のセマンティックバージョニング導入後 初めてのメジャーリリース 。 stable で配信開始 polaris-2.js と polaris-2.0.js の2つの URL で 2.0 が配信される。 新しい管理画面と見た目を揃える リニューアル後の管理画面のフレーム・ナビゲーション・外観に合わせた版。 自動では上がらない polaris.js / polaris-1.js は引き続き 1.1 を配信。2.0 にするには自分で script タグを書き換える。 2 CDN URL とバージョンの対応図 セマンティックバージョニングの考え方 ： polaris-2.js はメジャー 2 系の最新を追い、 polaris-2.0.js は 2.0 に固定される。 polaris.js は 今後も 2.x に移らない と明記されている。 3 URL ごとの挙動の比較 URL 今配信される版 今後の 2.x リリース時 向いている使い方 polaris.js 1.1 2.x には 絶対に 移らない すぐには移行しないアプリ polaris-1.js 1.1 記載なし（1.1 を配信し続けると記載） 1 系に留まりたいアプリ polaris-2.js 2.0 後続の 2.x に追従 公式が案内する標準のアップデート先 polaris-2.0.js 2.0 2.0 のまま固定 後続 2.x を取り込まず 2.0 に留めたいアプリ 4 アップデート手順（3ステップ） 1 script タグを書き換え polaris.js / polaris-1.js を polaris-2.js に変更。 2 型定義を更新（TS の場合） @shopify/polaris-types@^2.0.0 をインストール。 3 必要なら 2.0 に pin 後続 2.x を取り込みたくなければ polaris-2.0.js を指定。 2.0 を配信する URL <script src="https://cdn.shopify.com/shopifycloud/polaris-2.js"></script> <script src="https://cdn.shopify.com/shopifycloud/polaris-2.0.js"></script> 2.0 に固定したい場合 <script src="https://cdn.shopify.com/shopifycloud/polaris-2.0.js"></script> 1.1 → 2.0 で具体的にどのコンポーネント・API が変わるか（破壊的変更の内容）は、この記事には 記載なし 。関連ドキュメント「Update your app for Polaris 2」を確認すること。 5 React Router テンプレート／TypeScript の場合 React Router テンプレート polarisUrl を2か所に設定 AppProvider と shopifyApp のサーバー設定の両方で polarisUrl を指定し、値を揃える。 @shopify/shopify-app-react-router 2.1.0 以上 が必要。 TypeScript 型パッケージを 2 系に npm install @shopify/polaris-types@^2.0.0 記事に書かれているのは @shopify/polaris-types@^2.0.0 を入れることだけ。上記はそれを npm で書いた例（パッケージマネージャは任意）。 6 技術者が押さえるべき5つのポイント 1. オプトイン方式のメジャーアップデート 既存アプリは何もしなければ 1.1 のまま。勝手に壊れない一方で、 新しい管理画面と見た目を揃えるには自分で切り替える 必要がある。 2. polaris.js は「最新」ではない 名前から最新版を指すように見えるが、 2.x には絶対に移らない 。「polaris.js を使っていれば最新」という思い込みは捨てる。 3. 追従か固定かを選ぶ polaris-2.js は後続 2.x に追従、 polaris-2.0.js は 2.0 に固定。検証済みの版で止めたいなら pin、更新を自動で取り込みたいなら追従。 4. React Router は2か所を揃える AppProvider とサーバー側 shopifyApp の polarisUrl は同じ値にする。片方だけ変えないこと。 @shopify/shopify-app-react-router 2.1.0 以上が前提。 5. 型定義も一緒にメジャーを上げる TypeScript 環境では @shopify/polaris-types@^2.0.0 をインストールする。CDN の版と型定義の版を揃えておく。変更内容の詳細は記事に記載なしのため、「Update your app for Polaris 2」「Versioning for web components」を併読する。 7 業務に活かせる3つのユースケース USE CASE 1 自社・クライアント向け埋め込みアプリの見た目を新しい管理画面に揃える 課題 管理画面はリニューアルされたのに、埋め込みアプリの UI が Polaris 1.1 のままで見た目がちぐはぐになる。 打ち手 script タグを polaris-2.js に変更し、TypeScript 環境では @shopify/polaris-types@^2.0.0 に更新する。 効果 新しいフレーム・ナビゲーション・外観に合わせた Polaris 2.0 でアプリを描画できる。 技術メモ 自動では切り替わらないので、改修チケットを明示的に切る。変更内容は「Update your app for Polaris 2」で確認。 USE CASE 2 受託運用アプリで「検証済みの版に固定」して保守リスクを下げる 課題 保守契約中のアプリで、後続のマイナーリリースが知らないうちに入ると、検証していない状態で本番の見た目が変わるのが怖い。 打ち手 polaris-2.0.js に pin して 2.0 で動作確認 → 後続 2.x が出たら検証してから URL を上げる運用にする。 効果 アップデートのタイミングを自分たちで決められ、リリース判断を保守フローに組み込める。 技術メモ 追従したいアプリは polaris-2.js 、固定したいアプリは polaris-2.0.js 、とアプリごとに方針を決めて README に残す。 USE CASE 3 React Router テンプレート製アプリの移行チェックリスト化 課題 複数の React Router テンプレート製アプリを移行する際、設定箇所の漏れや版の不一致が起きやすい。 打ち手 ① @shopify/shopify-app-react-router を 2.1.0 以上に → ② AppProvider と shopifyApp の polarisUrl を同じ値に → ③ 型定義を ^2.0.0 に、の3点をチェックリスト化。 効果 移行作業を標準化でき、アプリ間で手順がぶれない。 技術メモ polarisUrl を環境変数や共通定数に1か所で定義し、両方から参照すると値のずれを防ぎやすい。 8 提案で使える1行サマリ 「新しい Shopify 管理画面に合わせた Polaris 2.0 が stable に。 自動では上がらないので script タグを polaris-2.js に変えるだけ。固定したいなら polaris-2.0.js。 polaris.js は 1.1 のまま止まるので、アプリの見た目を揃えたいなら今のうちに移行計画を。」 source ： shopify.dev / changelog / polaris-cdn-2-0-is-now-stable 公開日 2026-10-22（Developer Changelog）