【個人開発】【ReactNative+expo】 iOSアプリリリースの道程

はじめに

この記事は、エンジニア未経験者がiOSアプリを開発したらどうなるのか、を記録した記事です。技術に関する単語の誤りや、開発手法に思うことが多々あると思いますが、興味本位で読んでいただければ嬉しいです。
また個人開発や独学未経験でもApp Storeへのリリースができるんだ！と僭越ながらお仲間の方の励みになれば幸いです。

対象読者

• iOSアプリ開発に興味がある人
• React Native +expo構成に興味がある方
• プログラミングを独学で学んでいるお仲間の方

作ったもの　♡　kawaii目覚まし時計

可愛らしいデザインと機能性を融合したアラームクロックアプリを作成しました。
機能はシンプルで、目覚ましをセットすると指定した時間に可愛いセリフが流れます。
セリフ10種類のうちランダムで再生されます。

▽▽▽詳細はコチラ▽▽▽

使ったツールやサイト

• React Native ：モバイルアプリケーションフレームワーク

• expo ：開発ツール

• VScode：エディタ

• figma：デザイン・プロトタイプ作成

• canva :　サムネイル作成

• notion :　スケジュール、タスク管理、メモ

• chatGPT　：　企画壁打ち、コードレビュー、エラー対応

• iOS Simulator : XCodeに付属しているiPhone,iPad用のシミュレーター

• transporter : Appstore Connectへのファイルデリバリ用

• ココなら　：voice提供　※「真瀬みあ」（読み：まなせみあ）さんにご提供いただきました

• BOOTH　：立ち絵素材　※林檎ゆゆさんにご提供いただきました

• OtoLogic、こんとどぅふぇ：BGM,効果音提供

※はMacのみ

スケジュール感

1~2週目　企画
3週目　環境構築・素材収集
4週目　ReactNative+expoのキャッチアップ
5~6週目　実装
7週目　UI再設計
8週目　リリース
9~13週目　バグ修正
14修正　再ビルド・リリース

着手した際は、2か月で完成する予定でしたが、
まさかのビルド後のバグ修正に1か月かかりました。

企画

目覚まし時計×育成ゲームを組み合わせたアプリの作成を企画しました。

デザイン、詳細機能設計

企画を基に最小要件での実装を試みました。
結果、大きく以下2つの機能となりました。

• アラーム機能
• 実績記録機能

素材収集

voice収録、立ち絵素材、効果音等自分では創りようがない素材については、
フリー素材、またはプロに依頼して集めました。

環境構築

▽nvm

Node.js管理のために、nvm利用しました。バージョンの切り替えも早く使いやすかったです。1つ難点としては、現環境のNode.jsをアンインストール後、nvmインストール、再度対象のバージョンのNode.jsを入れなおす必要がありました。Node.jsを使うことが分かっていれば、最初からバージョン管理ツールは入れておくに越したことないですね。

▽expo

expoプロジェクトのフォルダ構成に、癖を感じて初回作成時に詰まってしまいました。
簡単なデモプロジェクトを作成して、expoについてキャッチアップすることで脱出しました。先先急ぐのではなく、詰まったら1つ戻って理解を深めることが大事と改めて感じました。

▽React モジュール達

各モジュールのバージョン管理にも手間取りました。npmで全モジュールのバージョンの確認ができるツールがいろいろとあることを知り、大活躍しました。モジュールの互換性がないとアプリがクラッシュすることもあるので、バージョン管理が大事とひしひしと学びました。

実装

実装に使った時間は、予想よりも少なかったです。
要件をブレイクダウンして、実現可能な機能を考えるのに時間を食いました。
実際にコードを書いたり、エラーログ対応には、chatGPT先生が大活躍しました。

UI改善

デザインについては、当初手書きの図だけで実装し始めました。

途中でコーディング後の画面とイメージが異なることに違和感を感じたため、思い切って
Figmaでプロトタイプ作成することにしました。
作成前に、レイアウトだけでなく、アプリ全体のイメージも含めてで具体的に構想することが大事ですね。。。

リリース

公式ドキュメントや技術ブログに注意書きを載せてくれているのにも関わらず、同じ過ちを繰り返す・・・きっと私だけじゃないはず・・・です😅

▽ビルドではまったこと

• splash.png等のデフォルトファイルは必要ないと判断→削除。エラーでビルドできない・・・
• Reactモジュールとexpoバージョンが合わずアプリがクラッシュ・・・
• app.jsonのバージョン管理を忘れて、transporterでアップロードできない・・・

そのほかバグを直したりしつつ、
EAS build(simulator)9回、EAS build(Apple Store)4回、Apple Store依頼2回おこない
なんとかリリースしました。

Apple Storeからのリジェクトは、アプリがクラッシュして開かないので、修正してくださいという内容でした。iOS Simulatorでしっかり確認してから提出すれば防げる内容ですね。expo Appsだけじゃ再現しないバグもあるので、EAS build(simulator)で機能の確認してから、Apple Storeに申請しないといけないと1回目のビルドで学びました。

▽ビルド後すること

Apple Connect上での申請にあたり、予想外にすることが多く驚き(手間取り)ました。

• Apple Store掲載用のサムネイルの作成
• 著作権の確認
• アプリの説明文
• アプリの紹介サイトの作成
• 問い合わせフォームの作成

作成したサムネイル等は、せっかくなのでアプリの紹介サイトにも掲載しました。

開発期間

2023年12月～2024年2月の3か月間、
時間にして、約120時間ほどでした。
(平日は3時間×3日、休日は予定がなければ6時間ほど集中力が続く限り)

費用

ココ大事😇

• Macbook Pro 中古48,000円ほど　←高いけどいい買い物でした！
• Apple Connect加入料　11,000円
• voice依頼料　1500円ほど

作った動機・作ってみての感想

個人開発の醍醐味は、自分が作りたいもの、使いたいものをやりたいように自由にできると思っているので、

• プラットフォームを利用した開発をしてみたかった
• 自分で企画から考えて、ツールとかサービスを作ってみたかった

という点が大きいです。
作成してみて、開発ツールを利用した恩恵と制限を存分に味わうことができたと思います。自分でもとても自己満足な企画だなと感じているので、使いやすさとか育成ゲームよりの機能の拡張も検討、実装できたら楽しいなと感じています。

今後やってみたいこと

• React Native CLIを用いたiOSアプリ作成
• APIや軽量DBとのやり取りを含んだツール、サービスを作ってみたい。今回データの保管は、AyncStorageを利用しており、アプリ内で完結しています。もう少し大きいデータを扱えるようにしたい、また個人ごとの実績データ等を柔軟に保管できるようにしたいと思います
• タスク管理を丁寧にできるツールを使ってみようと思います。スケジュール管理は、Notionのみで行おうとしましたが、バグやタスクの詳細な管理はテンプレートがあるツールのほうが最初のうちは扱いやすそうかなと感じました
• ReactやJavaScriptの基本を復習しようとおもいました。実装時、公式ドキュメントを読んでパッケージとは？モジュールとは？非同期処理とは？とか基本的な点で詰まることが多々ありました。粗削りな知識を補完していきたいなと思います

成果物

以上、最後までお読みいただき、ありがとうございました😊
コメント励みになります。