はじめに
こんにちは、ひるげです。
Webアプリをある程度作れるようになると、「次はiOSアプリも作ってみたい」と思う方は多いんじゃないでしょうか。
私もこの流れを辿ったのですが、「そもそもどうやったらiOSアプリってつくれるの？」という疑問が生じ、最初の一歩を踏み出すのが意外と大変でした。
そこでこの記事では、HTML/CSS/JavaScript（できればReact）を触ったことがある初心者エンジニアを想定して、Expo（React Native）を使ったiOSアプリ開発の流れをロードマップ形式でまとめます。
個人開発Webアプリ「Roamble」のiOS化で実際に歩んできた道のりをもとに、詰まりやすいポイントも踏まえながら説明します。
課金機能の実装が絡むと少し複雑になるのでそこは別記事で扱います。
この記事では「課金機能なしのiOSアプリを、App Storeに公開するまで」の流れに絞ります。
結論
大きな流れはこうなります。
- バックエンドを作る
- 事務的な手続き（Apple Developer Program加入）
- iOS開発環境を整える
- Expoプロジェクト作成
- フロントエンド開発（画面作成・バックエンド連携）
ネイティブ機能が必要になったらEAS development buildに切り替える - TestFlightで実機確認する
- App Storeに審査提出・公開する
基礎知識：iOSアプリの仕組みとExpo
iOSアプリはどう動いているか
Webサイトと違い、iOSアプリはApp Storeを通じてコンパイル済みのバイナリとして端末にインストールされます。
ブラウザがURLへアクセスするたびにHTMLを取得するのとは異なり、ビルド済みのフロントエンドコードは端末の中に入っています。
つまり「アプリのインストール」とは、ざっくりいうと「ビルド済みのフロントエンドコードを端末に持ってくるよ」という行為なんですね。
そこからバックエンドAPIを叩く部分はWebアプリと同じです。すなわち、バックエンド部分は自前で用意・ホストする必要があります。
この記事でも、バックエンドはすでにある前提で話を進めます。
ビルド工程が発生することと、配布にはAppleの審査が必要であること。
この2点がWeb開発との最大の違いです。
Expoとは
まず、iOSアプリをReactチックに書けるようにしてくれるのがReact Nativeです。
ExpoはそのReact Nativeをベースにしたフレームワークです。ファイルベースルーティング（Expo Router）、クラウドビルドサービス（EAS）、開発サーバーなどをまとめて提供します。
ネイティブにこだわるならSwift/SwiftUIという選択肢もありますが、Reactの知識を活かして動くものを早く作りたいならExpoが近道です。
0. バックエンドを作る（前提）
これはiOSアプリ開発ではなく、その前提です。
Node.js・Go・Python・Ruby...使い慣れた言語でAPIを先に作っておいてください。もちろんFirebaseやSupabaseなどのBaaSを活用してもいいです。
もしあなたが、すでにWebアプリとして動いているサービスのiOS化を試みているなら、既存のAPIをそのまま使えます。ありがたいですね。
iOSアプリ側からは fetch で普通に叩けます。バックエンドの設計はこの記事の対象外です。以降では「APIが動いている状態」を前提に話を進めます。
1. 事務的な手続き
開発へ入る前に、事務的な手続きを済ませておきます。
後回しにするとTestFlight確認の直前で止まりかねないので、先にやっておくのをお勧めします。
まずApple Developer Programに加入します（年12,900円）。
後述するTestFlightも、App Store公開も、これなしでは進められません。...まあ高いですが、必要経費です。
加入はApple IDで申請し、審査に2営業日程度かかることがあります。
Apple Developer Programが通ったら、Small Business Programにも登録しておくと良いでしょう。
こちらは登録が無料で、アプリの課金規模が一定ラインを超えるまで手数料を30%→15%にしてくれます。
この記事では課金機能を扱わないのですが、どう考えても登録し得なのでここで紹介しておきます。
申請を済ませたら次に進みましょう。
2. iOS開発環境を整える
必要なものは以下です。
- Node.js（18以降推奨）
- Expo CLI（
npm install -g expo-cli） - Xcode（App Storeから無料。macが必要）
- EAS CLI（後で使う。今は
npm install -g eas-cliだけしておく）
Xcodeは容量が大きく、インストールに時間がかかるので先に走らせておくのが賢明です。
Macなしでも開発できる？
結論から言うと、「条件付きではあるが一応開発できる」というのが答えかと思います。
「MacがないとiOSアプリは作れない」というお話の軸になっているのは、ローカルでのビルドを行うために、Mac専用ソフトウェアであるXcodeが必要になるからです。
ただしEASを使う場合、ビルドはローカルではなくクラウド上で行われます。こうなってくると、自分のPCにXcodeが入っている必要はないので、Macが不要になります。
eas build も eas submit もWindowsやLinuxから実行できます。
ただ、今の説明は過剰に期待をさせてしまうものだったと言わざるを得ないでしょう。
というのも、iOSシミュレータを動作させるためにはXcodeが必要であり、Macが必要だからです。
少なくとも、この記事では途中までシミュレータでの動作確認を行うことを前提にしているため、本記事の手順通りに進めるにはMacが必要になります。
Macなしで完結させたい場合は、シミュレータの代わりに実機で確認する流れにすれば成立します。
Expo Goで開発中の動作確認 → EAS buildで実機向けdevelopment build → TestFlightで本番確認、という経路です。
そうすると、後述するEAS freeプランのビルド回数制限に引っかかってくる可能性があったり、そもそもいちいちTestFlightにまで流すのが面倒だったりして、「Mac買った方が効率よくないか？」となってくる可能性もあるのですが...「Macなしでも開発できる？」と聞かれたら「まあできるよ」というのが答えになるかと思います。
3. Expoプロジェクト作成
npx create-expo-app@latest プロジェクト名
app/ ディレクトリに画面ファイルを置くと、そのままルートとして認識されます。Next.jsのファイルベースルーティングと同じ発想です。
npx expo start で開発サーバーが立ち上がり、Expo GoアプリでQRコードをスキャンするとすぐ実機確認できます。後述のネイティブモジュールを使い始めるまでは、この方式で十分開発を進められます。
ここから先の開発はExpo公式チュートリアルに沿って進めるのが最も効率的です。プロジェクト作成直後の状態から始まり、画面構築・ナビゲーション・ネイティブ機能まで実践的に学べます。
4. フロントエンド開発（画面作成・バックエンド連携）
このステップが一番ボリュームがあります。
ここでは、Expo(React Native)を使って画面を作り、バックエンドと繋ぎ込んでいきます。
もし、Reactで書いてあるWeb版がすでにある場合は、それをReact Native風に置き換えていくだけなのですごく楽です。
まず画面単体の構築です。React NativeはHTMLの div や span の代わりに View・Text・Image といったコンポーネントを使います。FlexboxベースのレイアウトシステムはほぼWebと同じです。
画面遷移はExpo Routerを使います。React Nativeでは、app/ 以下のファイル構造がそのまま画面遷移の構造になります。Stack（スライド遷移）とTabs（タブ切り替え）の2種類を覚えれば、ほとんどのアプリの画面構造は作れます。
Next.jsのファイルベースルーティングと同じ発想です。
バックエンドとの通信も fetch でWebと同様に叩けます。認証トークンは expo-secure-store に保存します（Webの localStorage に相当するものです）。
SNSログインを実装する場合は expo-auth-session が使えます。認証まわりの詳細はAuthentication Guideも参照してください。
一点、iOSアプリ固有の制約として、サードパーティのOAuthを提供する場合はSign in with Appleを必ず一緒に実装するというApp Storeガイドラインがあります。GoogleログインなどのSNSログインを入れる前に確認しておきましょう。
その他にも多くの便利なライブラリがあるので、何か実装する前には「もしかしてこれライブラリあったりしないか？」と調べてみてください。
ネイティブ機能とEAS development build
ネイティブ機能とは、カメラ・位置情報・プッシュ通知・写真ライブラリなど、iOSのOSレベルの機能を指します。JavaScriptだけでは直接触れず、iOSのネイティブSDKを橋渡しするライブラリを通じて使います。
位置情報は expo-location、カメラは expo-camera、プッシュ通知は expo-notifications で扱えます。地図表示には react-native-maps が使えます。ただしGoogle Maps SDK for iOSは、Google Cloud ConsoleでiOS向けのAPIキーを別途発行する必要があります。
これらが非常に強力で、インストールした時点ですでに「それをやりたかったんだよ！」という機能が揃っています。ぜひ活用して、感動を味わってください。
さて、こういったネイティブ機能を使い始めると、Expo Goでは動かないライブラリが出てきます。
ネイティブ機能は、バイナリに組み込んで初めて動作するからです。
そのため、このタイミングでEASを使ったdevelopment buildへ切り替えます。
development buildは以下で作成できます。
npx expo install expo-dev-client
eas build --profile development-simulator --platform ios
シミュレータ向けの development-simulator プロファイルならAppleのデバイス登録なしで試せます。最初のビルドには15〜20分かかりますが、一度ビルドすれば以降のJS変更はホットリロードで反映されます。ネイティブの設定を変えたときだけ再ビルドが必要です。
ただし、EASのfreeプランはiOS・Androidそれぞれ月15ビルドまでという上限があることに注意が必要です。
そのため、ネイティブ依存部分が変わらない限り再ビルドを控えることをお勧めします。
(参考：Expoの料金プランページ)
5. TestFlightで実機確認する
シミュレータで動作確認が終わったら、実機でも確認しましょう。
eas build --profile production --platform ios
eas submit --platform ios --latest
でビルドをApp Store Connectへ送り、TestFlightから自分のiPhoneにインストールできます。
初回はビルドの前にいくつか準備が必要です。
まず、Apple Developer PortalでBundle IDを登録します（Expoの ios.bundleIdentifier と一致させる必要があります）。
続いてApp Store Connectでアプリレコードを作ります。これがビルドの送付先になります。
署名情報（Distribution Certificate・Provisioning Profile）の設定はEASが対話的に案内してくれます。基本的にはEAS管理で証明書を生成して進めればOKです。
これらを終えたら、自分のスマホの上でアプリが動くはずです。
ひとしきり感動を味わいましょう。
6. App Storeに審査提出・公開する
それではいよいよApp Storeへ公開していきます。
App Storeに公開するためには、まず審査を通る必要があります。
そこで、App Store ConnectのWebサイトから審査に必要な情報を追加していきます。
必要なものはざっと以下の通りです。
- App Store用スクリーンショット
- アプリ説明文
- プライバシーポリシーのURL
- サポートURL
- 審査用テストアカウント
最後の「審査用テストアカウント」ですが、これはログインが必要なアプリは必須になります。
ただ、Sign in with Appleを実装していれば、審査担当者が自分のApple IDでそのままサインインできるようなので、審査メモ欄に「Sign in with Appleでサインインしてください」とだけ書いておけばテストアカウントの準備は不要です。
私が申請した時もこれで通りました。
私は「捨てAppleアカウントとか作らないといけないのか！？」と思ってしまったポイントなので、そこそこ有益情報な気がします。
審査には最大2日程度かかります。
審査提出の際、「このバージョンを手動でリリースする」を選んでおくと、審査通過後もすぐ公開されず、自分のタイミングでリリースできます。
一度審査が通るかどうかだけみてほしいという場合は、手動リリースにしておきましょう。
リジェクトされたら
審査は一発で通るとは限りません。私のRoamble iOSも、2回リジェクトを経て3回目で承認されました。とはいえリジェクトをそこまで恐れる必要はなく、指摘された箇所をちょちょっと直して再提出すればいいだけです。
参考までに、私が実際にリジェクトされた時の指摘ポイントを3つ共有します。
Guideline 2.3.2（IAPのプロモーション画像）
In-App Purchaseを実装している場合、月額・年額など複数プランがあるとき、App Store Connect上のプロモーション画像は「アプリアイコンと内容の異なる2枚」が必要です。私はアプリアイコンをベースにリボンで「Premium Monthly」「Premium Yearly」と書き分けた2枚を提出しましたが、「テキストだけが異なる同一画像」と判定されました。
プロモーション画像はオプション機能なので、迷うなら登録しないのが確実です。
Guideline 3.1.2(c)（サブスクリプションの開示）
サブスク機能があるアプリのPaywall（購入画面）には、以下の要素がすべて必要です。
- 具体的な請求金額の表示（「毎月¥550で定期購入」など）
- プライバシーポリシーへのリンク
- EULAへのリンク
さらに見落としやすい点として、App Store Connectのアプリ説明文にもEULAのURLを記載する必要があります。Paywallに書いただけでは不十分で、ASCのメタデータ側にも必要です。
Guideline 5.1.1(ii)（Purpose Stringの設定）
カメラ・マイクなど権限が必要なAPIを使う場合、Info.plist の Purpose String を具体的な日本語文言にする必要があります。テンプレートの文言のままだとリジェクトされます。
「何のために権限が必要なのか」を明示しましょう。
ちなみに、Expoを使っている場合、Info.plist を直接書き換えても反映されないことがあります。 expo-camera を例にすると、EAS Buildのプリビルド時にconfig pluginが走り、Info.plist がパッケージのデフォルト文言で上書きされます。正しい設定方法は app.config.js の plugins に明示的に書くことです。
// app.config.js
plugins: [
["expo-camera", { cameraPermission: "カメラで撮影した写真を訪問記録として保存します。" }],
]
Info.plistを直接書き換えても次のビルドで戻ってしまうので、必ず app.config.js 側で設定してください。
こういったリジェクト対応を繰り返して、審査を通過したら、晴れてあなたのアプリはApp Storeに公開できるようになります！
さあ、ここを目指して頑張りましょう！
おわりに
以上がiOSアプリ開発のロードマップです。Web開発と大きく変わる点は「ネイティブビルドが絡む部分」で、EAS buildやApp Store審査は最初こそ手間に感じますが、一度流れを掴めばスムーズに進めるようになります。
Reactが書けるなら意外と近道がある、というのは実際に開発してみて強く感じたところです。
まずはExpo公式チュートリアルをやってみてその快適さを体験してみてください。
宣伝
最後に少しだけ宣伝をさせてください。
まさにこの流れを経て作成した初めてのiOSアプリ、Roambleが2026年6月19日（金）に公開されることになりました！！
Roambleは、気になる店に入れる自分になる、新しいお店開拓アプリです。
現在地周辺のお店がランダムに提案され、そのお店を開拓できたら経験値やバッジがたまっていく...そしてその経験が積み重なり習慣となることで、あなたは最終的に「ふらっと新しいお店を開拓できる人」になれる。そんなアプリになっています。
ぜひ、以下の紹介ページから先行登録をお願いします。
ここまで読んでいただきありがとうございました！
2026-06-19追記：Roambleが公開されました！
上述の「新しいお店開拓アプリRoamble」が公開されました！
以下のリンクからインストールできますので、ぜひ週末のお出かけの際にお試しください！