More than 1 year has passed since last update.

【Shopify / ShopifyApp】Shopifyアプリを作成する

Posted at 2022-11-13

はじめに

はじめまして。プログラマー歴半年のsukeです！
現在業務でShopifyを使用していて、Shopifyアプリの作成をしています。
ShopifyアプリとはShopifyストアに機能を追加して、特定のニーズに合わせてカスタマイズをすることができます。
アプリを作成することで、ユーザーエクスペリエンスの向上につなげることもできます。

※ 詳細は下記公式サイト（アップデートで結構変わります）
公式サイト

What's a Shopify app?

A Shopify app extends the existing functionality of Shopify. Most Shopify apps are built by third-party developers, not by Shopify.
You can build an app to add features to Shopify stores and extend the merchant experience, or to create unique buying experiences for customers. You can also pull Shopify store data into your app, platform, or integration.
To tailor experiences to their specific needs, merchants use Shopify apps to help build their business, integrate with external services, and add features to their Shopify admin.

今回はそんなShopifyアプリの作成方法について記事を書いていきたいと思います。

準備

Node.js
- 14.17.0 以降をインストール
yarn
ngrok
Shopifyパートナーアカウントと開発ストア
git

アプリを作成する

上記を準備した上で、実際にアプリを作成をしていきます。
まずは作成したいディレクトリに移動します。
その後下記コマンドを実行。

$ yarn create @shopify/app

実行し終わるとアプリ名を問われるので、アプリ名を入力します。
今回は「test-app」というアプリ名で作成します。

[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

warning Your current version of Yarn is out of date. The latest version is "1.22.19", while you're on "1.22.18".
info To upgrade, run the following command:
$ brew upgrade yarn
success Installed "@shopify/create-app@3.22.1" with binaries:
      - create-app
[#################################################################################################################################################################################################] 487/487◼✔ Finished log truncation process

Welcome. Let’s get started by naming your app. You can change it later.
? Your app's name? 
> [ここにアプリ名を入力] （※今回は「test-app」と入力する）
  ──────────────────────────────

その後、アプリのテンプレート言語を聞かれるので今回はnodeを選択します。
nodeを指定して、Enterを押します。

✔ Your app's name? · test-app
? Which template would you like to use? … 
> node 
  php 
  ruby

これでShopifyアプリの構築に必要なファイルのインストールが始まります。

※ 下記githubより
shopify/shopify-app-template-node

最後に以下のように表示されれば、作成完了です！

  test-app is ready for you to build! Remember to cd test-app
  Check the setup instructions in your README file
  To preview your project, run yarn dev
  To add extensions, run yarn generate extension
  For more details on all that you can build, see the docs: shopify.dev (https://shopify.dev) ✨

  For help and a list of commands, enter yarn shopify app --help
  
✨  Done in 725.48s.

それでは次に作成されたアプリを起動してみましょう！

アプリの起動

それでは次にアプリを起動して表示されるまでの処理を行なっていきます。

まずアプリのディレクトリ構成はざっくり以下のような感じです。
※アプリのディレクトリ構成の詳細はまた別の記事に書きたいと思います。

ディレクトリ構成

root/
    ├─ vscode/
    ├─ node_modules/
    ├─ web/
        ├─ frontend/
        ├─ helpers/
        ├─ middleware/
        ├─ node_modules/
        ├─ frontend/
        .....
    ├─ .dockerignore
    ├─ .gitignore
    ├─ .npmrc
    ├─ Dockerfile
    ├─ packege.json
    ├─ README.md
    ├─ SECURTY.md
    ├─ shopify.app.toml
    ├─ yarn.lock

作成されたShopifyアプリのディレクトリに移動します。
今回は「test-app」というアプリ名で作成したので、作成されたアプリにcd test-appで移動します。
その後、yarn devで起動してみます。

すると以下のように表示されます。
enterキーを押し、Shopifyパートナーにログインしていきます。