【2026年9月版】Shopifyアプリ開発の始め方｜環境構築から公開まで初心者向けに解説

Shopifyアプリを作ってみたいけれど、検索すると古い手順が出てきて、どの情報を参考にすればよいかわからない。そんな方に向けて、開発を始めるための手順を整理しました。

2026年9月現在、管理画面に埋め込むアプリの開発では、Shopify CLIとReact Routerテンプレートが公式の主要な選択肢です。以前の記事にあるRemixテンプレートや管理画面の操作手順を、そのまま使えるとは限りません。

この記事では、開発環境を準備し、開発用ストアでサンプルアプリを動かすところまでを具体的に解説します。後半では、ファイルの役割、認証とAPI、本番公開に必要な準備を説明します。

対象読者は、HTML・CSS・JavaScriptの基礎があり、Shopifyアプリ開発が初めての方です。 Reactやサーバー側の開発に慣れていない場合も、まずはサンプルアプリの起動を目標に読み進めてください。

最終確認日：2026年9月17日。公式ドキュメントをもとに構成しています。CLIの選択肢や画面の表記は更新されるため、表示が異なる場合は各節の公式リンクも参照してください。

Shopifyアプリとは？テーマとの違い

Shopifyアプリは、ストアの運営業務や購入体験を拡張する仕組みです。たとえば、注文情報を外部システムに送る、商品情報をまとめて更新する、ストア運営者向けの設定画面を提供する、といった用途があります。

テーマ開発との違いは、「何を変更したいか」で考えると整理できます。

この記事で扱うのは、Shopify管理画面の中で操作できる、React Routerを使った埋め込みアプリです。外部システムからAPIを呼ぶだけの連携や、拡張機能だけで完結するアプリは、必要な構成が異なります。公式：アプリ開発の開始方法

2024年の手順から見直すべきポイント

古い記事や教材を併用するときは、次の違いを押さえてください。

それぞれの根拠と具体的な手順は、以降の節で説明します。

管理画面で作る旧カスタムアプリとの違い

2026年1月1日以降、Shopify管理画面で従来型のカスタムアプリを新規作成する方法は利用できません。新規作成ではDev Dashboardを使用します。以前に作成した旧カスタムアプリは、引き続き管理画面で管理できます。

「カスタムアプリそのものがなくなった」という意味ではありません。旧方式のアプリ作成手順と、現在のDev Dashboardでの開発手順を混同しないことが大切です。公式：カスタムアプリについて

開発前に決めておきたい「誰が使うアプリか」

アプリの料金と配布方法は、別の軸です。「無料アプリ・有料アプリ・カスタムアプリ」という分類では、用途を正確に整理できません。

独立した複数の顧客企業へ同じアプリを販売する場合、カスタム配布で自由に展開できるわけではありません。また、配布方法は選択後に変更できないため、本番用アプリで確定する前に対象を整理しましょう。公式：配布方法の選択

学習段階では、まず開発用ストアで動かすところから始めて構いません。

ステップ1：開発に必要なツールを準備する

必要なものは次のとおりです。

Node.jsを選ぶ際はCLIの最低要件だけでなく、生成されたプロジェクトのpackage.jsonにあるenginesも確認してください。CLIが起動しても、アプリ側の依存パッケージが別の条件を求めることがあります。公式：Shopify CLIの要件

インストール状態を確認する

ターミナルで次のコマンドを実行します。

node --version
npm --version
git --version

バージョンが表示されれば、各コマンドを利用できます。見つからない場合は、Node.js公式サイトやGit公式サイトから準備してください。

続いてShopify CLIをインストールします。

npm install -g @shopify/cli@latest
shopify version

本記事の手順にRubyのインストールは必要ありません。過去のCLI向け手順を混ぜず、現在の公式要件に合わせてください。公式：Shopify CLIのインストール

ステップ2：Dev Dashboardと開発用ストアを準備する

Dev Dashboardにアクセスする

Dev Dashboardにログインし、開発に使用する組織を確認します。アプリや開発用ストアの作成には、対応する権限が必要です。

Dev Dashboardでは、アプリの設定・認証情報・ログなどを管理できます。一方、アプリの配布に関する設定ではPartner Dashboardも使います。「すべての操作が一つの画面に移った」と捉えず、開発と配布それぞれの案内に従いましょう。公式：Dev Dashboard、公式：配布設定

Dev storeを作成する

アプリのテストには、営業中のストアではなく開発用のDev storeを使用します。

