Skip to main content

5分でShopify向けClaude Codeを始める

· One min read
Shopify Dev MasterClass Team
Shopify Dev MasterClass Team
Core Contributors

Claude Codeについて聞いたことはあるけれど、Shopify開発ワークフローにどう組み込むかわからない方のために、このガイドでは5分以内にセットアップして稼働させます。終了時には、Claude Codeがインストールされ、Shopify作業用に設定され、最初のAI支援ストア操作を実行できているでしょう。

前提条件​

始める前に、以下を準備してください：

  • マシンにNode.js 18以上がインストールされている
  • Shopifyパートナーアカウント（partners.shopify.comで無料作成）
  • サンプル商品を含む開発ストア
  • 適切なスコープを持つShopify Admin APIアクセストークン

ステップ1：Claude Codeのインストール​

Claude Codeをマシンに入れるには1つのコマンドだけです：

npm install -g @anthropic-ai/claude-code

インストールの確認：

claude --version

ターミナルにバージョン番号が表示されるはずです。権限エラーが発生した場合は、npmプレフィックスの設定が必要か、sudoを使用する必要があるかもしれません（ただし、npm権限の修正をお勧めします）。

ステップ2：Shopifyプロジェクトの初期化​

Shopifyプロジェクトディレクトリに移動するか、新しく作成します：

mkdir my-shopify-app && cd my-shopify-app
npm init -y
npm install @shopify/shopify-api @shopify/shopify-app-remix

プロジェクト内でClaude Codeを起動します：

claude

Claudeがプロジェクト構造を分析し、コンテキストを自動的に理解します。すぐにShopify固有の質問を始められます。

ステップ3：ShopifyアクセスのためのMCP設定​

Shopify開発でのClaude Codeの真の力は、MCP（Model Context Protocol）を通じてストアに接続することから生まれます。プロジェクトルートに.mcp.jsonファイルを作成します：

{
  "mcpServers": {
    "shopify-dev-store": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic-ai/shopify-mcp-server",
        "--store", "your-store.myshopify.com",
        "--token", "${SHOPIFY_ACCESS_TOKEN}"
      ],
      "env": {
        "SHOPIFY_ACCESS_TOKEN": ""
      }
    }
  }
}

アクセストークンを環境変数として設定します：

export SHOPIFY_ACCESS_TOKEN="shpat_xxxxxxxxxxxxxxxxxxxxx"

これでClaude Codeを起動すると、MCPサーバーを通じてShopifyストアデータに直接アクセスできます。

ステップ4：最初のAI支援コマンド​

Claude Codeがストアに接続されたら、これらの便利な開始コマンドを試してください：

ストアデータの探索​

> List all products in my store with their variants and prices

ClaudeがMCP接続を使ってストアのAdmin APIにクエリし、構造化された商品データをターミナルに直接返します。

Shopifyコードの生成​

> Create a webhook handler for orders/create that sends a Slack notification

ClaudeがWebhook検証、ペイロード解析、Slack API呼び出しを処理する本番対応コードを生成します。すべてShopifyのベストプラクティスに従って。

API問題のデバッグ​

> I'm getting a 429 error when querying the Storefront API. Help me implement proper rate limiting.

ClaudeはShopifyのレート制限モデル（RESTのリーキーバケットアルゴリズムとGraphQLのクエリコスト）を理解し、適切なリトライロジックを生成します。

Shopify開発で最も便利なコマンド​

毎日使うClaude Codeコマンドは以下の通りです：

コマンドパターン動作
> Show me the GraphQL query to fetch products with metafieldsStorefrontまたはAdmin APIの正しいクエリを生成
> Create a Shopify Function for a volume discountRustまたはJavaScriptで完全なShopify Functionをスキャフォールド
> Convert this REST API call to GraphQL非推奨のRESTパターンをモダンなGraphQLに移行
> Review this Liquid template for performance issuesテーマコードを分析し最適化を提案
> Set up a CI pipeline for this Shopify appGitHub Actionsまたは同様のCI設定を生成

よくある落とし穴と回避方法​

落とし穴1：APIバージョンの不一致​

Claudeがアプリで設定されているものと異なるAPIバージョンをターゲットにしたコードを生成する場合があります。プロンプトで常にバージョンを指定してください：

> Generate a product query using the 2026-01 Admin API version

またはより良い方法として、shopify.app.tomlに正しいバージョンがあることを確認すれば、Claudeがコンテキストから拾います。

落とし穴2：スコープの混乱​

MCP経由で特定のストアデータにClaudeがアクセスできない場合、スコープの問題である可能性が高いです。アクセストークンに必要なスコープが含まれていることを確認してください：

# 開発用の一般的なスコープ
read_products, write_products
read_orders, write_orders
read_customers
read_inventory, write_inventory

落とし穴3：トークンのセキュリティ​

ハードコードされたトークンを含む.mcp.jsonをコミットしないでください。上記のように常に環境変数を使用し、.mcp.jsonを.gitignoreに追加してください：

echo ".mcp.json" >> .gitignore

落とし穴4：GraphQLクエリの複雑さ​

ShopifyのGraphQL APIにはクエリコスト制限があります。Claudeが深くネストされたクエリを生成した場合、最適化を依頼してください：

> This query exceeds the cost limit. Refactor it to use pagination and reduce nesting.

次のステップ​

Shopify開発用にClaude Codeがセットアップできたので、ワークフローを強化する準備が整いました。今後の投稿では以下をカバーします：

  • Claude Codeをペアプログラマーとしてゼロから完全なShopifyアプリを構築
  • マルチストア管理のための高度なMCP設定
  • Claude Codeを使ったテーマのLiquidからHydrogenへの移行

Claude CodeとShopify開発の組み合わせは本当に変革的です。Shopify APIサーフェスエリアを理解するAIアシスタントのスピードを一度体験すると、ドキュメントのみの開発に戻るのは痛々しく遅く感じるでしょう。

ぜひ試してみて、感想をお聞かせください。