🚀

【完全初心者】React Native × Expoで10日間でiOSアプリをApp Storeにリリースした全記録

に公開
iOS
React Native
初心者
Expo
App Store
tech

はじめに

「iOSアプリを作ってみたいけど、Swiftも知らないし、Macのスペックも心配...」

そんな完全初心者だった私が、React Native × Expoを使って、わずか10日間でApp Storeにアプリをリリースできました。

https://apps.apple.com/jp/app/workcost/id6757638156

リリースしたのは「WorkCost」というフリーランス・個人事業主向けの作業時間計測・コスト可視化アプリです。

この記事では、環境構築からApp Store申請までの全工程で「実際にハマったポイント」と「どう解決したか」を赤裸々に共有します。

筆者のスペック（開発前）

  • React Nativeの経験：ゼロ
  • Expoの経験：ゼロ
  • iOSアプリ開発の経験：ゼロ
  • Macbook Air：M1チップ / メモリ16GB / SSD 256GB（心もとない...）

正直、このスペックでアプリ開発なんてできるのか不安でしたが、結論から言えばできました。

この記事で得られること

  • 低スペックMacでもXcodeを使う方法
  • Claude Codeを活用したAI協働開発の進め方
  • Apple Developer Program取得の罠と対処法
  • 実機テストでの「画面真っ暗」問題の解決
  • App Store申請で詰まりやすいポイントと突破方法

1. 開発環境の準備

最大の壁：Xcodeのインストール

iOSアプリ開発にはXcodeが必須です。問題は、Xcodeのサイズが約15GB以上あること。

SSD 256GBのMacbookでは、OSやその他のアプリを入れると残り容量がかなり厳しくなります。

私の場合、普通にインストールしようとしたら容量不足でエラーになりました。

解決策：外付けSSDの活用

ポイント1：フォーマットは「APFS」で「Mac専用」に

外付けSSDをMac専用にフォーマットすることで、パフォーマンスが最適化されます。

ディスクユーティリティでの設定：

  • フォーマット：APFS
  • 方式：GUIDパーティションマップ

WindowsとのデータやりとりはUSBメモリで行うと割り切れば、この設定で問題ありません。

ポイント2：Xcodeのインストール先を外付けSSDに

  1. App StoreからXcodeをダウンロード
  2. ダウンロード完了後、Xcode.appを外付けSSDにドラッグ&ドロップ
  3. ターミナルでパスを設定
sudo xcode-select -s /Volumes/外付けSSD名/Xcode.app/Contents/Developer

これで外付けSSD上のXcodeが使えるようになります。

実際のところ、Xcodeはほとんど使わなかった

ここまで外付けSSDへのインストール方法を書きましたが、実際にXcodeを使ったのはiOSシミュレーターでApp Store用のスクリーンショットを撮る時くらいでした。

なぜなら、ExpoにはExpo Goという神アプリがあるからです。これについては次のセクションで詳しく説明します。

2. React Native × Expo開発の進め方

なぜExpoを選んだか

React Nativeには大きく2つの開発方法があります。

方式 メリット デメリット
Expo（Managed） 環境構築が簡単、EAS Buildでクラウドビルド可能 ネイティブモジュールに制限あり
React Native CLI 自由度が高い 環境構築が複雑、Xcodeの知識必須

初心者には断然Expoがおすすめです。特にEAS Buildを使えば、ローカルのXcode設定をほとんど意識せずにビルドできます。

Expo Goが神すぎる

Expoを選んだ最大の理由はExpo Goの存在です。

Expo Goは、iPhoneにインストールするだけで使える公式アプリ。開発中のアプリをQRコードを読み込むだけで実機テストできます。

これがどれだけ革命的か：

  • Xcodeを起動する必要なし
  • ビルド待ち時間なし（コード変更が即座に反映）
  • Apple Developer Program不要（開発中は）

つまり、開発中の実機確認にXcodeは一切不要。Xcodeが必要になるのは、App Store申請用のスクリーンショットをiOSシミュレーターで撮る時くらいでした。

参考：Expo Go - Expo Documentation

参考：EAS Build - Expo Documentation

Claude Codeとの協働開発

私はコーディングのほとんどをClaude Codeに任せました。

ただし、丸投げではうまくいきません。重要なのは要件定義書の作り込みです。

要件定義書に含めた内容

  • 画面一覧と画面遷移図
  • 各画面のUI要素と機能
  • データ構造（どんなデータを保存するか）
  • 計算ロジック（時給計算など）

要件定義書がしっかりしていれば、Claude Codeは驚くほど正確にコードを書いてくれます。

3. Apple Developer Program取得の罠

実機テストしようとして気づいた...

アプリがExpo Go上で動くようになり、「よし、実機でテストだ！」と意気込んだところで気づきました。

Expo Goの中で動かすのではなく、実際にアプリとしてインストールするには Apple Developer Program（年間$99）が必要だと。

参考：Apple Developer Program

購入フローの分かりにくさ

Apple Developer Programの登録は、想像以上に分かりにくいです。

つまずきポイント

問題 対処法
Apple IDの名前が漢字だと本人確認で弾かれる ローマ字表記に変更する
Webブラウザからの購入は$99 Apple Developerアプリから購入すると12,800円でお得
購入完了したか確認できない 領収書メールを確認、48時間待つ

