4ヶ月間、一人でShopifyアプリを作った話【パート2：開発のリアル】

パート1では「なぜ作ろうと思ったのか」を書きました。

パート2では、実際の開発がどんな感じだったのかをお話しします。

試作を2つ作ってから本番に入った

実は、RYX Wishlistを作る前に2つの試作品を作っています。

1つ目は、Shopify Web Componentsをあまり意識せずに作ったもの。

Web Componentsというのは、Shopifyが提供しているUIパーツのことです。

これを使うと、アプリの管理画面がShopifyの管理画面と同じ見た目・操作感になるので、ユーザーにとって違和感のない体験を提供できます。

外部記事Web ComponentsUse Web Components to include Shopify features on any website.shopify.dev

それを使わなかった1つ目は、動きはするんですが、管理画面が重くて、見た目も自分好みなだけのアプリになってしまいました。

2つ目は、Web Componentsを取り入れて作ったもの。

ただ、機能を盛り込みすぎてしまって、設定画面がわかりにくくなってしまいました。

どちらも公開するつもりで作ったわけではなく、「どんな感じなのかな」と試してみた練習のようなものです。

ただ、この2つの試作で学んだことは大きくて、

Web Componentsを使えばShopifyの管理画面に馴染むUIが作れる
機能が多ければいいわけじゃない。シンプルさが大事

この2つの気づきが、RYX Wishlistの設計の軸になりました。

開発と仕事の両立

「一人で4ヶ月開発した」というと、その間ずっとアプリ開発だけやっていたように聞こえるかもしれませんが、実際はそうではありません。

普通にShopifyストアの構築案件も並行してやっていました。

僕は毎朝3時間ほど自己学習の時間を取っているのですが、その時間をアプリ開発に充てていた形です。

なので、収入が途絶えるといった問題はほとんどありませんでした。

それができたのは、これまでクライアントとの運用保守契約を意識的に積み上げてきたおかげだと思います。

毎月入ってくる収入がある状態だったので、焦らずに開発に向き合えました。

個人開発を考えている方には、開発を始める前に月額ベースの収入源を整えておくことをおすすめしたいです。

精神的な余裕がおそらく全然違うと思います。

機能開発より大変だったこと

正直、機能の実装自体はドキュメントを読み込めばなんとかなりました。

英語のドキュメントもAIの翻訳を活用しながら進めれば、理解はできます。

大変だったのは、機能が完成してからでした。

審査用の動画制作

Shopifyのアプリ審査では、アプリの使い方を示す動画を提出する必要があります。

しかも英語字幕付きで。

これは完全に想定外でした。

試作品を作っている段階では全くイメージしていなかった作業です。

ただ、ここで助けられたのが、昔少しだけ動画制作をやっていた経験でした。

動画編集ソフトの操作にはなんとなく慣れがあったので、半日ほどで対応できました。

LP（ランディングページ）の制作

LPは3回作り直しています。

ShopifyアプリのLPってあまりイメージが湧かなくて、1回目は全然ダメでした。

2回目でなんとなく形になってきて、3回目でようやく納得できるものができました。

外部記事Shopifyにお気に入り機能を追加｜RYX Wishlistノーコードで導入。ゲストモード・分析・Flow連携対応のウィッシュリストアプリ。ryx.jp

ここでもFigmaの操作経験が活きてくれて、以前少しデザインに触れていた時期のスキルが役に立ちました。

振り返ると、一見遠回りに見えた経験がここで繋がったなと感じます。

審査でリジェクトされた話

アプリの審査は一発では通りませんでした。

リジェクトの理由はセキュリティや機能の問題ではなく、クリエイティブ面での指摘でした。具体的には、

掲載画像に金額を入れてはいけないというルールに引っかかった
翻訳が一部機能していない箇所があった

翻訳については、開発中に文言を変えるたびに翻訳ファイルも更新する必要があって、かなりコストがかかりました。

ここで学んだのは、翻訳は一番最後に入れた方がいいということです。

開発しながら翻訳を入れていくと、UIの文言を変えるたびに翻訳も直さないといけない。

次にアプリを作るときは、機能が固まってから翻訳を一括で入れるようにしたいと思っています。

技術的に苦労したポイント

開発中に一番苦労したのは2つあります。

エクステンション側のfetch

テーマエクステンション側からのfetchがうまくいかない時期がありました。

原因の特定に時間がかかって、ここが一番心折れそうになったポイントかもしれません。

課金（Billing）の実装

Shopifyアプリの課金の仕組みも、調べるのにかなり時間がかかりました。

現在のReact Router 7での実装方法に関する情報が少なくて、ドキュメントを何度も読み返しました。

結局、どちらもドキュメントをちゃんと読み解くことで解決できました。

遠回りに感じても、公式ドキュメントに立ち返るのが一番確実だなと改めて実感しています。

学習方法

アプリ開発をどう学んだのか気になる方もいると思うので、簡単にまとめます。

前提として必要な知識

JavaScriptの基礎理解
Reactの基本（コンポーネント、hooks、状態管理など）
現在のShopifyアプリはReact Router 7を使っているため、その理解も必要です（以前はRemixでしたが仕様が変わっています）

実際にやったこと

公式ドキュメントのチュートリアルを3周 まずはここからです。Shopifyの公式ドキュメントにアプリ制作のチュートリアルが載っているので、それを繰り返しました。
YouTubeの解説動画 Udemyにはあまりいい講座が見つからなかったのですが、YouTubeにはRemix × Shopify × Polarisの解説動画がありました。当時はReact Router 7の動画がなかったので、Remixの動画を見ながらドキュメントと照らし合わせて差分を確認していきました。
Web Componentsへのキャッチアップ 現在はPolarisではなくShopify Web Componentsという形になっているので、その部分もドキュメントを見ながら進めました。

まとめると、ドキュメントの読み解きとYouTube動画が学習の中心でした。

地味ですが、これが一番確実だったと思います。

次回のパート3では、リリース後のことを書いていきます。

発信してみての反応や、これからのことについてお話しします。