【2026年版】React Nativeで業務用iOSアプリを開発する完全ガイド｜Web経験者向け

なぜ今、React Nativeで業務アプリなのか？

「社内で使う業務アプリをモバイル化したい」

こんな要望を受けたWeb開発者は多いのではないでしょうか。倉庫での在庫確認、現場での点検報告、営業先での見積作成など、PCを開けない場面でこそモバイルアプリの価値が発揮されます。

しかし、いざモバイルアプリ開発となると「SwiftやKotlinを一から学ぶ必要があるのでは？」という不安がつきまといます。ここで注目されているのが React Native です。

React Nativeは、ReactとJavaScript（TypeScript）の知識があれば、iOSとAndroid両方のネイティブアプリを開発できるフレームワークです。Meta社（旧Facebook）が開発・メンテナンスしており、Instagram、Shopify、Discordなど、多くの企業が採用しています。

📎 公式リンク: React Native Showcase – 採用企業一覧

特に2024年以降、開発環境の「Expo」が大幅に進化し、以前は難しかった業務用途での採用障壁が大きく下がりました。

この記事で得られること

1. React Nativeの基礎知識：Web開発者の視点で理解する仕組みと特徴
2. 業務アプリ特有の実装ポイント：セキュリティ、認証、オフライン対応など
3. 技術選定の判断材料：自社で採用すべきかを判断するチェックリスト

この記事は、Web開発経験があり、これからモバイルアプリ開発に挑戦したいと考えている方を対象としています。業務用アプリの開発を検討している方にとって、技術選定の羅針盤となれば幸いです。

React Nativeとは？Web開発者が知っておくべき基本

ReactとReact Nativeの違い

React Nativeは名前の通り「React」をベースにしていますが、Webブラウザ向けのReactとは動作の仕組みが異なります。

つまり、React Nativeで作ったアプリは「Webアプリをアプリ風に見せている」のではなく、実際にiOSやAndroidのネイティブ部品で構成されています。これにより、ネイティブアプリに近いパフォーマンスと操作感が実現できます。

Web開発との共通点と相違点

基本的なReactの知識（コンポーネント、hooks、状態管理など）はそのまま活かせます。一方で、CSSの一部プロパティが使えない、レイアウトはFlexboxが基本、などの違いには慣れが必要です。

Expo vs React Native CLI：2026年の最適解

React Nativeの開発環境には、大きく分けて2つの選択肢があります。

📎 公式リンク: Expo公式ドキュメント | React Native公式

macOSでの開発環境セットアップ【チェックリスト付き】

iOSアプリの開発・ビルドには macOS が必須です。これはAppleの制約であり、WindowsやLinuxではiOSアプリをビルドできません。

必須ツールのインストール

以下のツールを順番にインストールしていきます。

1. Homebrew（パッケージ管理ツール）

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Node.js（LTS版を推奨）

brew install node

node -v  # v20.x.x 以上を推奨

3. Watchman（ファイル監視ツール）

brew install watchman

4. Xcode（Apple公式IDE）

App Storeから「Xcode」をインストールします。インストールには約40GB以上の空き容量が必要です（シミュレーターを含むため、表示サイズより大きくなります）。

xcode-select --install
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

外付けSSDにXcodeをインストールした場合: パスを適切に変更してください。

sudo xcode-select -s /Volumes/SSD_NAME/Xcode.app/Contents/Developer

詳細は「Xcodeを外付けSSDにインストールする完全ガイド」を参照してください。

5. CocoaPods（iOS依存関係管理）

brew install cocoapods

注意: sudo gem install cocoapods はmacOS標準のRuby（2.6系）では動作しません。Homebrewでインストールすることで、この問題を回避できます。

6. UTF-8環境変数の設定

CocoaPodsがUTF-8エンコーディングを要求するため、シェルの設定ファイルに以下を追加してください。

# ~/.zshrc または ~/.bash_profile に追加
export LANG=en_US.UTF-8
export LC_ALL=en_US.UTF-8

設定後、ターミナルを再起動するか source ~/.zshrc を実行してください。

Expoプロジェクトの作成

環境が整ったら、最初のプロジェクトを作成します。

プロジェクトの作成場所

まず、プロジェクトを作成するディレクトリに移動します。

# 内蔵ストレージに作成する場合
cd ~/Projects

# 外付けSSDに作成する場合（内蔵ストレージ節約）
cd /Volumes/SSD_NAME/Workspace

外付けSSDを使う場合のメリット: node_modulesフォルダだけで1GB以上になることがあります。外付けSSDにプロジェクトを配置することで、内蔵ストレージを節約できます。

