React NativeとExpoでネイティブモジュールを使う【2025.08.25】

React NativeとExpoでネイティブモジュールを使う【2025.08.25】

1. React Native × Expoを選ぶ理由
• 高速開発と単一コードベースでiOS/Androidに対応可能
• 豊富なライブラリとコミュニティが存在
• Expoの便利機能により設定レスで開発開始
• 生成AIの活用に相性が良い
• Web技術の再利用も可能

2. ネイティブモジュールの扱い
• ネイティブモジュールの役割
• カメラ/GPS/Bluetoothなどハードウェアアクセス
• OS API呼び出しやパフォーマンス重視処理
• Swift/Kotlinなど既存ネイティブコードの再利用
• Expo Goの制約
• Expo Goは簡単に使えるが「カスタムネイティブモジュール」は使えない
• → 解決策は以下の2つ

解決策1：実機テスト（推奨）
1. iOS用に npx expo prebuild
2. Metro Bundler 起動
3. XCodeでワークスペースを開く
4. 実機接続してビルド・テスト

解決策2：Development Build
• EAS (Expo Application Services) を利用し、ネイティブモジュールを含むカスタム版Expo Goを作成
• 手順:
1. EAS CLIをインストール
2. プロジェクトをEASに登録
3. eas.jsonにDevelopment Build設定
4. コマンド実行でビルド
5. 実機にインストール

3. まとめ
• React Native × Expoはモダンで強力なスタック
• ネイティブ機能利用には 実機テスト or Development Build
• EASを使えば導入も容易
• Expoの制約を理解しつつ最大限活用することが重要

Transcript

1. React NativeとExpoで ネイティブモジュールを使う 2025.08.25 nogu (@_nogu66)
2. 自己紹介 nogu (@_nogu66) | 北海道出身 / 東京都在住 業務 ・社内システムの改修 ・生成AIを活用した社内DX ・生成AI × 自社データのプロダクト開発 個人 ・プロダクト開発 ・SNS発信 ・ハッカソン参加 1
3. Agenda • なぜReact Native × Expoなのか • ネイティブモジュールの扱い方 • まとめ 3
4. 01 1. なぜReact Native × Expoなのか 4
5. 最近の自分流アプリ開発スタック 5 React Native × Expo の組み合わせが主流に React Native ・ Facebookが開発したモバイルアプリケーションフレームワーク ・JavaScript・TypeScriptとReactを使用してネイティブ UIコンポーネントをレンダリング Expo ・React Nativeの開発を簡素化するツールセット ・設定不要で素早く開発を始められる環境を提供。
6. このスタックのメリット • 高速な開発サイクル • 単一コードベースで iOS/Android対応 • 豊富なライブラリとコミュニティ • 生成AIの恩恵が一番受けられる • Expoが提供する便利な機能群 • Webアプリの技術を流用可能 6
7. 02 2. ネイティブモジュールの扱い方 7
8. ネイティブモジュールとは？ React Nativeだけでは実現できないOS固有の機能を利用するための仕組み • カメラ、GPS、Bluetoothなどのハードウェアアクセス • OSレベルのAPI呼び出し • パフォーマンスが重要な処理 • 既存のネイティブコード（ Swift/Kotlin）の再利用 8
9. Expo Goの制約 手軽なExpo Goでは、カスタムのネイティブモジュールを追加できない Expo Go • QRコードで即座に起動 • 開発セットアップが非常に簡単 • Expo SDKに含まれるAPIのみ利用可能 • カスタムネイティブモジュールは利用不可 Development Build • 自前でビルドが必要 • セットアップに少し手間がかかる • 任意のネイティブモジュールを追加可能 • 本番環境とほぼ同じ条件でテスト可能 9
10. 解決策1：実機でテストを行う（推奨） 一度ビルドを行い、実機を有線接続してテストを行う 1 iOS用にビルド（npx expo prebuild） 2 Metro Bundler を起動（npm run start） 3 XCodeを起動（例：open ios/[アプリ名].xcworkspace） 4 実機をテスト対象に指定 5 実行 10
11. 解決策2：Development Buildを使う EAS (Expo Application Services) を利用して、ネイティブモジュールを含むカス タム版Expo Goを作成する 1 EAS CLIをインストール 2 プロジェクトをEASに登録 3 eas.jsonでDevelopment Buildを設定 4 コマンド一つでカスタムビルドを実行 5 生成されたアプリを実機にインストール 10
12. 03 3. まとめ 11
13. 本日のまとめ • React Native × Expoはモダンで強力な開発スタック • ネイティブ機能を使いたい場合は、 実機テストか Development Buildを利用 • EASを使えば、カスタムネイティブモジュールの導入も簡単 • Expoの制約を正しく理解し、エコシステムを最大限に活用しよう 12
14. • 2ヶ月以内にアプリリリース予定 • デジタルウェブビーインング • 写真編集アプリ • 途中経過はXで全て発信していますので、フォローをお願いします！ 宣伝 13
15. Thank you for listening X：@_nogu66