プロジェクトを作って動かす
shopify app initから開発ストアでアプリが開くまでを自分で通せる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、shopify app initから開発ストアでアプリが開くまでを、自分の手で通せるようになります。
受託では、CLIが自動でやることと自分で持つもの（ホスティング）が分かれば、その先は普通のWeb開発として進められます。
shopify app initで何ができるか
プロジェクトのひな形を作るコマンドです。
テンプレートはReact Router（推奨）を選びます。
Remix世代のテンプレートやブログ記事はimportが違うので、混ぜないようにします。
shopify app devは何を自動でやるのか
開発に必要な準備をまとめてやってくれるコマンドです。
組織・アプリ・開発ストアを選ぶと、Dev Dashboardにアプリを作り、PrismaのSQLite（セッション保存用のデータベース）を用意します。
続けてトンネル（ローカルを公開URLにする仕組み）を張り、開発ストアへ自動でインストールし、変更を即時に反映します。
初回はここでclient_idがTOMLに書き込まれます。--use-localhostでトンネル無しにもできます。
どのファイルを触るのか
生成されたプロジェクトで主に触る場所は5つです。app/routes/が画面とAPI、app/shopify.server.tsが認証とクライアント、prisma/がセッション保存、extensions/が拡張、shopify.app.tomlが設定です。
発展：shopify app deployと環境変数
shopify app deployは、拡張と設定をまとめて「アプリバージョン」としてShopifyに配布します。
本体（Webサーバー）はデプロイされません。
ホスティングは別に用意します。
環境変数はSHOPIFY_API_KEY / SHOPIFY_API_SECRET / SCOPES / SHOPIFY_APP_URLで、.envはGitに入れません。app系コマンドはアプリのプロジェクト内で実行します（グローバルのCLIだけでは「Command not found」になります）。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。