モバイル開発におけるReact Native：概要、主要概念と仕組み

基礎（JSX、Functional Component、Hooks）

JSX（JavaScript XML） — UIを記述するためのJavaScriptの構文拡張。HTMLのように見えますが、React.createElement()を通じて動作します。JSX式: {variable}, {condition && <View />}, {array.map()}。Functional Component — JSXを返す関数。propsを引数として受け取ります。Reactの現代的な標準（React 16.8以前はClass Componentsが使用されていました）。Hooks — Functional Componentから状態やライフサイクルにアクセスするための関数。フックのルール: トップレベルでのみ、Functional Components内でのみ使用可能。

フックリファレンス

useState — ローカル状態。useEffect — 副作用。useContext — Contextへのアクセス。useRef — ミュータブル参照。useCallback — 関数のメモ化。useMemo — 値のメモ化。Custom Hooks — 再利用可能なロジック: function useDebounce(value, delay)。

// React Nativeでフックを使用したFunctional Component
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

フック（useState、useEffect、useRef、useCallback、useMemo）

useState — [value, setValue]を返します。setValue — 置き換え（ClassのsetStateのようにマージしません）。オブジェクトの場合: setUser(prev => ({ ...prev, name: 'New' }))。useEffect — レンダリング後に実行されます。依存配列: [] — 一度だけ（マウント時）、[dep] — depが変更された時、undefined — 毎回のレンダリング時。クリーンアップ関数 — return () => {}。useContext — const value = useContext(MyContext)。ツリーの上位にContext.Providerが必要です。

useRef — レンダリング間で値を保持するミュータブルオブジェクト。.current — ミューテーション。用途: ネイティブ要素へのアクセス（ref={inputRef}）、前回の値の保存、タイマー。useCallback — メモ化された関数を返します。const handlePress = useCallback(() => {}, [dep])。useMemo — メモ化された値を返します。const sorted = useMemo(() => data.sort(), [data])。負荷の高い計算にはuseMemoを使用してください。

useState — 単純な状態に。useEffect — API呼び出しやサブスクリプションに。useCallback/useMemo — 最適化に。IT Sectrは、すべてをメモ化するのではなく、実際にパフォーマンスの問題が発生した場合のみ使用することを推奨します。

Custom Hooks

Custom Hook — 組み込みフックを使用する関数。名前はuse*で始まります。例: useDebounce、useNetworkStatus、useAppState、useKeyboard。Custom HooksはReact Nativeでロジックを再利用する主要な方法です。IT Sectrは、ビジネスロジックをCustom Hooksに抽出し、コンポーネントをクリーンに保つ（JSX + スタイルのみ）ことを推奨します。

コンポーネント（View、Text、FlatList、ScrollView、SafeAreaView）

View — 基本コンテナ（divに類似）。Text — テキスト（テキスト用の唯一のコンポーネント）。TextInput — テキスト入力。ScrollView — スクロール可能なコンテナ。FlatList — 大規模データ用の仮想化リスト。SectionList — セクション付きFlatList。SafeAreaView — Safe Areaからの自動パディング（ノッチ、ステータスバー）。Pressable — TouchableOpacityの現代的な代替。useColorScheme — ダーク/ライトテーマの検出。

FlatListの最適化

FlatList — 仮想化: 表示されているアイテム + windowSizeのみがレンダリングされます。最適化: 1）keyExtractor — 一意のキー、2）getItemLayout — 固定高さ（onLayout計測をスキップ）、3）renderItemにReact.memo、4）maxToRenderPerBatch（デフォルト10）、5）windowSize（デフォルト21）、6）removeClippedSubviews、7）initialNumToRender。

React Nativeのナビゲーション

React Navigation — 標準ナビゲーションスタック。NativeStackNavigator — ネイティブアニメーション（push/pop）。TabNavigator — 下部タブ。DrawerNavigator — サイドメニュー。NavigationContainer — ナビゲーションのルートコンポーネント。Deep linking — 外部リンクのリンク設定。認証フロー — 条件付きナビゲーション: isAuth ? AppStack : AuthStack。IT Sectrは、メイン画面にはNativeStackNavigatorを、第一レベルのナビゲーションにはTabNavigatorを推奨します。

スタイル（StyleSheet）

StyleSheet.create() — スタイルの作成。すべてのプロパティはキャメルケース: backgroundColor、fontSize、marginTop。Flexbox — デフォルトレイアウトモデル（flexDirection: 'column'）。CSSカスケードなし、継承なし、セレクターなし。インラインスタイル — 機能するが推奨されない。StyleSheet.compose() — スタイルの結合。Platform.select — プラットフォーム固有のスタイル: Platform.OS === 'ios' ? styles.ios : styles.android。SafeAreaView — セーフエリアインセットの管理。

