メインコンテンツまでスキップ

React Native

Overview​

React Nativeは、Meta（旧Facebook）によって開発されたオープンソースのUIフレームワーク。
JavaScriptとReactを使って、iOSとAndroidの両方で動作するネイティブアプリを構築できる。

ReactNative メリット​

ReactNative デメリット​

1. パフォーマンスが落ちる場合がある​

ReactNativeは、JavaScriptのコードとネイティブコンポーネントの間を「ブリッジ」で通信するアーキテクチャを採用している。
このブリッジを介した処理がボトルネックとなり、SwiftやKotlinで直接開発されたネイティブアプリと比較すると、パフォーマンスが若干劣る場面がある。
特に複雑なアニメーション、大量のデータを扱うリスト表示、CPU負荷の高い処理などでは、その差が顕著に現れる可能性がある。
一般的なビジネスアプリケーションでは体感上の問題になることは少ないが、ミリ秒単位の応答性が求められるような、極めて高いパフォーマンス要件を持つアプリの開発には注意が必要。

2. OS固有の複雑なUIや機能の実装には工夫が必要​

ReactNativeは多くのUIコンポーネントを共通化しているが、iOSとAndroidにはそれぞれ独自のUIデザインガイドラインや、プラットフォーム特有の機能が存在する。
例えば、ARKit（iOS）や最新のウィジェット機能など、OSの深いレベルに依存する機能を実装する場合、標準で用意されたコンポーネントだけでは対応できないことがある。

このようなケースでは、ネイティブコード（Swift/Kotlin）で個別にモジュールを作成し、それをJavaScript側から呼び出すといった追加の対応が求められる。
この作業はネイティブ開発の知識を必要とするため、実装の難易度が上がり、クロスプラットフォーム開発のメリットである工数削減効果が薄れてしまう可能性がある。

3. アプリサイズの増加​

実行エンジン（Hermesなど）を同梱するため、ネイティブアプリに比べてバイナリサイズが大きくなりやすい。

4. OSのアップデートに影響を受けやすい可能性がある​

iOSやAndroidでメジャーアップデートが行われると、新しいAPIが導入されたり既存の機能に仕様変更が加えられたりする。
ReactNativeはこれらのOSアップデートに追随して更新されるが、対応が完了するまでには一定の時間がかかる場合がある。
そのため、最新OSの機能をリリース直後から利用したい場合や、OSの変更によってアプリに不具合が生じた際にフレームワークや関連ライブラリのアップデートを待つ必要が出てくる可能性がある。
このタイムラグは、迅速な対応が求められるプロジェクトにおいてリスクとなり得るため、ライブラリの依存関係やコミュニティの動向を常に注視しておくことが求められる。

5. 高度なグラフィック処理を要するゲーム開発には不向き​

ReactNativeはUI中心のアプリケーション開発を得意としているが、グラフィック性能を極限まで追求するような開発には向いていない。
特に、複雑な3Dモデルの描画やリアルタイムでの物理演算など、高度なグラフィック処理が求められるゲームの開発にはパフォーマンス上の制約がある。 これらのアプリケーションでは、GPUを直接的に、かつ効率的に利用する必要があるため、UnityやUnrealEngineといった専用のゲームエンジンや、Metal（iOS）やVulkan（Android）などのグラフィックAPIを用いたネイティブコードでの開発が適している。
簡単なパズルゲームなどであれば実装可能ですが、本格的なゲーム開発の選択肢としては一般的ではない。

ReactNative しくみ​

React Nativeのコアは、「JavaScriptのロジック」と「OSのネイティブUI」をどう繋ぐかにある。

  1. Thread構成 Main Thread (UI Thread): 画面描画やユーザーのタッチ操作を処理するOS側のスレッド JavaScript Thread: ビジネスロジックやAPI通信を実行するスレッド
  2. Bridge (旧アーキテクチャ) JSスレッドとネイティブスレッド間でJSON形式のメッセージを非同期でやり取りします。これがBridge JavaScriptスレッドとネイティブスレッド間の通信（一般にブリッジと呼ばれます）をつなぐ
  3. JSI (新アーキテクチャ - Fabric/TurboModules) JavaScriptインターフェース（JSI）により、JSからネイティブオブジェクトを直接参照できるようになった これにより、ブリッジによるオーバーヘッドが解消され、より高速な描画が可能になっている

開発中のクリーンアップについて​

定期的にリセットするためのクリーンアップスクリプトは、React Native / Expo開発において必須。
React Nativeは「JS層」「ネイティブ層（iOS/Android）」「キャッシュ（Metro/Expo）」の3層が複雑に絡んでいるため、ライブラリの追加やバージョン変更時にキャッシュの不整合で謎のエラーが出ることがよくある。

1. 推奨のクリーンアップスクリプト​

package.json の scripts に以下のように記述するのがおすすめ

"scripts": {
  "clean": "npx expo install --check && expo clean",
  "clean:native": "rm -rf android/build ios/build && cd ios && pod deintegrate && pod install"
}
ヒント

最近のExpoには公式で npx expo clean というコマンドがある
これはビルドキャッシュや中間ファイルを適切に掃除するので、まずはこれを使うのが推奨

2. いつクリーンアップすべきか？​

以下のような「謎の挙動」に遭遇したら迷わず叩く

  1. ライブラリを入れたのに「Module not found」と言われる
  2. JSを直したのに、アプリに反映されない（キャッシュが古い）
  3. XcodeやAndroid Studioでのビルドが急に失敗し始めた
  4. package.json のバージョンを書き換えた直後
  5. 各階層ごとの「掃除」の役割

Resource​