1. Dev Dashboardで「Stores」を開く。

2. 「Create store」を選択する。

3. ストアの種類で「Dev」を選択する。

4. ストア名とテスト対象のプランを設定する。

5. ストアを作成し、管理画面にログインする。

CLIから作成する場合は、次のコマンドも利用できます。

shopify store create dev

Dev storeは開発・テスト専用で、本番ストアへの転換や顧客への譲渡には使えません。顧客へ引き渡すストアを構築する場合は、Client transfer storeとの使い分けが必要です。公式：Dev stores

ステップ3：React Routerテンプレートでアプリを作成する

プロジェクトを保存したいフォルダーに移動し、次のコマンドを実行します。

shopify app init

対話形式の案内に従い、アプリ名を入力して「Build a React Router app」を選択します。言語を選ぶ画面が表示された場合は、学習中の言語に合わせてJavaScriptまたはTypeScriptを選んでください。

このテンプレートには、画面表示だけでなく、Shopifyとの認証連携やAPI呼び出しを始めるための土台が含まれます。公式：アプリのひな形を作成する

なお、React Routerテンプレートを選ぶ場合、Expressを別途追加する必要はありません。独自のNode.js／Express構成でも開発できますが、この記事では公式テンプレートの構成に沿って進めます。

ステップ4：開発サーバーを起動し、アプリをインストールする

作成されたプロジェクトに移動します。my-first-shopify-appは、実際に生成されたフォルダー名に置き換えてください。

cd my-first-shopify-app
shopify app dev

初回はログインや組織・アプリ・開発用ストアの選択を求められる場合があります。作成したDev storeを選び、案内に従って進めます。

標準の開発フローでは、ローカルサーバーとHTTPSトンネルが起動します。これにより、Shopifyから手元のPCで動くアプリへアクセスできるようになります。開発中は、このターミナルを起動したままにしてください。公式：開発サーバーの起動

管理画面でアプリを開く

1. CLIの起動が完了したら、ターミナルでpキーを押す。

2. ブラウザーでプレビューを開く。

3. インストール画面が表示されたら、対象ストアと要求権限を確認する。

4. アプリをインストールする。

開発用ストアの管理画面内にサンプルアプリが表示されれば、起動できています。公式：アプリのインストール

サンプル機能を確認する

標準サンプルにある「Generate a product」からテスト商品を作成し、ストアの商品一覧にも反映されたか確認します。

ここでの確認ポイントは、画面が表示されたことだけではありません。ボタン操作を受け付け、Shopifyのデータを変更し、その結果を確認できることまでが一つの動作確認です。

次に、アプリのトップページを担当するファイルで見出しの文字を変更し、保存後に画面へ反映されるか試してみましょう。最初は表示テキストだけを変更すると、既存の認証やAPI処理に影響を与えず、編集の流れをつかめます。

ステップ5：主要ファイルの役割を理解する

生成されたコードをすべて読む必要はありません。まず、画面・認証・設定・データ保存の場所を把握しましょう。

以下は主要なファイルの例です。言語やテンプレートの更新により、拡張子や構成は異なります。

標準テンプレートでは、セッションデータの保存にPrismaとSQLiteを使います。画面のファイルと認証設定を分けて理解すると、変更する場所を探しやすくなります。公式：React Routerテンプレート

React Routerの「画面」と「サーバー処理」

React Routerを使ったShopifyアプリでは、ページを表示するReactコンポーネントと、サーバー側で実行するデータ取得・更新処理を組み合わせます。

Shopifyの認証が必要な処理では、公式パッケージのauthenticate.admin(request)などを使います。サーバー側でストアやアクセス権限を確認したうえで、APIを呼び出す構成を基本として学ぶと整理しやすくなります。公式：Shopify App package for React Router

ステップ6：UI・API・認証の基本を押さえる

UIはPolaris Web ComponentsとApp Bridgeを使う

Polarisは、Shopifyの画面と一貫した見た目や操作性を実現するための仕組みです。現在のApp Home向け公式資料では、Polaris Web Componentsが推奨されています。

s-pageやs-sectionなどのコンポーネントを組み合わせ、見出し・入力フォーム・一覧などを作成します。App Bridgeは、アプリとShopify管理画面を連携させる役割を担います。

古いPolaris Reactのコードを使う場合は、そのまま新しいテンプレートへ貼り付けず、現在のコンポーネントやプロパティとの違いを確認してください。また、Polarisの読み込みバージョンとTypeScriptの型定義は整合させる必要があります。公式：App HomeとPolaris