Styled ComponentsとCSS-in-JS

Styled Components — React NativeでCSS-in-JSを使用するためのライブラリ。Restyle — テーマ設定 + レスポンシブスタイル。NativeWind — React Native向けTailwind CSS。Unistyles — アトミックCSSによる高速スタイル。ダークモード — useColorScheme + 動的スタイル。IT Sectrは、シンプルさのためにStyleSheet.createを、デザインシステムのあるプロジェクトにはNativeWindを推奨します。

アニメーション（Animated API）

Animated API — 宣言的アニメーション。Animated.Value — アニメーション値。Animated.timing — シンプルなアニメーション。Animated.spring — バネアニメーション。Animated.View — アニメーション可能なView。useNativeDriver — ネイティブスレッドでのアニメーション（transform、opacity — 対応）。Animated.loop — ループアニメーション。LayoutAnimation — レイアウト変更時の自動アニメーション。reanimated 2/3（ライブラリ） — より高性能な代替。Metro Bundler — JavaScriptバンドラー。JS + アセットをバンドルにまとめます。Fast Refresh（Hot Reload）をサポート。Hermes — モバイルに最適化されたJSエンジン: 高速起動、少ないメモリ。RN 0.70+以降デフォルト。

Gesture Handlerとアニメーション

React Native Gesture Handler — ネイティブジェスチャー処理。PanGestureHandler、PinchGestureHandler、TapGestureHandler。Gesture（RNGH 2.x） — 宣言的ジェスチャーAPI。Reanimated + Gesture Handler — ジェスチャーによる60fpsアニメーションの組み合わせ。react-native-skia — 複雑な2DグラフィックスのGPUレンダリング。IT Sectrは、Animated APIより高性能なアニメーションにはReanimated 3を推奨します。

ネットワーキング（fetch、AsyncStorage、API）

fetch — 組み込みHTTPクライアント。GET、POST、headers、bodyをサポート。Axios — インターセプター付きの人気ライブラリ。AsyncStorage — キーバリューストレージ（UserDefaultsに類似）。MMKV — WeChat製AsyncStorageの高速な代替。react-native-keychain — 安全なトークンストレージ。React Query（TanStack Query） — サーバー状態管理: キャッシング、再検証、ページネーション。IT Sectrは、APIリクエストにはReact Queryを、ローカルストレージにはMMKVを推奨します。

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native ModulesとTurbo Modules

Native Module — JSとネイティブコード間のブリッジ（AndroidはJava/Kotlin、iOSはObjC/Swift）。JSからネイティブAPIを呼び出せます。Turbo Modules（New Architecture） — 従来のNative Modulesの置き換え。同期呼び出し、Codegenによる型付け、オーバーヘッド削減。Fabric Renderer — 同期レイアウトを備えた新しいレンダラー。JSI（JavaScript Interface） — ブリッジなしでJSがネイティブオブジェクトに直接アクセス。IT Sectrは、新規プロジェクトにはTurbo Modulesを、既存プロジェクトにはNative Modulesを推奨します。

// Androidネイティブモジュール（Kotlin）
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

テスト（Jest、React Native Testing Library）

Jest — 標準テストランナー。describe/it/expect。React Native Testing Library — コンポーネントテスト。render、fireEvent、waitFor。screen.getByText、getByTestId — 検索。userEvent — アクションシミュレーション。スナップショットテスト — toMatchSnapshot()。MSW（Mock Service Worker） — APIモッキング。Detox — RN向けE2Eテスト（グレーボックス、ネイティブ）。IT Sectrは、コンポーネントテストにはReact Native Testing Libraryを、エンドツーエンドシナリオにはDetoxを推奨します。

CodePush（App Center） — App Store/Google Playに公開せずにJSバンドルをOTA更新。用途: 緊急修正、A/Bテスト、コンテンツ変更。制限: ネイティブコードは変更不可。代替: EAS Update（Expo）、react-native-update。IT Sectrは、緊急修正にはCodePushを、ExpoプロジェクトにはEAS Updateを推奨します。

Expo — React Native向けフレームワーク。管理ワークフロー — すべての設定はapp.json経由。Development builds — ejectなしでカスタムネイティブモジュール。Expo SDK — 組み込みモジュール: カメラ、生体認証、通知。EAS Build — クラウドビルド。Expo Router — ファイルベースルーティング（Next.jsに類似）。IT Sectrは、新規プロジェクトにはExpoを、高度なネイティブカスタマイズが必要なプロジェクトにはbare RNを推奨します。