環境セットアップ

Shopifyのコードを1行書く前に、適切に構成された開発環境が必要です。このレッスンでは、macOS、Linux、Windows（WSL2）向けの正確なコマンドとともに、必要なすべてのツールを説明します。レッスン終了時には、Claude Code、Shopify CLI、Shopify開発ストアの準備が完了します。

必要なツールの概要

ツール	用途	バージョン
Node.js	JavaScriptランタイム	20以上（LTS推奨）
npm	パッケージマネージャー	Node.jsに付属
Claude Code	Agentic coding CLI	最新版
Shopify CLI	Shopify開発ツールキット	最新版（v3以上）
Git	バージョン管理	2.30以上
VS CodeまたはCursor	コードエディタ	最新版

ステップ1：Node.js 20以上のインストール

Shopify CLIとClaude Codeはどちらもnode.jsを必要とします。バージョンを簡単に切り替えられるように、nvm（Node Version Manager）の使用をお勧めします。

macOS / Linux

# nvmのインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# ターミナルを再起動してから、Node.js 20 LTSをインストール
nvm install 20
nvm use 20
nvm alias default 20

# インストールの確認
node --version   # v20.x.xと表示されるはず
npm --version    # 10.x.xと表示されるはず

Windows（WSL2）

ネイティブWindowsではなくWSL2を使用してください

Shopify CLIとClaude CodeはUnixライクな環境で最も効果的に動作します。まずWSL2をインストールしてから、WSL2ターミナル内でmacOS/Linuxの手順に従ってください。

# PowerShell（管理者として）で実行
wsl --install -d Ubuntu

# WSL2のセットアップ後、Ubuntuターミナルを開いてnvmをインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 20

Node.jsの確認

以下を実行してすべてが正常に動作していることを確認します：

node -e "console.log('Node.js', process.version, 'is ready')"
# 期待される出力: Node.js v20.x.x is ready

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

Claude CodeはAnthropicのコマンドラインコーディングエージェントです。ターミナルで実行し、ファイルの読み取り、コマンドの実行、MCPサーバーとの対話が可能です。

# Claude Codeをグローバルにインストール
npm install -g @anthropic-ai/claude-code

# インストールの確認
claude --version

Anthropic APIキーの設定

Claude CodeがAnthropicのモデルと通信するにはAPIキーが必要です。console.anthropic.comで取得してください。

# オプション1：シェルプロファイル（~/.zshrcまたは~/.bashrc）に設定
export ANTHROPIC_API_KEY="sk-ant-your-key-here"

# オプション2：Claude Codeが初回実行時にプロンプトを表示
claude

APIキーを保護してください

Anthropic APIキーはアカウントへのフルアクセスを付与します。Gitにコミットしたり、スクリーンショットで共有したり、公開チャンネルに貼り付けたりしないでください。環境変数またはシークレットマネージャーを使用してください。

Claude Codeのテスト

Claude Codeが動作していることを確認するための簡単なテストを実行します：

# プロジェクトディレクトリでClaude Codeを開始
cd ~/shopify-projects
claude

# Claude Code内で簡単なプロンプトを試す：
# > Create a file called hello.js that prints "Hello from Claude Code"

Claude Codeがファイルを作成し、node hello.jsで動作を確認できます。

ステップ3：Shopify CLIのインストール

Shopify CLIは、アプリの作成、テーマの管理、エクステンションの管理、Shopifyへのデプロイのための主要ツールです。

# Shopify CLIをグローバルにインストール
npm install -g @shopify/cli @shopify/app

# インストールの確認
shopify version
# 期待される出力: @shopify/cli/3.x.x

# パートナーアカウントで認証
shopify auth login

shopify auth loginコマンドはブラウザウィンドウを開きます。Shopifyパートナーアカウントの認証情報でログインしてください。

Shopify CLI v3以上のアーキテクチャ

Shopify CLI v3はoclifフレームワーク上に構築され、プラグインアーキテクチャを使用しています。@shopify/appパッケージはアプリ固有のコマンドを追加します。shopify app initを実行すると、CLIがShopify固有のツールが組み込まれた完全なRemixアプリケーションをスキャフォールドします。

Shopify CLIの確認

# 利用可能なコマンドを一覧表示
shopify commands

# アプリコマンドが利用可能か確認
shopify app --help

ステップ4：Shopifyパートナーアカウントの作成

まだ持っていない場合は、無料のShopifyパートナーアカウントを作成します：

