Skip to main content

Claude Code入門

Claude CodeはAnthropicのエージェンティックなターミナルコーディングツールです。ブラウザウィンドウで動作するチャットベースのAIアシスタントとは異なり、Claude Codeはターミナル内に存在し、コードベースを読み取り、コマンドを実行し、ファイルを編集し、複雑な多段階の開発タスクを自律的に管理します。

Shopify開発者にとって、Claude Codeは革新的です。Shopifyエコシステム -- Liquidテンプレート、GraphQL Admin APIスキーマ、Polarisコンポーネント、App Bridge、Shopify Functions、テーマアーキテクチャ -- を理解し、実際のプロジェクトコンテキスト内でそれらすべてを同時に扱うことができます。

なぜShopify開発にClaude Codeなのか？​

従来のAIコーディングアシスタントでは、コードスニペットをコピー＆ペーストでやり取りする必要があります。Claude Codeはその摩擦を完全に排除します:

  • 直接ファイルアクセス: Claude Codeはプロジェクトファイルをその場で読み取り、編集します
  • コマンド実行: shopify app dev、npm test、GraphQLイントロスペクションクエリなど、あらゆるターミナルコマンドを実行します
  • マルチファイル認識: LiquidセクションとJavaScriptの関係、アプリ拡張機能とバックエンドの接続、GraphQLクエリとデータモデルのマッピングを理解します
  • 反復的開発: スキャフォールド、テスト、デバッグ、改善を1つのセッションで行えます
Claude Codeの「エージェンティック」とは？

「エージェンティック」という用語は、Claude Codeが質問に答えるだけでなく、アクションを実行することを意味します。「商品ページにメタフィールドを追加して」と頼むと、テーマファイルを読み、正しいセクションを特定し、Liquidコードを記述し、スキーマを更新し、変更が正しくコンパイルされることを確認します。計画し、実行し、検証するのです。

インストール​

Claude CodeにはNode.js 18以降が必要です。npmでグローバルにインストールします:

Claude Codeのインストール
npm install -g @anthropic-ai/claude-code

グローバルインストールを避けたい場合:

グローバルインストールなしで実行
npx @anthropic-ai/claude-code
システム要件
  • Node.js: バージョン 18.0.0 以降
  • オペレーティングシステム: macOS、Linux、またはWSL2経由のWindows
  • ターミナル: 任意のターミナルエミュレーター（iTerm2、Terminal.app、Warp、Windows Terminal）
  • Git: バージョン管理統合に推奨

認証​

インストール後、任意のディレクトリでClaude Codeを起動します:

Claude Codeの起動
claude

初回起動時、Claude Codeは認証を求めます。2つのオプションがあります:

オプション1: Anthropic APIキー（直接）​

APIキーで認証
export ANTHROPIC_API_KEY=sk-ant-api03-your-key-here
claude

永続化するためにシェルプロファイル（~/.zshrcまたは~/.bashrc）に追加することもできます:

シェルプロファイルに追加
echo 'export ANTHROPIC_API_KEY=sk-ant-api03-your-key-here' >> ~/.zshrc
source ~/.zshrc

オプション2: Claude Pro/Maxサブスクリプション（OAuth）​

Claude ProまたはMaxサブスクリプションをお持ちの場合、Claude Codeはanthropicアカウント経由でOAuth認証できます。claudeを実行してブラウザベースのログインフローに従うだけです。すでにClaudeサブスクリプションをお持ちの方にとって最もシンプルなオプションです。

ブラウザ経由で起動・認証
claude
# ブラウザのOAuthプロンプトに従ってください
Shopify開発の推奨プラン

Claude Maxプラン（$100/月または$200/月）は、集中的なShopify開発に最適な体験を提供します。上位Maxプランは大幅に多い使用量を提供し、大規模なShopifyコードベースで多くのコンテキストを消費する場合に重要です。Maxプランの使用量は通常、集中的な開発の1日分に十分です。

CLAUDE.mdプロジェクトファイルの理解​

CLAUDE.mdファイルは、効果的なShopify開発におけるClaude Codeの最も重要な設定です。プロジェクトルートに配置され、Claude Codeがすべてのセッション開始時に読み込む永続的なコンテキストを提供します。

CLAUDE.mdは、チームに参加するエキスパート開発者へのブリーフィング資料だと考えてください。Claude Codeに以下を伝えます:

  • プロジェクトの概要と構造
  • 従うべきコーディング標準と規約
  • 使用中のShopify APIとバージョン
  • プロジェクトの実行、テスト、デプロイ方法
  • よくある落とし穴とプロジェクト固有のルール
Shopifyアプリ向けCLAUDE.mdの例
# Project: My Shopify App

## Overview
Remix-based Shopify app for inventory management.
Uses Shopify API version 2025-01.

## Tech Stack
- Framework: Remix (Shopify app template)
- Database: Prisma with SQLite (dev) / PostgreSQL (prod)
- UI: Shopify Polaris React components
- Auth: Shopify App Bridge + session tokens

## Commands
- `npm run dev` - Start development server
- `npm run build` - Production build
- `shopify app dev` - Start with Shopify CLI
- `npm test` - Run Vitest suite
- `npx prisma db push` - Sync database schema

