📱 React Native (Expo) アプリをApp Storeに提出する完全ガイド

はじめに

このガイドは、React NativeとExpoで作った「ゴミ出しリマインダー」アプリを実際にApp Storeに公開するまでの全工程を記録したものです。つまずきポイントや解決方法も含めて、リアルな体験をベースに書いています。

📋 必要なもの

必須

Apple Developer Program（年間$99 / 約15,000円）
Expo アカウント（無料）
Node.js（v18以上推奨）

あると便利

iPhone実機（スクリーンショット撮影用）
Mac（なくてもWindows/LinuxでOK！）

🛠️ 開発環境のセットアップ

1. プロジェクト作成

# Expoプロジェクトを作成
npx create-expo-app gomi-reminder --template

# プロジェクトに移動cd gomi-reminder

# 開発サーバー起動
npx expo start

bash

2. 必要なパッケージインストール

# 通知機能
npx expo install expo-notifications

# ローカルストレージ
npx expo install @react-native-async-storage/async-storage

# ナビゲーション（Expo Router使用）# SDK 53以降はデフォルトで含まれている

bash

📱 アプリの基本設定

app.json の設定

{
  "expo": {
    "name": "ゴミ出しリマインダー",
    "slug": "gomi-reminder",
    "owner": "shincode",// Expoユーザー名"version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "gomireminder",
    "userInterfaceStyle": "automatic",
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.shincode.gomireminder",
      "buildNumber": "1",
      "infoPlist": {
        "NSUserNotificationUsageDescription": "ゴミ出しのリマインダーを送信するために通知を使用します。",
        "ITSAppUsesNonExemptEncryption": false// 暗号化書類不要の宣言},
      "entitlements": {
        "aps-environment": "production"// Push通知を使う場合}
    },
    "android": {
      "package": "com.shincode.gomireminder",
      "versionCode": 1
    },
    "plugins": [
      "expo-router",
      [
        "expo-notifications",
        {
          "icon": "./assets/images/notification-icon.png",
          "color": "#007AFF"
        }
      ]
    ]
  }
}

json

重要なポイント

bundleIdentifier は一度決めたら変更不可
ITSAppUsesNonExemptEncryption: false で暗号化書類を回避
Push通知を使う場合は entitlements が必須

🎨 アイコンの準備

必要なアイコンサイズ

icon.png: 1024×1024px（メインアイコン）
adaptive-icon.png: 1024×1024px（Android用）
notification-icon.png: 96×96px（通知用）
splash-icon.png: 200×200px（スプラッシュ画面）

アイコンの自動生成スクリプト

// generate-icons.jsconst sharp = require('sharp');

const createIcon = async (size, outputPath) => {
  const svg = `
    <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
      <rect width="${size}" height="${size}" fill="#007AFF"/>
      <circle cx="${size/2}" cy="${size/2}" r="${size*0.4}" fill="white"/>
      <!-- ここにアイコンデザイン -->
    </svg>
  `;

  await sharp(Buffer.from(svg))
    .png()
    .toFile(outputPath);
};

// 各サイズのアイコンを生成createIcon(1024, './assets/images/icon.png');

javascript

🏗️ EAS Build のセットアップ

1. EAS CLI インストール

npm install -g eas-cli

bash

2. ログイン

eas login

bash

3. プロジェクト初期化

eas init

bash

重要: "Would you like to create a project?" → Yes を選択

4. eas.json の設定

{
  "cli": {
    "version": ">= 3.0.0",
    "appVersionSource": "local"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "ios": {
        "resourceClass": "m-medium"
      },
      "android": {
        "buildType": "apk"
      }
    },
    "production": {
      "ios": {
        "resourceClass": "m-medium"
      },
      "android": {
        "buildType": "app-bundle"
      }
    }
  },
  "submit": {
    "production": {
      "ios": {
        "appleId": "your-apple-id@example.com",
        "ascApiKeyPath": "./AuthKey_XXXXXX.p8"
      }
    }
  }
}

json

🔐 iOS証明書の設定

Apple Developer Programなしでビルドする場合

# シミュレーター用ビルドなら証明書不要
eas build --platform ios --profile simulator

bash

Apple Developer Program登録後

# 証明書の設定（初回のみ）
eas credentials --platform ios

bash

選択肢：

Build Credentials → All を選択
Apple IDでログイン
自動生成を選択（EASが全部やってくれる）

🚀 ビルド実行

開発ビルド

# iOSシミュレーター用
eas build --platform ios --profile simulator

# Android APK
eas build --platform android --profile preview

bash

本番ビルド（要Apple Developer）

# iOS本番ビルド
eas build --platform ios --profile production

# エラーが出たらキャッシュクリア
eas build --platform ios --profile production --clear-cache

bash

⚠️ よくあるエラーと解決方法

1. Push Notifications エラー

Provisioning profile doesn't support the Push Notifications capability

plain text

解決方法: app.jsonに追加

"ios": {
  "entitlements": {
    "aps-environment": "production"
  }
}

json

2. 証明書エラー

You have no team associated with your Apple account

plain text

解決方法: Apple Developer Program（$99/年）への登録が必要

3. EAS project not configured

Must configure EAS project by running 'eas init'

plain text

解決方法:

eas init
# Yesを選択してプロジェクト作成

bash

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

Expo Goを使った撮影方法

Expo Goアプリをインストール
開発サーバー起動
QRコードをスキャンしてアプリを開く
撮影すべき画面（最低2枚）

必要なサイズ

iPhone 6.7インチ: 1290×2796px
iPhone 6.5インチ: 1284×2778px