1. partners.shopify.comにアクセス
2. 今すぐ登録をクリックして詳細を入力
3. メールアドレスを確認
4. パートナーオンボーディングアンケートに回答

パートナーアカウントにより以下にアクセスできます：

• 無制限の開発ストア（テスト用の無料Shopifyストア）
• アプリとストアを管理するパートナーダッシュボード
• アプリを公開またはマーチャントを紹介した際の収益シェア
• Shopify Academyのコースと認定資格

ステップ5：開発ストアの作成

開発ストアは有効期限のない無料のShopifyストアで、すべての機能が含まれています。このコースには少なくとも1つ必要です。

パートナーダッシュボード経由

1. partners.shopify.comにログイン
2. 左サイドバーのストアに移動
3. ストアを追加をクリック
4. 開発ストアを作成を選択
5. テストとビルド用のストアを作成を選択
6. ストア名を入力（例：masterclass-dev）
7. 商品と注文を事前に入力するためにテストデータで開始を選択
8. 開発ストアを作成をクリック

Shopify CLI経由

# CLIから直接開発ストアを作成
shopify app dev --store=masterclass-dev
# 必要に応じてCLIがストア作成をガイドします

テストデータの事前入力

開発ストアを作成する際は、常に「テストデータで開始」を選択してください。サンプルの商品、コレクション、顧客、注文がすぐに使用できるようになります。リアルに見えるデータで構築する方が、ゼロから始めるよりもはるかに生産的です。

ステップ6：コードエディタのセットアップ

VS Code

Shopify開発には以下のエクステンションを含むVS Codeをお勧めします：

# ターミナルからVS Codeエクステンションをインストール
code --install-extension Shopify.theme-check-vscode
code --install-extension GraphQL.vscode-graphql
code --install-extension GraphQL.vscode-graphql-syntax
code --install-extension bradlc.vscode-tailwindcss
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode

エクステンション	用途
Shopify Theme Check	Liquidファイルのリンティングとオートコンプリート
GraphQL	GraphQLの構文ハイライトと検証
Tailwind CSS IntelliSense	Tailwindのオートコンプリート（Hydrogenで使用）
ESLint	JavaScript/TypeScriptのリンティング
Prettier	コードフォーマッティング

Cursor

AI搭載のVS CodeフォークであるCursorを好む場合、同じエクステンションが動作します。Cursorにはインラインの提案を行う組み込みAI機能もあり、Claude Codeと相性が良いです。インラインの提案にはCursorを、より大きなマルチファイルのagenticタスクにはClaude Codeを使用してください。

推奨VS Code設定

.vscode/settings.jsonに以下を追加します：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "files.associations": {
    "*.liquid": "liquid"
  },
  "emmet.includeLanguages": {
    "liquid": "html"
  },
  "[liquid]": {
    "editor.defaultFormatter": "Shopify.theme-check-vscode"
  }
}

ステップ7：Gitの設定

バージョン管理は必須です。Gitにあなたのアイデンティティを設定します：

# Gitのアイデンティティを設定
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# デフォルトブランチ名を設定
git config --global init.defaultBranch main

# 便利なGit設定を有効化
git config --global pull.rebase true
git config --global fetch.prune true

グローバル.gitignoreの作成

Shopifyプロジェクトにはコミットすべきでないファイルが含まれています：

# グローバルgitignoreを作成
cat >> ~/.gitignore_global << 'EOF'
# Environment variables
.env
.env.local
.env.*.local

# Dependencies
node_modules/

# Shopify
.shopify/

# OS files
.DS_Store
Thumbs.db

# Editor
.vscode/settings.json
.idea/
EOF

git config --global core.excludesfile ~/.gitignore_global

確認チェックリスト

すべてが正しくセットアップされていることを確認するために、このチェックリストを実行します：

# Node.js 20以上
node --version

# npm 10以上
npm --version

# Claude Code
claude --version

# Shopify CLI 3以上
shopify version

# Git 2.30以上
git --version

# Shopify認証
shopify auth login --check 2>/dev/null && echo "Authenticated" || echo "Run: shopify auth login"

Claude Codeで自動化

これがagentic codingの最初の体験です。Claude Codeを起動して次のように聞いてみてください：「Shopify開発用の開発環境が正しくセットアップされているか確認して。Node.js 20以上、Shopify CLI、Gitがインストールされているか検証して。」Claude Codeがコマンドを実行して、不足しているものを教えてくれます。

次のステップ

環境の準備が完了しました。次のレッスンでは、shopify app initを使って最初のShopifyアプリを作成し、開発ストアにインストールします。