Shopifyの管理データにはGraphQL Admin APIを使う

商品・注文・顧客などの管理データを扱う中心的なAPIが、GraphQL Admin APIです。

GraphQLでは、データを取得する処理をQuery、作成・更新・削除する処理をMutationと呼びます。たとえば商品一覧の取得はQuery、商品の作成はMutationです。

REST Admin APIは2024年10月1日からレガシー扱いとなり、2025年4月1日以降の新規公開アプリではGraphQL Admin APIの使用が必須です。新しく学ぶ場合はGraphQLを基本に進めましょう。公式：REST Admin APIの位置づけ

必要なアクセス権限だけを指定する

アクセススコープは、アプリが扱えるデータと操作を決める権限です。

たとえば、商品の閲覧だけならread_products、作成・更新まで必要ならwrite_productsを使います。書き込みスコープには読み取り権限も含まれます。

CLIで作るアプリでは、shopify.app.tomlに必要なスコープを宣言します。Shopify managed installationにより、インストールや権限変更に伴う承認が管理されます。認証フローを自己流で置き換える前に、テンプレートがどこまで処理しているかを確認しましょう。公式：認証とアクセススコープ

開発用ストアではshopify app dev実行中に設定変更が反映されますが、本番への設定反映にはデプロイが必要です。公式：アプリ設定

APIバージョンを明示して管理する

2026年9月17日時点の最新安定版は2026-07です。2026-10はリリース候補版であり、本番用の最新安定版とは異なります。

APIにはサポート期間があります。公式サンプルに別のバージョンが記載されていても、数字だけを置き換えるのではなく、使用するフィールドやライブラリの対応を確認して更新してください。公式：APIバージョンとリリーススケジュール

ステップ7：サンプルから自分の機能へ進める

最初の機能は、対象データと操作を絞るのがおすすめです。たとえば「商品を5件表示する」「選んだ商品のタグを更新する」程度にすると、画面・API・権限の関係を追いやすくなります。

機能を追加するときは、次の順に整理してください。

1. 誰が、どの画面から操作するかを決める。

2. Shopifyから取得・更新するデータを決める。

3. 必要なAPIとアクセススコープを確認する。

4. 正常時だけでなく、データがない場合や更新に失敗した場合の画面を考える。

5. 開発用ストアで操作し、Shopify側のデータまで確認する。

もう少しまとまった題材に取り組むなら、公式のQRコードアプリ作成チュートリアルが参考になります。商品用QRコードの作成や読み取り回数の表示を題材に、データ保存・認証・画面作成を学べます。

記事と公式チュートリアルを行き来する場合は、同じReact Router向けの手順を選び、古いRemix版のファイルを混ぜないようにしましょう。

自動処理にはWebhookも検討する

管理画面でボタンを押す処理とは別に、注文の作成や商品の更新をきっかけに動かしたい場合は、Webhookを検討します。

Webhookは、Shopify側で発生したイベントの通知をアプリが受け取る仕組みです。受信処理では、通知元の検証や重複への対処が必要になります。画面を作れたことと、自動処理を安定運用できることは分けて確認してください。公式：Webhookの概要

ステップ8：本番環境へ公開する

ローカルで動作しても、そのまま利用者へ提供できるわけではありません。shopify app devは開発用です。PCを閉じても動き続ける本番環境を別途用意します。

Webアプリ本体とShopify側の設定を分ける

shopify app deployだけでは、Webアプリ本体はホスティングされません。 このコマンドはShopify側の設定・拡張機能をまとめたアプリバージョンを作成し、通常はリリースまで行います。公式：app deploy

開発用と本番用の設定を分ける

本番公開後も開発を続けるため、開発用と本番用のアプリ・設定を分けて管理します。

shopify app config link

CLIの案内に従い、本番用アプリに対応する設定ファイルを用意します。たとえばshopify.app.production.tomlを使用する構成なら、以降のコマンドで--config productionを明示できます。

どの設定ファイルが、どのアプリのClient IDに対応するかを確認してから操作しましょう。ファイル名を変えるだけでは、開発用と本番用のアプリを分離したことにはなりません。公式：アプリ設定ファイルの管理

本番の実行環境と保存先を用意する

本番環境には、HTTPSでアクセスできるWebアプリの実行環境と、継続してデータを保存できる仕組みが必要です。

