---
title: "Shopifyアプリ開発の始め方：配布方法の選び方とReact Router雛形での実装・審査要件"
url: "https://www.issoh.co.jp/tech/details/18943/"
published: 2026-10-26
updated: 2026-10-26
categories: ["開発"]
publisher: "株式会社一創"
---

# Shopifyアプリ開発の始め方：配布方法の選び方とReact Router雛形での実装・審査要件

Shopifyアプリ開発で最初に決めるのは、言語でもフレームワークでもなく「公開アプリとして配るか、特定のストア向けのカスタム配布にするか」です。配布方法はあとから変更できず、審査の有無、課金APIの可否、作るべき機能が丸ごと変わります。本記事では、2026年1月から管理画面でカスタムアプリを新規作成できなくなった変更を押さえたうえで、Shopify CLIとReact Routerテンプレートでアプリを作る手順、GraphQL Admin APIとPolarisウェブコンポーネントのコード、shopify.app.tomlに書く必須のWebhook、App Store審査と収益分配の条件を、2026年10月時点の公式資料で解説します。

## まとめ：Shopifyアプリ開発は配布方法を決めてからReact Router雛形で始める

自社や1社のクライアントのストアだけで使うなら、カスタム配布で作ります。審査は不要で、作業の中心はAPIの実装です。複数の加盟店に売るならApp Storeの公開アプリになり、GraphQL Admin API限定、セッショントークン認証、Shopifyの課金API、プライバシー関連のWebhook3種が審査の前提です。

新規開発の入口はShopify CLIの`shopify app init`で、公式が勧めるのはReact Routerテンプレートです。以前のRemixテンプレートはReact Router版に置き換わりました。管理画面のUIはPolarisウェブコンポーネント（`<s-page>`などのタグ）で組みます。

受託開発で詰まりやすいのは、技術よりも「アプリをどの組織に作るか」です。クライアントのストアに入れるアプリを開発会社の組織で作るのか、クライアントの組織で作るのかで、使える認証方式と引き継ぎの手間が変わります。見積もりの前にここを決めてください。

## 公開アプリ・カスタム配布・管理画面アプリの違いとShopifyアプリの配布方法

Shopifyアプリの種類は、作り方ではなく配り方で分かれます。同じReact Routerのコードでも、配布方法の選択で通る審査と使えるAPIが違ってきます。

### 公開アプリとカスタム配布の対象ストア・審査・課金APIを比べた一覧

