Shopify アカデミーの「Shopify Development Fundamentals」ラーニングパスのShopifyの拡張機能について学ぶ「Integrating with Shopify」コースを修了しました。
このコースではアプリ開発に必要なShopifyの拡張機能やAPIの基本知識、リアルタイム連携の仕組みまで幅広く学ぶことができ、Shopifyを開発者として深く理解したい方にとって非常に有益な内容でした。
本記事ではアプリの種類や開発ステップ、GraphQLやWebhookの実践的な使い方まで、学んだ知識と気づきをまとめています。
Shopifyアプリの種類と役割
Shopifyの機能を拡張するアプリには、Custom App（カスタムアプリ）とPublic App（公開アプリ）の2種類があります。
この記事を書いている時点でマーケットプレイスには8,000以上の公開アプリがあり、ストア設計・運営・マーケティング・配送・販売支援まで幅広い分野をカバーしています。
公開アプリはShopifyによる100項目以上の品質・利便性・データ保護に関するチェックを経て公開されているので安心して導入できます。またShopify自身が提供する公式アプリもあります。
アプリが拡張できる領域
Shopifyアプリは管理画面（バックエンド）だけでなく、オンラインストア（フロントエンド）やチェックアウト画面など、Shopifyのあらゆるエリアに対して拡張機能を提供できます。
Shopify Admin（管理画面）
Shopify Admin（管理画面）では、在庫管理や注文処理、顧客対応といった業務の効率化に直結する機能を追加できます。
例：注文が入ったら特定のステータスに応じて通知を送ったり、顧客情報を外部システムと連携したりするアプリ
Online Store（オンラインストア）
Online Store（オンラインストア）では、テーマや商品ページに独自の表示や機能を追加できます。
例：商品に関連アイテムを表示したり、顧客の行動に応じて動的なコンテンツを表示したりするような、UI/UXを強化するアプリ
Checkout（チェックアウト）
Checkout（チェックアウト）では、Shopify FunctionsやCheckout UI Extensionsを活用し、決済ステップに独自のロジックや入力欄を加えることができます。
顧客がよりスムーズに、安心して購入できるように設計することが目的です。
Shopifyアプリ開発の進め方と推奨構成
Shopifyではアプリ開発において Remixフレームワーク の活用が推奨されています。開発環境の構築からアプリ設計の理解まで、一連のステップを通じて効率的な開発を進めることが可能です。
Remixフレームワークとは？
RemixはReactベースの最新のWebアプリケーション開発用フレームワークです。
Shopifyがアプリ開発のための公式推奨フレームワークとして採用しており、以下のような特徴があります。
- フロントエンドとバックエンドを統合できる構造で、開発効率が高い
- データの取得やページ表示の高速化、SEO対策に優れたアーキテクチャ
- Shopify CLIでのアプリ作成時にRemixがデフォルトで使われる
Shopifyでのアプリ開発では、在庫や注文データを取得しUIとして表示したり、管理画面でカスタムの機能を提供したりといったニーズが多くあります。Remixを使えばそれらを一貫した開発体験の中で実現することができます。
Reactの知識があれば導入もしやすくShopifyアプリ開発における強力な味方です。
Step 1: CLIを使ってアプリを作成し、開発ストアへインストール
Create an appのドキュメントに沿ってCLI（コマンドラインインターフェース）を使ってアプリのスキャフォールド（ひな形）を作成します。その後開発ストアにアプリをインストールすることで、実際の動作環境でのテストや確認が可能になります。
Step 2: 推奨されるアプリ構成を理解する
App structureのドキュメントを通して、Shopifyアプリにおけるフォルダやファイル構成・役割の分担など基本的な構造を確認します。
さらにQRコードアプリのサンプルを確認することで、実際に動作するアプリをベースにどのようにAPIやUIが組み込まれているかの具体例を把握できます。
Shopify APIとGraphQL
Shopifyではアプリ開発に使えるAPIがいくつかありますが、特にGraphQLの利用が推奨されています。
GraphQLは、全てのAPI操作を1つのエンドポイントにPOSTで送信するスタイルで、RESTよりも柔軟かつ効率的なため、GraphQLを使うことで必要なデータだけを取得することが可能になります。
主なAPIの用途は以下の通りです：
| API名 | 主な用途 |
|---|---|
| Admin API | 在庫や注文などバックオフィスの処理 |
| Storefront API | モバイル・Web・ゲームなどでの購入体験構築 |
| Customer Account API | 顧客プロフィールやアカウント管理 |
四半期ごとに新しいAPIバージョンがリリースされ、各バージョンは最低12ヶ月のサポート期間があり、開発者向けにAPIヘルスレポートも提供されており、安定した運用が可能です。
GraphQLの基本操作と構造
GraphQLは1つのAPIエンドポイントに対して全ての操作をPOSTで送信する仕組みがあり、2種類の操作があります。
- Query：データの取得（RESTでのGETに相当）
- Mutation：データの追加・更新・削除（POST/PUT/DELETEに相当）
Shopifyでよく使うLiquid（テーマ用テンプレート言語）とGraphQLは、扱うデータの元は同じでも、使用場面が異なります。Liquidは主にテーマ開発に使われ、GraphQLはアプリ開発でのデータ取得・操作に使います。
Webhookによるリアルタイム連携
外部サービスとの連携にはWebhookの活用が推奨されています。これはAPIのように定期的にデータを取得するのではなく、特定のイベントが発生したときにリアルタイムで通知を送信できるPush型の仕組みです。
たとえば、注文管理システム（OMS）との連携では、注文が発生した際にShopifyがWebhookを使ってデータを送信できます。
設定は、Shopify管理画面の Settings > Notifications > Webhooks から行えて、通知内容の確認にはWebhook.site のようなサービスが便利です。
まとめ：Shopifyアプリ開発の土台が見えた
このコースを通じてShopifyアプリ開発に必要な知識の全体像をつかむことができました。
アプリの種類や拡張可能なエリア、GraphQLを中心としたAPIの使い方、Webhookによるリアルタイムな連携、さらにGraphQLの実装体験まで、すぐに実装に活かせる知識が詰まっていました。
既存機能でどこまでできるかを見極めながら、必要な場面ではアプリを用いてストアを柔軟に拡張していくというShopifyならではの開発スタンスに大きく共感し、Shopifyにおけるアプリ開発の可能性を探る第一歩として、非常に実りある学びが得られました。
