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

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

※ 詳細は下記公式サイト（アップデートで結構変わります）
[公式サイト](https://shopify.dev/apps/getting-started)

> #### 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](https://ngrok.com/)
- Shopifyパートナーアカウントと開発ストア
- git

# アプリを作成する
上記を準備した上で、実際にアプリを作成をしていきます。
まずは作成したいディレクトリに移動します。
その後下記コマンドを実行。
```terminal
$ yarn create @shopify/app
```
実行し終わるとアプリ名を問われるので、アプリ名を入力します。
今回は「**test-app**」というアプリ名で作成します。
```terminal
[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を押します。

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

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

※ 下記githubより
[shopify/shopify-app-template-node](https://github.com/Shopify/shopify-app-template-node#cli_three)

最後に以下のように表示されれば、作成完了です！
```terminal
  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.
```

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

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

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

```text:ディレクトリ構成
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パートナーにログインしていきます。
![スクリーンショット 2022-11-13 11.22.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/900807/93bcd141-fbdb-7105-5718-9a850aa715f9.png)

enterキーを押すと、ブラウザに飛ばされログインするように誘導されます。
アカウント選択をして、ログインが完了して以下の表示がされれば成功。
![スクリーンショット 2022-11-13 11.23.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/900807/75d23d2a-f4d9-de71-ff3f-dc7b864b3334.png)

コンソール画面に戻ると、以下の表示が出ています。
今回は新規でアプリを作成していくので、`Yes, create it as a new app`を選択します。
![スクリーンショット 2022-11-13 11.29.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/900807/6292dd37-5e3a-1a20-1191-c5e5e3a7e2f4.png)

次にアプリ名を問われます。（Shopify上に表示される名前）
ここはディレクトリ名と同じ名前にしておきます。
（同じ名前でなくても問題ありません。）
![スクリーンショット 2022-11-13 11.32.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/900807/50d0d651-4271-2209-9fe5-c2121efab928.png)

アプリ名を入力した後、アプリを接続するストア名の選択をします。
![スクリーンショット 2022-11-13 11.34.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/900807/2e9fc46a-265f-ed33-2eb8-ce71c6d9ee9e.png)


Sucessの表示が出れば、ストアにアプリの接続が完了です！
その後`Shareable app URL`に記載されているURLをブラウザで入力します。
![スクリーンショット 2022-11-13 11.50.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/900807/51cb28af-e052-795c-d2ab-d3486c5e8a01.png)


入力すると、下記画面が表示されるので`Visit Site`のボタンを押します。
![スクリーンショット 2022-11-13 11.53.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/900807/562f0efe-ade9-5879-23ce-d3a60b8f1f7b.png)

Shopifyのストア画面に飛ばされ、アプリをインストールボタンを押します。
![スクリーンショット 2022-11-13 11.57.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/900807/0cacb8fc-d63d-0074-512b-05589a7165cf.png)

サイドバーの部分に作成されたアプリが表示されていれば、起動とプレビュー処理完了です！
![スクリーンショット 2022-11-13 11.58.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/900807/0f852f1d-717a-71ae-41be-509866d8b460.png)


アプリのディレクトリ構成やPolarisの使い方などShopifyに関する記事も追々書いていけたらと思います。