## Coding Standards
- Use TypeScript strict mode
- All API calls must use the authenticated admin client
- Use Polaris components exclusively for UI (no custom CSS for standard patterns)
- GraphQL queries go in `app/graphql/` directory
- Validate all webhook payloads with HMAC verification

## API Version
Always use API version 2025-01. Do not use unstable.

CLAUDE.mdの階層​

Claude Codeは CLAUDE.md ファイルの階層をサポートしています:

場所スコープ用途
~/.claude/CLAUDE.mdグローバルすべてのプロジェクトにわたる個人設定
./CLAUDE.mdプロジェクトルートプロジェクト固有のコンテキストとルール
./src/CLAUDE.mdサブディレクトリモジュール固有のガイダンス

ファイルはトップダウンでマージされ、より具体的なファイルが優先されます。

コンテキストウィンドウの管理​

Claude Codeはコンテキストウィンドウ内で動作します -- 一度にメモリに保持できるテキスト（コード、会話、ファイル内容）の合計量です。効果的なコンテキスト管理は、生産性の高いShopify開発セッションに不可欠です。

コンテキストの消費方法​

すべてのインタラクションがコンテキストに追加されます:

  • プロンプトとClaudeの応答
  • Claude が読み取るファイル内容
  • ターミナル実行からのコマンド出力
  • エラーメッセージとログ

大規模なShopifyテーマには50以上のLiquidファイルがある場合があります。それらをすべて一度に読み込むと、かなりのコンテキストを消費します。Claude Codeはこれについて賢く、すべてを先に読み込むのではなく、必要に応じてファイルを読み込みます。

コンテキスト管理コマンド​

必須コンテキストコマンド
# 現在のコストとトークン使用量を確認
/cost

# 会話をコンパクト化（履歴を要約してコンテキストを解放）
/compact

# 会話全体をクリアして最初からやり直す
/clear
/compact と /clear の使い分け

タスクの途中で、議論の要点を保持しながらコンテキストを解放したい場合は**/compactを使用してください。まったく異なるタスクに切り替え、以前のコンテキストが不要な場合は/clear**を使用してください。

Shopify開発の良いリズム: 個々の機能やバグ修正を完了した後に/compactを使い、テーマ作業とアプリ開発を切り替える際に/clearを使います。

大規模Shopifyプロジェクトの戦略​

  1. 集中したセッションで作業する: Claude Codeに「テーマ全体をリファクタリングして」と頼む代わりに、一度に1つのセクションに焦点を当てる
  2. CLAUDE.mdを積極的に活用する: 安定したコンテキスト（APIバージョン、規約、ファイル構造）をCLAUDE.mdに入れて繰り返しの必要をなくす
  3. マイルストーン後に/compactを活用する: 機能を完了したら、次に進む前にコンパクト化する
  4. ファイルパスを具体的に指定する: 「商品ページを編集して」ではなく「sections/product-main.liquidを編集して」と言い、不要なファイル検索を避ける

コストと使用量の段階​

Claude Codeの使用量は、処理されたトークン（入力と出力の両方）に基づいて計測されます。料金を理解することで効果的に予算を立てられます。

サブスクリプションプラン​

プラン月額費用最適な用途
Claude Pro$20/月軽度の使用、時折のコーディング支援
Claude Max (5x)$100/月定期的な開発、ほとんどのShopify開発者
Claude Max (20x)$200/月日常的にヘビーに使用、フルタイムのShopify開発

APIキー料金​

APIキーを直接使用する場合、トークン単位で支払います:

モデル入力（100万トークンあたり）出力（100万トークンあたり）
Claude Sonnet 4$3.00$15.00
Claude Opus 4$15.00$75.00
使用量に注意

1回の集中的なShopify開発セッション（完全なアプリ機能の構築）で数十万トークンを処理する場合があります。APIキー料金では、これが急速に積み上がります。定期的な開発作業では、Maxサブスクリプションの方がAPIキー使用よりもほぼ常にコスト効率が高いです。

使用量のモニタリング​

開発中は/costコマンドを頻繁に使用してください:

> /cost
Session cost: $2.34
Total tokens: 145,230 input / 23,456 output

クイックスタート: 最初のShopifyセッション​

すべてが正しく動作することを確認する完全なワークフロー:

最初のShopify + Claude Codeセッション
# 1. Shopifyプロジェクトに移動
cd ~/my-shopify-app

# 2. CLAUDE.mdファイルを作成
echo "# My Shopify App\nRemix-based app using API version 2025-01" > CLAUDE.md

# 3. Claude Codeを起動
claude

# 4. Claude Codeにプロジェクトの探索を依頼
> Explore this project structure and summarize what you find

# 5. ビルドを開始
> Create a new page in the app that displays a list of products using GraphQL and Polaris components

Claude Codeはプロジェクトファイルを読み、構造を理解し、コードを書き、開発サーバーを実行して結果を確認することさえできます。エージェンティックなShopify開発へようこそ。

次のステップ​

Claude Codeのインストールと設定が完了したら、Shopify開発ワークフローに進んで、テーマ開発、アプリ構築、Claude Codeでのデバッグの具体的なパターンを学びましょう。