Shopify開発マスタークラスの紹介

Shopify開発マスタークラスへようこそ。Agentic Codingの力を活用して、最新のShopifyアプリケーション、テーマ、インテグレーションを構築するための決定版コースです。これは一般的なShopifyチュートリアルではありません。Shopifyの強力なプラットフォームとClaude Code、そしてModel Context Protocol（MCP）を組み合わせることで、ソフトウェア開発に対する考え方を根本から変えていきます。

このコースの対象者

このコースは、3つの重なり合う対象者のために設計されています：

• コーディングしたいマーチャント。 Shopifyストアを運営していて、必要な機能にほぼ近いアプリに料金を支払うのにうんざりしている方。技術的な興味はあっても、コンピューターサイエンスの学位は持っていないかもしれません。Agentic Codingはあなたの力を何倍にもする存在です。基礎を学んでいる段階でも、AIの支援を受けて本物の機能を構築できます。

• Shopify初心者の開発者。 JavaScript、React、または他の言語を知っているけれど、Shopifyプラットフォームで構築した経験がない方。エコシステム -- API、拡張ポイント、パートナーダッシュボード、デプロイモデル -- を理解する必要があり、素早く学びたいと考えている方。

• AIに興味があるビルダー。 AI支援コーディングについて聞いたことはあるが、オートコンプリート以上のことをしたい方。ドキュメントを読み、APIを呼び出し、シェルコマンドを実行し、機能全体を自律的に構築できるAIエージェントの意味を理解したい方。MCPサーバーがClaude CodeをShopify開発の強力なツールにする方法を見たい方。

Shopifyの事前経験は不要

進度は速めですが、すべての概念を基礎から説明します。JavaScriptが読めてターミナルを操作できれば、始めるために必要なものはすべて揃っています。

Agentic Codingとは？

従来のAIコーディングアシスタントは、次のコード行を提案します。Agentic Codingは根本的に異なります。Claude Codeのようなagentic codingシステムは以下のことができます：

1. コンテキストを理解する -- プロジェクト全体、ドキュメント、APIスキーマを読み取る
2. 複数ステップのソリューションを計画する -- 複雑な機能を実装ステップに分解する
3. 自律的に実行する -- コマンドの実行、ファイルの作成、依存関係のインストール、APIの呼び出し
4. フィードバックに基づいて反復する -- エラーメッセージを読み、バグを修正し、ソリューションが動作するまで改善する
5. ツールから学習する -- MCPサーバーを使用してライブのShopifyデータ、ドキュメントなどにアクセスする

これはスペルチェッカーと共著者の違いのようなものです。Claude Codeは誤字を修正するだけでなく、本全体の執筆を手助けします。

Claude Code + MCPのパラダイムシフト

Claude CodeはAnthropicのCLIベースのコーディングエージェントです。ターミナルで実行し、ファイルシステム、シェル、開発ツールへのフルアクセスを持ちます。しかし、Shopify開発で真に強力なのは**Model Context Protocol（MCP）**です。

MCPは、AIエージェントが統一プロトコルを通じて外部ツールやデータソースに接続できるオープン標準です。Shopify開発においては、Claude Codeが以下のことを可能にします：

• ShopifyストアのAdmin APIをリアルタイムでクエリする
• 最新のShopifyドキュメントを読む
• テーマファイルを検査し、Liquidの改善を提案する
• Shopify CLIコマンドを実行してスキャフォールド、テスト、デプロイを行う
• ストアの商品カタログ、注文、顧客データにアクセスする

これはパラダイムシフトです。ドキュメントのタブ、APIエクスプローラー、エディタ間のコンテキストスイッチの代わりに、やりたいことを説明するだけで、Claude Codeが実際のストアデータにライブアクセスしながら構築方法を解決します。

コースロードマップ

マスタークラスは8つのモジュールで構成されており、それぞれが前のモジュールの上に構築されています：

モジュール	フォーカス	主な成果
はじめに	環境、ツール、最初のアプリ	開発ストアで動作するShopifyアプリ
Shopifyの基礎	プラットフォームアーキテクチャ、API、Liquid、Hydrogen、Functions	Shopifyエコシステムの深い理解
Shopify向けClaude Code	CLIワークフロー、プロンプトエンジニアリング、自律的コーディング	生産的なagentic開発ワークフロー
MCP詳細解説	プロトコル内部、サーバー構築、Shopify MCPツール	ワークフロー向けカスタムMCPサーバー
Agenticパターン	AI支援Shopify開発のデザインパターン	一般的なタスクの再現可能なパターン
アプリ構築	埋め込みUI、Webhook、課金を含む完全なアプリ開発	本番対応のShopifyアプリ
上級トピック	Functions、Checkout UI、B2B、Markets、Shopify Plus	高度なプラットフォーム機能
デプロイと運用	CI/CD、モニタリング、アプリレビュー、スケーリング	Shopify App Storeに掲載されたアプリ

学習目標

このコースを修了すると、以下ができるようになります：

• Remix、Polaris、App Bridgeを使用してShopifyアプリを構築・デプロイする
• Liquid、Online Store 2.0セクション、JSONテンプレートを使用してカスタムテーマを作成する
• Shopify開発のagentic codingパートナーとしてClaude Codeを効果的に使用する
• Claude CodeをShopifyのAPIやカスタムツールに接続するMCPサーバーを構築する
• JavaScriptとRustでShopify Functionsを記述し、チェックアウト、ディスカウント、配送を拡張する
• React、Remix、Storefront APIでHydrogenストアフロントを設計する
• アプリレビュー、課金、収益シェアを含むパートナーエコシステムをナビゲートする
• AI支援開発を信頼性高く再現可能にするagenticデザインパターンを適用する

前提条件

開始前に、以下を確認してください：

• macOS、Linux、またはWindows（WSL2推奨）を実行するコンピューター
• 基本的なJavaScriptの知識 -- 変数、関数、async/await、モジュール
• ターミナルの操作に慣れていること -- ディレクトリの移動やコマンドの実行ができる
• Shopifyパートナーアカウント -- partners.shopify.comで無料作成
• Anthropic APIキー -- Claude Codeに必要、console.anthropic.comで取得可能
• Node.js 20以降 -- インストールについては次のレッスンで説明します

エキスパートである必要はありません

Agentic codingに関する最大の誤解は、使うにはエキスパートプログラマーである必要があるということです。実際はその逆です。Claude Codeは、まだ学習中の人にとって最も変革的です。24時間体制でペアプログラミングしてくれるシニア開発者がいるようなものです。

このコースの使い方

各レッスンには以下が含まれます：

• 図解と実世界のコンテキストを含む概念の説明
• ターミナルで一緒に進められるハンズオン演習
• 現在のShopify APIバージョンでテスト済みの、コピー＆ペースト可能なコード例
• 各タスクでagentic codingをどう活用するかを示すClaude Codeプロンプト
• 次に進む前に理解を確認するチェックポイント問題

最初は順番通りにモジュールを進めることをお勧めします。その後はリファレンスとしてコースを活用してください。必要なセクションにいつでもジャンプできます。

APIキーを安全に保管してください

このコースを通じて、Shopify APIの認証情報とAnthropic APIキーを扱います。これらをバージョン管理にコミットしないでください。環境変数と.envファイルの適切な使い方は、環境セットアップのレッスンで説明します。

さあ、始めましょう。開発環境をセットアップしていきます。