私はWebブラウザから購入したので本人確認書類の提出はありませんでした。ただ、後から「Apple Developerアプリから購入すると12,800円」と知って愕然...。為替レート次第ですが、アプリ経由のほうがお得な場合が多いです。

参考：Apple Developer Program 登録ガイド

48時間の待機期間を有効活用

私の場合、購入手続きから有効化まで約48時間かかりました。

この待機期間中にやったこと：

  • UIの細かい調整
  • 新機能の追加
  • App Store用のスクリーンショット案の作成

4. 実機テストでのハマりポイント

画面が真っ暗問題

Apple Developer Programが有効化され、いざ実機ビルド！

...画面が真っ暗。

これは初心者あるあるらしく、いくつかの原因が考えられます。

主な原因と対処法

1. Development Buildの設定ミス

eas.jsonの設定を確認します。

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "production": {
      "distribution": "store"
    }
  }
}

2. Metro Bundlerに接続できていない

Development Buildは、PCで動いているMetro Bundlerに接続する必要があります。

npx expo start --dev-client

実機とPCが同じWi-Fiネットワークにいることを確認してください。

3. app.jsonの設定漏れ

bundleIdentifierが正しく設定されているか確認します。

{
  "expo": {
    "ios": {
      "bundleIdentifier": "com.yourname.yourapp"
    }
  }
}

参考：iOS development build for devices - Expo Documentation

EAS Buildの流れ

EAS Buildの素晴らしいところは、証明書やプロビジョニングプロファイルを自動で管理してくれること。

初心者が最も挫折しやすい「証明書地獄」を回避できます。

5. App Store申請の悪戦苦闘

実機で動作確認ができたら、いよいよApp Store申請です。

ここが一番辛かった。

なぜなら、AIに手伝ってもらえない作業が多いから。

App Store Connectでの作業

App Store Connectは、Apple Developer Programメンバーがアプリを管理・申請するためのWebサービスです。

https://appstoreconnect.apple.com

スクリーンショット準備の罠

App Storeに表示されるスクリーンショットには厳密なサイズ規定があります。

2024年〜2025年現在の必須サイズ（iPhone）

ディスプレイ サイズ（px） 対象端末例
6.7インチ 1290 x 2796 iPhone 15 Plus, 16 Plus
6.9インチ 1320 x 2868 iPhone 16 Pro Max
5.5インチ 1242 x 2208 iPhone 8 Plus

参考：Screenshot specifications - Apple Developer

ハマったポイント

  • 1pxでもズレているとアップロードできない
  • Chromeからだとエラーになることがある（Safariを使う）
  • ファイル名に日本語があるとダメ（半角英数字のみ）
  • 画像形式はJPEG（sRGB）が安全

メタデータ入力で詰まったこと

項目 注意点
アプリ名 30文字以内、他アプリと被らないように
サブタイトル 30文字以内
説明文 4000文字以内、最初の数行が重要
キーワード 100文字以内、カンマ区切り
サポートURL 必須。プライバシーポリシーのURLでも可
プライバシーポリシーURL 必須。事前に用意しておく

プライバシーポリシーの用意

App Store申請にはプライバシーポリシーのURLが必須です。

私は個人ブログのドメインを持っていたので、LPとして設置しました。

https://shigoto-erabi.com/lp/workcosttracker-privacy-policy/

ドメインがない場合は以下の方法でも対応できます：

  • Notionでページを作成して公開
  • GitHub Pagesで静的ページとして公開
  • 無料ブログサービスで固定ページを作成

6. 10日間のタイムライン

実際にどんなスケジュールで進めたか、振り返ります。

開発前後の変化

観点 開発前 開発後
知識 React Native完全未経験 基本的な開発フローを理解
スキル Web開発のみ モバイルアプリ開発が可能に
成果物 なし App Storeにアプリ公開

7. つまづきやすいポイントまとめ

最後に、これから挑戦する人のために、つまづきポイントをまとめます。

課題 解決策
Mac容量不足 外付けSSD + APFSフォーマット
コーディング能力不足 Claude Code + 詳細な要件定義
証明書・プロファイル管理 EAS Buildの自動管理に任せる
Apple Developer購入の罠 アプリから購入 + 1週間前に手続き
スクリーンショットサイズ シミュレータ撮影 + sipsコマンドでリサイズ
画面真っ暗問題 設定確認 + 同一Wi-Fiに接続

やっておけばよかったこと

  1. Apple Developer Programは開発着手前に購入しておく

    • 48時間の待機は精神的にキツい

  2. プライバシーポリシーページは事前に用意

    • 申請直前に焦って作ると雑になる

  3. スクリーンショットは開発中から意識

    • 見栄えの良い画面状態を作っておく

まとめ

React Native × Expoを使えば、完全初心者でも10日間でiOSアプリをApp Storeにリリースできます。

ポイントは3つ：

  1. ExpoとEAS Buildで環境構築の壁を突破
  2. Claude Codeなどの AI × 詳細な要件定義で開発を加速
  3. Apple関連の手続きは早めに着手

特にApp Store申請は「人間がやるしかない作業」が多く、ここで詰まる人も多いはず。この記事が少しでも参考になれば幸いです。

ぜひ皆さんもこの記事を読んで、iOSアプリ開発に挑戦してみてください！

参考資料

Discussion