プロジェクトの作成と移動

# プロジェクトを作成
npx create-expo-app@latest MyEnterpriseApp --template tabs

# 作成したプロジェクトディレクトリに移動（重要！）
cd MyEnterpriseApp

注意: 以降のコマンドはすべて MyEnterpriseApp ディレクトリ内で実行します。npx expo run:ios などをプロジェクトの親ディレクトリで実行すると package.json does not exist エラーになります。

📎 公式リンク: create-expo-app

iOSシミュレーターでの動作確認

プロジェクトディレクトリ内で以下を実行します。

# MyEnterpriseAppディレクトリ内で実行
npx expo run:ios

初回は依存関係のインストールに時間がかかりますが、成功するとiOSシミュレーターが起動し、アプリが表示されます。

環境構築完了チェックリスト

外付けSSDにXcodeをインストールしている場合の注意点

外付けSSDでXcodeを運用する場合、以下の点に注意してください。

CoreSimulatorは内蔵ストレージに残す

~/Library/Developer を丸ごと外付けSSDにシンボリックリンクすると、シミュレータの作成時にパーミッションエラーが発生します。CoreSimulatorは内蔵ストレージに残し、DerivedData（ビルドキャッシュ）のみ外付けに移動するのが最適です。

Simulatorはフルパスで起動

open -a Simulator コマンドでは外付けSSD内のSimulatorが起動しません。以下のようにフルパスで起動してください。

open /Volumes/SSD_NAME/Xcode.app/Contents/Developer/Applications/Simulator.app

詳細は「Xcodeを外付けSSDにインストールする完全ガイド」のトラブルシューティングを参照してください。

業務用途で「絶対に外せない」5つの実装ポイント

「動くアプリ」を作るだけなら、チュートリアル通りに進めれば難しくありません。しかし、業務用アプリとして安定運用するためには、追加で考慮すべきポイントがあります。

1. 認証とセキュリティ

業務アプリでは、社内システムとの認証連携が必須となるケースがほとんどです。

認証基盤の選択

トークンの安全な保存

ログイン後のアクセストークンを安全に保存するには、expo-secure-store を使用します。

npx expo install expo-secure-store

このライブラリを使うと、iOSの「Keychain」、Androidの「Keystore」という安全な領域にデータを暗号化して保存できます。AsyncStorage などの一般的なストレージに認証情報を保存するのは避けてください。

注意: react-native-keychain という類似ライブラリもありますが、Expoのマネージドワークフローでは直接動作しません。Expoプロジェクトでは expo-secure-store を使用してください。

📎 公式リンク: expo-secure-store

環境変数の管理

APIキーやエンドポイントURLなどの設定値は、コードに直接書かず、環境変数として管理します。

npx expo install expo-constants

app.config.js で環境ごとの設定を管理し、expo-constants 経由でアプリ内から参照します。

2. 状態管理とAPI通信

業務アプリでは、サーバーとの頻繁なデータ同期が発生します。ここで推奨するのが TanStack Query（旧React Query） です。

TanStack Queryを使う理由

• キャッシュ管理: 同じデータの重複取得を防ぐ
• バックグラウンド更新: アプリを使用中に最新データへ自動更新
• オフライン対応: ネットワーク切断時のリトライ処理が組み込み済み
• 楽観的更新: 送信完了を待たずにUIを先に更新

npm install @tanstack/react-query

📎 公式リンク: TanStack Query | React Native対応

特に業務アプリでは、ネットワーク環境が不安定な現場（工場、倉庫など）での使用を想定する必要があります。TanStack Queryのリトライ機能とキャッシュ機能は、このような環境で大きな効果を発揮します。

3. TypeScriptの必須性

Expoの新規プロジェクトはデフォルトでTypeScriptが有効になっています。追加設定は不要です。

4. テスト戦略

業務アプリは「止まらないこと」が最も重要です。リリース後の不具合は業務に直接影響するため、テストの自動化は必須と考えてください。

テストの種類と推奨ツール

特にE2Eテスト（End-to-End テスト）は、「ログインしてデータを登録し、一覧に表示される」といった一連の操作を自動で検証できます。手動テストでは見落としがちな回帰バグを防ぐ効果があります。

5. パフォーマンス考慮

React Nativeは多くのケースで十分なパフォーマンスを発揮しますが、以下の場面では注意が必要です。

パフォーマンスが課題になりやすいケース

