React Native：その概要、Bridgeの仕組み、JavaScript環境

React Nativeとは

React Native は、Facebookチーム（現Meta）によって作成され、2015年にオープンソースとして公開されたフレームワークです。ハイブリッドアプローチ（Cordova、Ionic）とは異なり、React NativeはWebViewを使用しません。代わりに、JavaScriptコンポーネントがネイティブUI要素にマッピングされます：View → UIView / android.view.View、Text → UILabel / TextView、ScrollView → UIScrollView / ScrollView。

React Native の初版はiOSのみをサポートしていました。Androidサポートは2016年に追加されました。バージョン0.60（2019）ではAutolinking（ネイティブ依存関係の自動リンク）が導入されました。React Native 0.68（2022）には新しいFabric + TurboModulesアーキテクチャが含まれました。現在の安定版0.74（2024）は、Flexboxレイアウト用のYoga 3.0サポートを備えたNew Architectureに完全に移行しています。

Statista 2024によると、React Nativeはクロスプラットフォームプロジェクトの38%で使用されています。このフレームワークはDiscord、Instagram、Shopify、Pinterest、Skype、Uber Eatsで使用されています。MetaはFacebookとInstagram（20億ユーザーを持つメインのモバイルアプリ）でReact Nativeを使用しています。

React Nativeの歴史と進化

React Native は2015年1月のReact.js Confで発表されました。そのアイデアは、Reactの宣言的パラダイムをウェブからモバイルプラットフォームに移行することでした。リポジトリへの最初のコミットは2013年に、iOS向けFacebook Groupsアプリを作成するための内部Facebookプロジェクトとして登場しました。

0.70（2022）バージョンでは、HermesがデフォルトのJavaScriptエンジンとして導入されました。Hermesはモバイルデバイス向けに最適化された事前コンパイル（AOT）エンジンです。JavaScriptCoreと比較して、アプリの起動時間を50%削減し、APKサイズを30%削減します。HermesはES6と部分的にES2020をサポートしています。

React NativeとReact Webの違い

React Web はReactDOMを介してコンポーネントをDOM要素（div、span、p）にレンダリングします。React Nativeはプラットフォームのネイティブコンポーネントにレンダリングします。<div>の代わりに<View>を、<span>の代わりに<Text>を使用します。スタイルはStyleSheet.create()を介して定義され、プラットフォームのCSSプロパティに変換されます。FlexboxはYogaエンジンを介してデフォルトで有効です。

React Nativeのナビゲーションはウェブとは異なります。react-router-domの代わりにReact Navigationが使用されます。これはStack、Tab、Drawerナビゲーターをサポートするネイティブラブラリです。React Navigation 6.xはネイティブアニメーション（useNativeDriver）とDeep Links統合を使用します。iOSのUINavigationControllerとAndroidのFragmentを使用したネイティブ画面ナビゲーションには、Wixのreact-native-navigationライブラリが使用されます。

React Nativeのアーキテクチャ

React Nativeのアーキテクチャ は従来、Bridge（JavaScript環境とネイティブコード間の非同期JSONチャネル）を中心に構築されていました。バージョン0.68以降、MetaはBridgeをJSI（JavaScript Interface）とFabricに置き換えるNew Architectureを導入しました。両方のモデルを見てみましょう。

BridgeとFabric

Bridge は、複数のスレッドで動作するシリアル化されたJSONプロトコルです：JS Thread（Reactコードの解釈）、Main Thread（UI）、Native Modules Thread（API）。JSとネイティブコード間の各インタラクションはオブジェクトのシリアル化とデシリアル化を経由するため、頻繁な呼び出しで遅延が発生します。1000アイテムのリストをスクロールする場合、Bridgeは毎秒最大10,000件のJSONメッセージを生成します。

Fabric はReact Nativeの新しいレンダリングシステムです。Bridgeの代わりに、FabricはJSIを介してUIスレッドと同期するC++シャドウツリーを使用します。これによりJSONのシリアル化が不要になります。ネイティブのC++コードがJavaScript環境の関数を直接呼び出し、その逆も可能です。Fabricはレンダリング遅延を16ミリ秒（Bridge）から2〜4ミリ秒に削減します。

TurboModules はNew Architectureの2番目の部分です。古いモデルでは、すべてのネイティブモジュールがアプリ起動時に読み込まれていました。TurboModulesはモジュールを遅延読み込み（lazy loading）します—JSコードが初めてそれらを要求したときのみです。これにより、20以上のネイティブモジュールを持つアプリのコールドスタート時間が40%削減されます。

React Nativeアプリの例

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