テンプレートのSQLiteはローカル開発を始めやすい構成ですが、本番ではファイルの永続化や複数インスタンスからの利用を考慮する必要があります。再デプロイでセッション情報が消える構成にしないよう、保存先を設計してください。公式：ホスティングとデータベースの準備

AWSで構成するなら、API GatewayでHTTPリクエストを受け、Lambdaで処理し、DynamoDBにセッションや業務データを保存する構成が候補になります。ただし、これは追加設計が必要な構成例です。標準テンプレートをそのままアップロードして動くわけではなく、実行環境への適合とセッション保存処理の変更が必要です。

Webサーバー形式のアプリをLambdaで動かす方法としては、AWS Lambda Web Adapterもあります。AWSへの対応は、まずローカルでの動作を理解してから取り組むと切り分けやすくなります。AWS公式：Lambda Web Adapter

環境変数と公開URLを設定する

アプリの設定情報は、対象の設定ファイルを指定して確認できます。

shopify app env show --config production

主に確認する項目は以下です。

SCOPES環境変数はShopify managed installationでは必須ではありませんが、実際のコードが参照しているかを確認してください。秘密情報はホスティング環境の安全な設定機能で管理し、リポジトリに含めないようにします。公式：本番環境変数、公式テンプレート：Hosting

本番用TOMLのapplication_urlは、SHOPIFY_APP_URLと一致させます。認証のリダイレクトURLも、アプリが実際に使用する本番URLへ更新します。

ビルドとデプロイを行う

標準テンプレートのビルドは次のコマンドで行います。

npm ci
npm run build

その後、選んだホスティング環境の手順でアプリ本体を公開します。標準のNode.jsサーバー構成ではnpm run setupやnpm run startを使いますが、Lambdaなどへ構成を変更した場合は、採用した実行方式に合わせてください。公式：Webアプリの公開手順

Shopify側には、本番用設定を指定して反映します。

shopify app deploy --config production

表示されるアプリ名と変更内容を確認して実行します。なお、Shopify側で以前のアプリバージョンへ戻しても、自分のホスティング環境へ公開したコードまでは戻りません。両者を対応づけて管理しましょう。公式：アプリバージョンのデプロイ

公開後はローカルサーバーを止めて確認する

公開後は、ローカルの開発サーバーを停止した状態で次を確認します。

• 対象ストアから本番アプリを開ける。

• 認証後に正しい画面が表示される。

• 商品などのデータ取得・更新が成功する。

• 再起動や再デプロイ後も、必要なデータが保持される。

• Webhookを利用している場合、本番の受信先で処理できる。

この確認により、開発用トンネルに依存したままになっていないかも判断できます。

Shopify App Storeへ公開する場合に必要な準備

不特定多数のストアへ提供する場合は、アプリの開発に加えて、公開審査への準備が必要です。

機能の説明、サポート窓口、インストール後の案内、料金表示など、利用者が迷わず使える状態を整えます。アプリの種類や利用機能によって要件が変わるため、提出前に公式の要件を確認してください。公式：App Store向けのベストプラクティス

特に、顧客情報や注文情報を扱うアプリは、APIスコープの設定だけで利用できると考えないことが大切です。保護対象の顧客データには、アクセス要件や審査が関係します。取得する項目を必要最小限に絞り、利用目的・保存・削除まで設計しましょう。公式：保護対象の顧客データ

初心者がつまずきやすい問題と確認方法

トンネルを使わないshopify app dev --use-localhostもありますが、WebhookなどShopifyから直接アプリを呼び出す機能のテストには使えません。接続エラーを回避するために変更する場合も、検証できる範囲を確認してください。公式：app dev、公式テンプレート：トラブルシューティング

最初の目標は「自分で一つ変更して、結果を確認できること」

最初から認証・データベース・インフラ・公開審査のすべてを完成させようとすると、どこでつまずいたかを判断しにくくなります。

まずは開発用ストアでサンプルを起動し、見出しを変更する、商品を作成する、取得する情報を変える、といった小さな操作を試してください。何を変更し、どの画面やデータに反映されたかを確認することで、アプリの仕組みを理解できます。

そのうえで、実際の業務課題を一つ選び、必要な権限・画面・処理・保存先を順に設計していきましょう。テンプレートを起動できることは出発点です。利用者へ提供する段階では、失敗時の動作やデータの保護、継続的な更新まで含めて、使い続けられる状態に整える必要があります。