• 大量のリスト表示: 数千件以上のデータを表示する場合
• 複雑なアニメーション: 60fpsを維持する必要がある場合
• リアルタイム処理: カメラ映像の解析、Bluetooth連携など
• 重い計算処理: 画像処理、暗号化処理など

これらのケースでは、FlatList の最適化、react-native-reanimated の活用、必要に応じてネイティブモジュールの作成を検討します。

ただし、一般的な業務アプリ（フォーム入力、一覧表示、データ同期など）であれば、React Native標準の範囲で十分対応可能です。

App Store以外の選択肢｜業務アプリの配布戦略

業務用アプリの配布は、一般公開のアプリとは異なるアプローチが必要です。「社員だけが使えるアプリ」「特定の取引先にだけ配布したいアプリ」など、限定的な配布を行う方法を解説します。

配布方法の比較

Apple Business Manager（ABM）とは【推奨】

Apple Business Manager（ABM）は、企業がiOSデバイスとアプリを一元管理するためのApple公式サービスです。

ADEP（Apple Developer Enterprise Program）の現実

ADEPは、App Storeを一切経由せず、社内Webサイトなどから直接IPAファイルを配布できるプログラムです。

多くの企業にとっては、ABMを使った限定配布で十分です。ADEPは大企業向けの選択肢と考えてください。

📎 公式リンク: Apple Developer Program | Enterprise Program | Apple Business Manager

配布方法の選択フロー

Q1: 一般ユーザーに公開する？
  → Yes: App Store（一般公開）
  → No: Q2へ

Q2: 配布先は自社社員のみ？
  → Yes: Apple Business Manager
  → No: Q3へ

Q3: 特定の取引先・顧客企業へ納品？
  → Yes: Custom Apps（ABM経由）
  → No: Q4へ

Q4: 従業員数100名以上の大企業？
  → Yes: ADEP検討（ただしABMでも可）
  → No: Apple Business Manager

継続的デリバリーで運用コストを下げる

アプリは「作って終わり」ではありません。バグ修正、機能追加、OSアップデートへの対応など、継続的なメンテナンスが必要です。手動でのビルドとリリースはミスの温床となるため、CI/CD（継続的インテグレーション/継続的デリバリー）の導入を推奨します。

EAS Build：Expoユーザーの最適解

Expoを使用している場合、EAS（Expo Application Services）Build が最も導入しやすい選択肢です。

npm install -g eas-cli
eas login
eas build:configure

設定完了後は、以下のコマンドでクラウド上でビルドが実行されます。

eas build --platform ios

EAS Buildのメリット

• ローカルにXcodeのビルド環境がなくてもビルド可能
• 証明書・プロビジョニングプロファイルの管理が自動化
• GitHub連携でプッシュ時の自動ビルドが可能

📎 公式リンク: EAS Build

GitHub Actionsとの連携

既存のGitHub Actionsワークフローに組み込むことも可能です。

# .github/workflows/build.yml
name: Build iOS App
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      - run: eas build --platform ios --non-interactive

📎 公式リンク: expo-github-action | CIからのビルド

OSアップデートへの追従

iOSは毎年メジャーアップデートがあり、それに伴いReact NativeやExpoも更新されます。

React Nativeを選ぶべきか？判断チェックリスト

ここまでReact Nativeでの業務アプリ開発について解説してきました。最後に、自社での採用可否を判断するためのチェックリストを用意しました。

React Nativeが向いているケース

React Nativeを避けるべきケース

判断に迷った場合

React Nativeの良いところは、初期投資が少なく、早い段階で「合う/合わない」の判断ができることです。

まとめ｜次にやるべき3つのアクション

この記事では、React Nativeで業務用iOSアプリを開発するための全体像を解説しました。

記事の要点

1. React Nativeの立ち位置: Webの知識を活かしてネイティブアプリを開発できるフレームワーク
2. 2026年のベストプラクティス: Expoを採用し、TypeScript + TanStack Queryで堅牢な設計を
3. 業務アプリ特有の考慮点: セキュリティ（expo-secure-store活用）、認証連携（Auth0/MSAL）、配布方法（ABM）
4. 技術選定の判断基準: 「向いているケース」と「避けるべきケース」を明確に把握

次にやるべき3つのアクション

npx create-expo-app@latest MyTestApp --template tabs
cd MyTestApp
npx expo run:ios

業務アプリのモバイル化は、現場の生産性を大きく向上させる可能性を秘めています。React Nativeは、Web開発のスキルを活かしながらその第一歩を踏み出せる、実践的な選択肢です。

この記事が、皆さんの技術選定の一助となれば幸いです。