ネイティブモジュール

ネイティブモジュール は、JavaScriptからプラットフォームAPIを呼び出すためのメカニズムです。機能が標準のReact Nativeコンポーネント（カメラ、Bluetooth、生体認証）でカバーされていない場合、開発者はSwift/Kotlinでモジュールを作成し、RCTBridgeModuleまたはTurboModuleを介して登録します。ネイティブ関数はJSからNativeModules.CameraModule.takePhoto()を介して呼び出されます。

React Nativeは、加速度計（react-native-sensors）、位置情報（@react-native-community/geolocation）、生体認証（react-native-biometrics）、ローカル通知（@notifee/react-native）にアクセスするための既製のネイティブモジュールを提供します。カスタムシナリオ向けに、ExpoはExpo Modules APIを提供しています—XcodeやAndroid Studioなしでネイティブモジュールを作成するためのよりシンプルなインターフェースです。

React Nativeの利点

大規模なコミュニティ — React Nativeはクロスプラットフォームフレームワークの中で最大のコミュニティを持っています。GitHubでは、プロジェクトに117,000以上のスターと1,800以上のコントリビューターがいます。npmは毎週react-nativeを300万回以上ダウンロードしています。React Nativeの質問は、Stack Overflowのモバイル開発セクションにおける全質問の5%を占めています。

JavaScriptエコシステム — React開発者はウェブと同じツール（npm、Babel、ESLint、Prettier、Jest、TypeScript）を使用します。ビジネスロジックはウェブ版（React）とモバイルアプリ（React Native）間で再利用できます。Redux、Zustand、React Query、React Hook Formなどのライブラリは、変更なしで両方のプラットフォームで動作します。

Expo はReact Native開発を簡素化するSDKとツールセットです。Expoは既製のモジュール（カメラ、通知、地図、OAuth）、クラウドビルド（EAS Build）、OTAアップデート（EAS Update）を提供します。Expo Goを使用すると、XcodeやAndroid Studioなしで物理デバイス上でアプリを実行できます。Expo 2024のデータによると、新しいReact Nativeプロジェクトの70%がExpoを使用しています。

OTAアップデート — Expo UpdateとCodePush（Microsoft）を通じて利用可能な機能です。開発者はApp StoreやGoogle Playのレビューを経由せずに、JavaScriptバンドルの更新を直接ユーザーに送信できます。これにより、重大なバグ修正が2〜5日（レビュー待ち）から1〜2時間に短縮されます。

TypeScriptサポート はReact Native 0.71からデフォルトで含まれています。プロジェクトテンプレートにはtsconfig.json、すべてのコンポーネントの型、厳格モードのサポートが含まれています。Flow（Facebookの静的型付け）もサポートされていますが、Metaは公式にTypeScriptを推奨しています。State of React Native 2024の調査によると、TypeScriptテンプレートは新しいプロジェクトの85%を占めています。

エコシステムと人気のライブラリ

npm はReact Nativeの主要なパッケージレジストリです。ライブラリの検索はreact-nativeキーワードでフィルタリングされます。インストールにはnpm installまたはyarn addを使用します。React Native CLIはネイティブ依存関係を自動的にリンクします（バージョン0.60以降）。Expoプロジェクトの場合、インストールはexpo installを介して管理され、互換性のあるライブラリバージョンを選択します。

主要ライブラリ

@react-navigation/native — React Nativeにおけるナビゲーションのデファクトスタンダードです。このライブラリにはStack Navigator（アニメーション遷移）、Tab Navigator（iOS/Android用の下部メニュー）、Drawer Navigator（サイドメニュー）、Material Top Tabが含まれています。React Navigation 7.x（2024）は静的ルート設定とuseSyncExternalStoreによる完全なReact 18サポートを導入しました。

react-native-reanimated — 高性能アニメーションのためのライブラリです。Reanimated 3.xはJSスレッドをバイパスしてUIスレッド（worklet）でアニメーションを実行します。これにより、100以上の要素をアニメーション化する場合でも60 FPSが保証されます。useSharedValue、useAnimatedStyle、withSpringは標準ライブラリのAnimated APIを置き換えます。Reanimatedはreact-native-gesture-handlerを介してタッチジェスチャを処理します。

@tanstack/react-query — サーバー状態管理のためのライブラリです。React QueryはAPI応答をキャッシュし、ネットワーク変更時に自動的にデータを再取得し（refetchOnReconnect）、useInfiniteQueryを使用したページネーションをサポートします。バージョン5.xにはUXのための楽観的更新が含まれています—サーバー応答を受け取る前にインターフェースが更新され、その後調整されます。