[Shopifyのアプリ配布に関する開発者ドキュメント](https://shopify.dev/docs/apps/launch/distribution)の記載を、受託開発で判断に使う項目に絞って並べます。

| 配布方法       | インストールできるストア        | Shopifyの審査 | Shopifyの課金API |
| ---------- | ------------------- | ---------- | ------------- |
| 公開配布       | 複数の加盟店              | 必要         | 使える           |
| カスタム配布     | 1ストア・同一Plus組織・開発ストア | 不要         | 使えない          |
| 管理画面で作るアプリ | 1ストア                | 不要         | 使えない（新規作成不可）  |

公開アプリの分類は、App Storeに掲載される型と掲載されない型の2種類です。[Shopifyヘルプのアプリの解説](https://help.shopify.com/ja/manual/apps/about-apps)では、非掲載型も審査を受けたうえで、検索結果に出さずにリンクや開発者のサイトからインストールさせる形と説明されています。カスタム配布でアプリ利用料を請求したい場合は、Shopifyの課金APIが使えないため、請求はShopifyの外で行う契約になります。

### 2026年1月1日以降に管理画面でカスタムアプリを作れなくなった変更

以前は、ストアの管理画面からカスタムアプリを作り、表示されたアクセストークンを外部システムに貼るだけで連携できました。同じ配布ドキュメントでは、この管理画面で作るアプリは新規作成の対象外になり、既存のアプリは動き続けるものの、App Bridge・アプリ拡張・課金APIは使えないと書かれています。

Shopifyヘルプでは、カスタムアプリの作成と管理の場所はDev Dashboardで、2026年1月1日より前に作られたものはレガシーカスタムアプリとして管理画面から管理すると案内されています。古いブログ記事にある「設定→アプリと販売チャネル→アプリを開発」の手順は、新規案件ではそのまま使えません。

### 配布方法を後から変更できない前提で最初に決める2つの判断軸と選び方

配布ドキュメントには「一度選んだ配布方法は変更できない」と明記されています。最初は1社向けに作り、うまくいったらApp Storeで売る、という段階的な計画はそのままでは成り立ちません。同じ機能を公開アプリとして出すなら、別のアプリとして作り直し、審査を通す前提で見積もります。

判断の軸は2つで足ります。使うストアが自社組織かクライアント1社に閉じるか、そしてアプリ自体を商品として課金するか、です。両方とも「閉じる・課金しない」ならカスタム配布、どちらかが「開く・課金する」なら公開配布を選びます。

## 受託開発でアプリを作る組織とDev Dashboardの権限を決める手順

開発会社がクライアントのストア向けにアプリを作る場合、アプリを作成する組織と、ストアが属する組織が一致するかで認証方式が変わります。ここを曖昧にしたまま着手すると、トークンが取れずに設計をやり直すことになります。

### クライアントのストアに入れるカスタムアプリを作る組織と作業者の権限

[Shopifyのアプリ認証の解説](https://shopify.dev/docs/apps/build/authentication-authorization)では、管理画面に埋め込むアプリはトークン交換（token exchange）、管理画面の外で動くアプリは認可コードグラント、自分の組織のストアだけに作用するアプリはクライアント認証情報グラント（client credentials grant）と使い分けます。開発会社の組織でアプリを作り、クライアントの組織のストアへ入れるなら、前の2つのどちらかです。

クライアントの組織にアプリを作る場合は、作業者に権限が要ります。Shopifyヘルプによると、スタッフにアプリの作成を許可するには「App development > Develop」の権限を付け、コラボレーターは組織レベルの権限がないためDev Dashboardに入れません。ストア構築でコラボレーターアカウントを使ってきた開発会社は、アプリ開発の段階でスタッフアカウントの発行をクライアントに依頼する必要があります。

### 自社組織のストアでclient credentials grantを使うcurlの実装例

バッチ処理や基幹連携のように画面を持たないアプリを、ストアと同じ組織に作るなら、[クライアント認証情報グラントのガイド](https://shopify.dev/docs/apps/build/authentication-authorization/client-credentials-grant)の手順でトークンを取得できます。クライアントIDとシークレットはDev Dashboardのアプリの設定画面にあり、環境変数から読みます。

```
# 1. アクセストークンを取得する（24時間有効）
curl -X POST "https://${SHOP}.myshopify.com/admin/oauth/access_token" \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d "grant_type=client_credentials" \
  -d "client_id=${SHOPIFY_CLIENT_ID}" \
  -d "client_secret=${SHOPIFY_CLIENT_SECRET}"

# 2. 取得したトークンでGraphQL Admin APIを呼ぶ
curl -X POST "https://${SHOP}.myshopify.com/admin/api/2026-10/graphql.json" \
  -H "Content-Type: application/json" \
  -H "X-Shopify-Access-Token: ${ACCESS_TOKEN}" \
  -d '{"query":"{ shop { name } }"}'
```

応答の`expires_in`は常に86399秒（24時間）なので、トークンをキャッシュし、切れる前に取り直します。アプリとストアが同じ組織に属さないと`shop_not_permitted`で失敗し、クライアントの組織のストアには使えません。必要なスコープが足りないときは、スコープを加えたアプリのバージョンを出し、ストア側で承認します。

## Shopify CLIとReact Router雛形でアプリを作りローカルで動かす手順

管理画面に埋め込むアプリは、Shopify CLIで雛形を作るのが公式の手順です。認証、セッション保存、App Bridgeの初期化が最初から入っています。

### Node.js 22.12以上とShopify CLIの導入とアプリ作成のコマンド

[Shopify CLIのリファレンス](https://shopify.dev/docs/api/shopify-cli)では、Node.js 22.12以上とGit 2.28.0以上が前提です。ページに載っている`shopify version`の出力例は4.0.0で、4.0から自動アップグレードが始まると書かれています。

```
node -v                               # v22.12.0 以上であること
npm install -g @shopify/cli@latest
shopify version

# React Routerテンプレートで作成（対話で組織とアプリ名を選ぶ）
shopify app init --template=https://github.com/Shopify/shopify-app-template-react-router
cd my-new-app
shopify app dev
```

[アプリの雛形作成チュートリアル](https://shopify.dev/docs/apps/build/scaffold-app)では、`--template`を付けずに`shopify app init`を実行し、選択肢から「Build a React Router app」を選ぶ方法でも同じ雛形になります。サーバー処理を持たない単純なカスタム配布アプリには、拡張機能だけのテンプレートも用意されています。

### shopify app devのトンネル経由プレビューと開発ストアへのインストール

`shopify app dev`は、CloudflareのトンネルでHTTPSのURLを用意し、Prisma用のSQLiteデータベースを作ります。実行中に`p`キーを押すとプレビューURLが開き、「Install app」で開発ストアに入ります。このコマンドを実行するために必要なのは、ストアのオーナーかスタッフのアカウントです。

開発ストアは`shopify store create dev`で作れます。本番ストアで直接`shopify app dev`を回すと作りかけの画面が本番の管理画面に出るため、開発ストアで動作を固めてから本番へ入れてください。

### RemixテンプレートからReact Routerテンプレートへの移行と既存アプリの扱い

[React Routerテンプレートのリポジトリ](https://github.com/Shopify/shopify-app-template-react-router)には、Remixのテンプレートからフォークし、React Routerに変換したものだと書かれています。既存のRemix版アプリ向けには、移行手順がリポジトリのWikiに用意されています。

Web上のサンプルには`@remix-run`のimportを前提にしたものが多く、そのまま写すと依存関係が合いません。使う前に、import元が`react-router`と`@shopify/shopify-app-react-router`になっているかを確かめます。

## GraphQL Admin APIとPolarisウェブコンポーネントで管理画面を実装する

テンプレートの`app/routes`配下に、`app.`で始まるファイル名のルートを足していくのが基本の作業です。この接頭辞を付けると、認証とApp Bridgeの初期化を担う`app.tsx`の配下に入ります。

### loaderでauthenticate.adminを呼び商品を取得するコード例

リポジトリのREADMEにある例と同じく、`authenticate.admin`で得た`admin`からGraphQL Admin APIを呼びます。次は`app/routes/app.products.tsx`として置く例で、画面部分は次のh3で続けます。

```
import type { LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";
import { authenticate } from "../shopify.server";

export async function loader({ request }: LoaderFunctionArgs) {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(`#graphql
    query RecentProducts {
      products(first: 10, sortKey: UPDATED_AT, reverse: true) {
        nodes { id title status }
      }
    }`);
  const { data } = await response.json();
  return { products: data.products.nodes };
}
```

RESTではなくGraphQLで書くのは、公開アプリの審査要件でもあるためです。Admin GraphQL・Storefront・Webhookの使い分けとレート制限は、[Shopify APIとは：Admin・Storefront・Webhookの使い分けとレート制限をコードで解説](https://www.issoh.co.jp/tech/details/18947/)で扱っています。2つのAPIの設計上の違いは[REST APIとGraphQLの違いと使い分けを解説した記事](https://www.issoh.co.jp/tech/details/3591/)で扱っています。埋め込みアプリ内の画面遷移には`<a>`ではなく`react-router`の`Link`を、リダイレクトには`authenticate.admin`が返す`redirect`を使うよう、READMEは指示しています。

### Polarisウェブコンポーネントのs-pageとs-buttonで画面を組む例

管理画面に溶け込むUIは、[Polarisウェブコンポーネント](https://shopify.dev/docs/api/app-home/latest/web-components)で組みます。ボタン、バナー、テキストフィールド、テーブルなどがタグとして用意されており、[Pageコンポーネントの仕様](https://shopify.dev/docs/api/app-home/latest/web-components/layout-and-structure/page)では`<s-page>`に`heading`属性と`primary-action`スロットがあります。

```
export default function Products() {
  const { products } = useLoaderData<typeof loader>();
  return (
    <s-page heading="最近更新した商品">
      <s-button slot="primary-action" variant="primary">CSVを書き出す</s-button>
      <s-section heading="10件">
        {products.map((p) => (
          <s-paragraph key={p.id}>{p.title}（{p.status}）</s-paragraph>
        ))}
      </s-section>
    </s-page>
  );
}
```

テーマ側（ストアフロント）の見た目を変えたいだけなら、アプリではなくLiquidのテーマ開発が担当範囲です。その手順は[Shopify Liquidのテーマ開発とShopify CLIでの始め方を解説した記事](https://www.issoh.co.jp/tech/details/12315/)にまとめています。テーマエディタでのセクション・ブロック編集やカスタムCSSで変えられる範囲は、[Shopifyテーマのカスタマイズ手順を解説した記事](https://www.issoh.co.jp/tech/details/18945/)で整理しています。

### APIバージョンを四半期ごとに上げる運用と12か月のサポート期間

[ShopifyのAPIバージョニングの解説](https://shopify.dev/docs/api/usage/versioning)では、新しいバージョンは3か月ごとに出て、各安定版は最低12か月サポートされます。2026年10月26日時点の最新安定版は`2026-10`で、利用できる期限は2027年10月16日です。サポートが切れたバージョンを指定したリクエストは、利用できる最も古い安定版で応答されます。

この挙動が、納品後のアプリが1年ほどで動かなくなる典型的な原因です。受託開発では、保守契約に年1回以上のAPIバージョン更新と動作確認を含めます。

## shopify.app.tomlでスコープとWebhookを宣言し必須対応を入れる

アプリの権限とWebhookの購読は、コードではなく`shopify.app.toml`に書き、`shopify app deploy`（テンプレートでは`npm run deploy`）でShopifyへ反映します。

### スコープとWebhook購読を宣言するshopify.app.tomlの設定例

[アプリ設定ファイルのリファレンス](https://shopify.dev/docs/apps/build/cli-for-apps/app-configuration)の項目に沿うと、商品を読み、アンインストールと個人情報の請求を受けるアプリの設定は次の形になります。`client_id`は自分のアプリの値に置き換えます。

```
name = "product-export"
client_id = "your-client-id"
application_url = "https://app.example.com/"
embedded = true

[access_scopes]
scopes = "read_products"

[webhooks]
api_version = "2026-10"

[[webhooks.subscriptions]]
topics = [ "app/uninstalled" ]
uri = "/webhooks/app/uninstalled"

[[webhooks.subscriptions]]
compliance_topics = [ "customers/data_request", "customers/redact", "shop/redact" ]
uri = "/webhooks/compliance"
```

スコープの指定は、必要な分だけに絞る方針です。書き込みスコープを最初から付けると、インストール時に加盟店へ表示される権限の一覧が長くなり、承認をためらう原因になります。テンプレートのREADMEは、ストアごとの購読を`afterAuth`で登録するより、このファイルで宣言する方法を勧めています。

### customers/redactなど必須Webhook3種と30日以内の対応期限

[プライバシー法への対応ガイド](https://shopify.dev/docs/apps/build/compliance/privacy-law-compliance)では、App Storeで配るアプリは`customers/data_request`、`customers/redact`、`shop/redact`の3つを実装しなければなりません。受信したら200番台で応答し、HMAC署名が不正なら`401`を返します。URLが未設定のアプリや、求められた応答を返さないアプリは審査で却下されます。

要求を受けてから対応するまでの期限は30日以内です。`shop/redact`はアンインストールから48時間後に届くため、ストア単位のデータを消す処理をこのWebhookにつなげます。署名検証の書き方と、再送を前提にした冪等な受け方は[決済Webhookの署名検証と冪等な処理を解説した記事](https://www.issoh.co.jp/tech/details/15734/)と同じ考え方で組めます。

## App Store審査に通すための要件と、公開アプリの収益分配の条件

公開配布を選んだ場合、機能が動くことと審査に通ることは別の作業になります。審査で差し戻されると再提出のたびに待ち時間が生じるため、提出前に要件を1つずつ確認します。

### GraphQL限定・セッショントークン・課金APIなど審査で落ちやすい要件

[App Storeの要件一覧](https://shopify.dev/docs/apps/launch/shopify-app-store/app-store-requirements)から、新規の公開アプリで設計に影響するものを重い順に挙げます。

- 2.2.4：2025年4月1日以降の新規公開アプリはGraphQL Admin APIだけで作る（REST Admin APIは2024年10月1日からレガシー）
- 1.2：アプリの料金はShopify App PricingかShopifyの課金APIで請求する。外部での請求は原則として掲載できない
- 1.1.1：認証にセッショントークンを使い、サードパーティCookieやローカルストレージに頼らず動く
- 2.2.3：最新のApp Bridgeを、他のどのscriptタグよりも前に読み込む
- 1.2.3：加盟店がサポートへの連絡や再インストールなしにプランを上げ下げできる

テンプレートを使えば1.1.1と2.2.3はほぼ満たした状態で始まります。手で作り込むのは課金とプラン変更の画面、そして前章の必須Webhookです。審査期間は要件一覧に書かれていないため、公開日には余裕を持たせます。

### 累計100万ドルまで0%の収益分配と19ドルの登録料・2.9%の処理手数料

[App Store開発者向けの収益分配の解説](https://shopify.dev/docs/apps/launch/distribution/revenue-share)によると、アプリ売上は累計100万米ドルまで開発者の取り分が100%で、超えた分は15%がShopifyの取り分です。数えるのは2025年1月1日以降の売上で、毎年リセットはされません。複数の加盟店に配るには、パートナーアカウントごとに1回だけ19米ドルの登録料が必要です。

これとは別に、すべての請求に2.9%の処理手数料と該当する税がかかります。前年のApp Store売上が2,000万米ドル以上、または会社全体の売上が1億米ドル以上の場合は、0%の枠がなく全額に15%がかかります。事業計画では「100万ドルまで無料」ではなく「処理手数料2.9%は最初からかかる」と置いてください。

## Shopifyアプリ開発を選ぶ場面と見送る場面、依頼前に整理する情報

作らないほうが安く確実な要件も多くあります。採否の線を先に引きます。

### 既存の公開アプリやShopifyの標準機能で足りるため自作を見送る条件

次のどれかに当てはまるなら、自作は見送ります。同じ機能の公開アプリがあり、数年分の月額料金が開発と保守の費用を下回る場合。要件がShopify Flowなど標準の自動化で書ける「条件を満たしたらタグを付ける・通知する」程度の場合。見た目の変更だけでテーマの編集で済む場合です。

逆に、自社の基幹システムや倉庫システムとの独自のデータ連携、既存アプリでは実現できない管理画面の業務フロー、複数ストアをまたぐ集計は、カスタム配布のアプリで作る価値があります。kintoneやSalesforceとの連携であれば、手段の比較を[ShopifyとkintoneのAPI連携の手段を比較した記事](https://www.issoh.co.jp/column/details/2341/)と[ShopifyとSalesforceの連携方法を比較した記事](https://www.issoh.co.jp/column/details/2955/)で先に確認すると、アプリを作るべきかが判断しやすくなります。

### カスタムアプリの開発を開発会社へ依頼する前に整理しておく4項目

開発会社に相談する前に、次の4つを決めておくと、見積もりの前提が1回の打ち合わせでそろいます。

1. 配布方法：自社または1社のストアだけで使うか、他の加盟店にも配るか
2. 組織：アプリを自社の組織に作るか、開発会社の組織に作るか（スタッフ権限を渡せるか）
3. データ：読むデータと書き込むデータ、顧客の個人情報を扱うか
4. 保守：APIバージョン更新を誰がいつ行うか、納品後の運用窓口

特に2と4は、納品後に「誰も更新できないアプリ」を生む原因になります。一創では、Shopifyのストア構築に加えて、基幹システム連携のカスタムアプリや管理画面の業務機能の開発を受託しています。配布方法や組織の決め方から相談したい場合は、[ECサイト制作・Shopify構築のサービス](https://www.issoh.co.jp/service/web/shopify/)をご覧ください。ストア構築の工程と外注範囲は[Shopify構築の進め方を解説した記事](https://www.issoh.co.jp/column/details/17106/)にあります。

## よくある質問

Shopifyアプリ開発を検討する際によく寄せられる質問をまとめました。

### Shopifyのカスタムアプリと公開アプリの違いは何ですか？

違いは配る範囲です。カスタム配布は1つのストア、同じShopify Plus組織のストア、開発ストアにだけ入れられ、Shopifyの審査は不要ですが、Shopifyの課金APIは使えません。公開アプリは複数の加盟店向けで、審査を通ったうえでApp Storeに掲載する型と、掲載せずリンクで配る型があります。どちらにするかは後から変更できません。

### Shopify管理画面の「アプリを開発」でカスタムアプリはもう作れませんか？

新規には作れず、カスタムアプリの作成先はDev Dashboardです。2026年1月1日より前に作られたレガシーカスタムアプリは引き続き動き、管理画面から管理できます。ただしApp Bridgeやアプリ拡張は使えないため、機能を足すときは作り直しを検討します。

### Shopifyアプリ開発に使うプログラミング言語は何ですか？

公式が勧める雛形はReact RouterテンプレートなのでTypeScriptまたはJavaScriptが中心です。Shopify CLIの実行にはNode.js 22.12以上が必要です。ただしShopifyとはHTTPSのAPIとWebhookでやり取りするため、管理画面に埋め込まないバッチ型の連携アプリであれば、PythonやGoなど他の言語で作ることもできます。

### Shopify App Storeにアプリを出すと手数料はいくらかかりますか？

アプリ売上は累計100万米ドルまで収益分配がかからず、超えた分に15%がかかります。対象は2025年1月1日以降の売上です。これとは別に、すべての請求に2.9%の処理手数料と税がかかり、複数の加盟店に配るにはパートナーアカウントごとに19米ドルの登録料が1回必要です。大規模な事業者には0%の枠がありません。

### RemixのShopifyアプリはReact Routerへ移行が必要ですか？

Shopifyの公式テンプレートはRemix版からフォークしてReact Router版へ変換されており、新規開発はReact Router版で始めます。既存のRemix版アプリの移行手順の掲載先は、テンプレートのリポジトリです。APIバージョンの更新とまとめて移行すれば、動作確認は1回で済みます。

## 関連記事

- [ECサイト構築とは？5つの構築方法の費用相場と、自社に合う進め方の判断軸を解説](https://www.issoh.co.jp/column/details/15234/)：Shopify以外も含めた構築方法の比較。
- [Shopify Plusとは｜通常プランとの機能差と移行する売上規模の線引き](https://www.issoh.co.jp/column/details/18085/)：Plus組織でのカスタム配布とPlus限定の機能。
- [Shopifyの料金プランと手数料｜総額と乗り換えラインの判断](https://www.issoh.co.jp/column/details/17108/)：ストア側の月額と手数料の総額。
- [Shopify×Stripe連携の実装：Shopify ペイメントの仕組みとヘッドレス構成の決済設計](https://www.issoh.co.jp/tech/details/18547/)：決済を扱うアプリや連携の規約上の制約。
- [Shopify Liquidとは？テーマ開発の構造・構文とShopify CLIでの始め方](https://www.issoh.co.jp/tech/details/12315/)：アプリではなくテーマで対応する場合の実装。

---

出典: [Shopifyアプリ開発の始め方：配布方法の選び方とReact Router雛形での実装・審査要件](<https://www.issoh.co.jp/tech/details/18943/>)（株式会社一創）