📤 App Store Connect への提出

1. App Store Connect API Key の作成

App Store Connect にログイン
「ユーザーとアクセス」 → 「キー」 → 「App Store Connect API」
「＋」 をクリックして新規作成
名前: EAS Submit Key
アクセス: App Manager

重要な情報をメモ:

Key ID: 例: 2ATCU6QFLS
Issuer ID: 例: 88d6c371-a9d5-453c-9ee7-378724ad42c4
ダウンロードした.p8ファイル: プロジェクトルートに配置

2. App Store Connectでアプリ作成

「マイApp」 → 「＋」 → 「新規App」
入力内容：

3. 必須情報の入力

App情報

カテゴリ: ライフスタイル
サブタイトル: ゴミの日を忘れない（30文字以内）
年齢制限: 4+（全年齢）

価格と販売状況

価格: 0（無料）

プライバシー

プライバシーポリシーURL: 必須
データ収集:

説明文の例

ゴミ出しリマインダーは、毎日のゴミ出しを忘れないようにサポートするアプリです。

【主な機能】
◆ カスタマイズ可能なスケジュール
地域ごとに異なるゴミ収集日を、曜日単位で自由に設定

◆ タイムリーな通知
前日19:00と当日7:00に通知でお知らせ

◆ 見やすいカレンダー表示
週間・月間カレンダーで一目で確認

◆ シンプルで使いやすいデザイン
ダークモードにも対応

plain text

キーワード（100文字、カンマ区切り）

ゴミ,ごみ,リマインダー,通知,カレンダー,収集日,ゴミ出し,環境,生活,家事

plain text

4. EAS Submit でアップロード

# ビルドIDを指定して提出
eas submit --platform ios --id [BUILD_ID]

# または最新ビルドを提出
eas submit --platform ios --latest

bash

プロンプトで入力：

Path to API Key: ./AuthKey_XXXXXX.p8
Key ID: メモしたKey ID
Issuer ID: メモしたIssuer ID

5. 審査提出

アップロード完了メールを待つ（5-10分）
App Store Connectでビルドを選択
スクリーンショットをアップロード
「審査に提出」 をクリック

📊 審査プロセス

タイムライン

審査待ち: 24時間以内に開始されることが多い
審査中: 1-3日（初回は長め）
結果: メールで通知

よくあるリジェクト理由

メタデータの問題
機能の問題
ガイドライン違反

💡 Tips & ベストプラクティス

開発時のTips

TypeScriptを使う
Lintの設定
環境変数の管理

ビルド時のTips

ビルド時間の短縮
証明書の管理
バージョン管理

提出時のTips

プライバシーポリシー
スクリーンショット
審査対策

🎯 チェックリスト

開発完了時

未対応のブロックタイプ: to_do

ビルド前

未対応のブロックタイプ: to_do

提出前

未対応のブロックタイプ: to_do

審査提出

未対応のブロックタイプ: to_do

🚀 コマンドまとめ

# 開発
npx expo start

# EAS初期設定
eas init
eas login

# ビルド
eas build --platform ios --profile production
eas build --platform android --profile preview

# 証明書管理
eas credentials --platform ios

# 提出
eas submit --platform ios --latest

# ビルド履歴
eas build:list --platform ios

# ログ確認
eas build:view [BUILD_ID]

bash

📚 参考リンク

まとめ

React Native + Expoを使えば、Macなしでも、Windows環境からiOSアプリをApp Storeに公開できます。EASが証明書管理を自動化してくれるので、以前よりもずっと簡単になりました。

重要なポイント：

📱 Apple Developer Programは必須（$99/年）
🔧 EASが面倒な作業を自動化
📸 スクリーンショットは事前準備
⏰ 審査は1-3日
🎯 初回は時間がかかるが、2回目以降は楽

このガイドが、次のアプリ開発の参考になれば幸いです！

最終更新: 2024年8月実際のアプリ: ゴミ出しリマインダー

このドキュメントで一部のコンテンツが無効になっています

📱 React Native (Expo) アプリをApp Storeに提出する完全ガイド

Dev.AIチーム

はじめに

📋 必要なもの

必須

あると便利

🛠️ 開発環境のセットアップ

1. プロジェクト作成

2. 必要なパッケージインストール

📱 アプリの基本設定

app.json の設定

重要なポイント

🎨 アイコンの準備

必要なアイコンサイズ

アイコンの自動生成スクリプト

🏗️ EAS Build のセットアップ

1. EAS CLI インストール

2. ログイン

3. プロジェクト初期化

4. eas.json の設定

🔐 iOS証明書の設定

Apple Developer Programなしでビルドする場合

Apple Developer Program登録後

🚀 ビルド実行

開発ビルド

本番ビルド（要Apple Developer）

⚠️ よくあるエラーと解決方法

1. Push Notifications エラー

2. 証明書エラー

3. EAS project not configured

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

Expo Goを使った撮影方法

必要なサイズ

📤 App Store Connect への提出

1. App Store Connect API Key の作成

2. App Store Connectでアプリ作成

3. 必須情報の入力

App情報

価格と販売状況

プライバシー

説明文の例

キーワード（100文字、カンマ区切り）

4. EAS Submit でアップロード

5. 審査提出

📊 審査プロセス

タイムライン

よくあるリジェクト理由

💡 Tips & ベストプラクティス

開発時のTips

ビルド時のTips

提出時のTips

🎯 チェックリスト

開発完了時

ビルド前

提出前

審査提出

🚀 コマンドまとめ

📚 参考リンク

まとめ

タグ

著者について

Dev.AIチーム