React Native カレンダーアプリ実装ガイド
React NativeアプリをローカルのiOSエミュレーターで動作させるまでをまとめました。
セットアップ手順
登場するもの
- Xcode // Mac or iPad必須です
- cocoapods // iOSアプリの依存管理システム
- Node.js
- React Native
ステップ1：Xcode開発環境の設定
Xcodeをインストール
Xcode の設定で以下を行う：
- Xcode メニュー → Settings...
- Components タブをクリック
- 「iOS 18 Simulator」（または最新版）をダウンロード
- ダウンロード完了まで待つ(5~10分かかりました)
ステップ2：プロジェクトのセットアップ
プロジェクトディレクトリに移動
npm依存関係をインストール
npm install
Bundler 依存関係をインストール
bundle install
(bundleのバージョンは1.17.2でした)
iOSの Pods をインストール
React Nativeアプリ直下で作業します
cd ios // アプリ内でiosディレクトリがある必要があります。ここの説明は省略します。
bundle exec pod install
cd ..
podはmiseでcocoapodsの最新版をインストールしました。
ステップ3：メトロバンドラーを起動（ターミナル1）
アプリのルートにて、
npm start
このターミナルは起動したままにしておく。
ステップ5：アプリを実行（別のターミナル）
npm run ios
私の環境では1分ほどかかりました。あれ？？となりますが待ってみてください。
自動でターミナルが立ち上がり、そのあとにエミュレーターが立ちあがります。
無事立ち上がりました。AIの力を借りて2時間ほどかかりました。
次は手元のiPhoneで動作するようにしてみます。
ちょっと詰まったところ。
xcodebuildでエラー
はじめにnpm run ios 実行時したときに、以下のエラーになりました。
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer
directory
'/Library/Developer/CommandLineTools' is a command line tools instance.
解決方法：
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
技術スタック
- React Native: 0.84.0
- React: 19.2.3
- TypeScript: 5.8.3
- iOS: 18.3 Simulator