RorkのReact Native + Expoアーキテクチャを深掘り解説

RorkはReact NativeとExpoフレームワークを使用してモバイルアプリケーションを構築しています。この組み合わせにより、開発者は1つのコードベースでiOSとAndroidの両方にデプロイできます。このアーキテクチャを理解することは、Rorkで高性能で保守しやすいアプリケーションを構築するための鍵です。

React Native + Expoを選ぶ理由

React Nativeはネイティブモバイルアプリケーションを構築するためにJavaScriptとReactを使用できます。iOSとAndroidそれぞれのプラットフォーム固有のコードを別々に書く代わりに、各プラットフォームでネイティブコードにコンパイルされるコンポーネントを書きます。

Expoはネイモバイルアプリケーション開発のワークフローを簡素化するためにReact Nativeの上に構築されたフレームワークです。ネイティブiOSおよびAndroid開発環境の複雑さを排除し、モバイルアプリケーション作成をWebデベロッパーに利用可能にします。

単一コードベースで複数プラットフォムに対応

React NativeとExpoの最大の利点の1つは、クロスプラットフォーム開発です。アプリケーションはiOSとAndroid両方で同じ機能を備えて動作します。

// 1つのコンポーネントが両方のプラットフォームで機能します
import { Text, View, StyleSheet } from 'react-native'
 
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello iOS and Android!</Text>
    </View>
  )
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    fontWeight: 'bold',
  },
})

同じJavaScriptコードが各プラットフォームでネイティブUIコンポーネントとしてレンダリングされます。TextはiOSではUILabelになり、AndroidではTextViewになります。ButtonはiOSではUIButtonになり、Androidではandroid.widget.Buttonになります。

Expoマネージドワークフロー vs ベアワークフロー

Expoは2つの開発アプローチを提供します：マネージドワークフローとベアワークフローです。

マネージドワークフロー（Rork推奨）

マネージドワークフローでは、Expoがすべてのネイティブコードコンパイル、設定、デプロイメントを処理します。React Nativeコードを書き、以下のようなコマンドを実行します：

expo start
expo build:ios
expo build:android
eas submit --platform ios

Expoは複雑なネイティブレイヤーをあなたに代わって管理します。このアプローチはより高速に開発でき、iOS/Androidネイティブ開発の知識は必要ありません。

メリット:

ネイティブ開発環境のセットアップが不要
迅速なイテレーションとテスト
自動更新機能
シンプルなCI/CDパイプライン
ネイティブ専門知識がないチームに最適

制限:

メンテナンスされていないネイティブライブラリを使用できない
最新のiOS/Androidフィーチャへのアクセスが初期段階では限定的
ビルド設定への制御が少ない

ベアワークフロー

ベアワークフローはネイティブコードの完全な制御を提供します。Expoから抜け出し、Android（Java/Kotlin）およびiOS（Swift/Objective-C）コードを直接管理します。

ベアワークフローの使用時機:

アプリが最先端のネイティブフィーチャを必要とする
Expoで利用できない特定のネイティブライブラリを使用する必要がある
チームにネイティブ開発の専門知識がある

Expo Go で即座テストする

開発中、Expo Goを使用して物理デバイスで即座にアプリをテストします。App StoreまたはGoogle PlayからExpo Goアプリをインストールし、以下を実行します：

expo start

QRコードをデバイスでスキャンすると、アプリが数秒でExpo Goに読み込まれます。コード変更を加えるとホットリロードを通じてデバイスに即座に反映されます。

このワークフローは開発中に物理デバイスシミュレータまたはエミュレータの必要性を排除し、イテレーション速度を劇的に高めます。

EAS: Expo Application Services

EASはアプリをApp StoreおよびGoogle Playにビルドして送信します。

EASでのビルド

eas build --platform ios
eas build --platform android

EASは：

React Nativeコードをネイティブバイナリにコンパイルします
コード署名とプロビジョニングプロファイルを処理します
.ipa（iOS）および .aab（Android）ファイルを生成します
Expoのインフラストラクチャで実行されます。ローカルネイティブツール不要

EASで送信する

eas submit --platform ios --latest
eas submit --platform android --latest

EASは自動化します：

App Store アップロードとメタデータ管理
Google Play Console 送信
バージョン番号付け
ビルド追跡と履歴

コンポーネント構造とアーキテクチャ

Rorkは整理されたきれいなコンポーネント構造を生成します。典型的なアプリアーキテクチャは以下のようです：

app/
├── screens/
│   ├── HomeScreen.js
│   ├── ProfileScreen.js
│   └── SettingsScreen.js
├── components/
│   ├── Header.js
│   ├── Card.js
│   └── Button.js
├── services/
│   ├── api.js
│   ├── auth.js
│   └── storage.js
├── context/
│   ├── AuthContext.js
│   └── ThemeContext.js
├── utils/
│   └── helpers.js
└── app.json

スクリーン

スクリーンはユーザーがナビゲートする全ページビューを表しています。各スクリーンは独自の状態とレイアウトを管理するReactコンポーネントです。

コンポーネント

複数のスクリーン全体で表示される再利用可能なUIコンポーネント。コンポーネントは小さく、焦点を絞ったものでテスト可能に保ちます。

サービス

API呼び出し、認証、ローカルストレージ、外部サービス統合を処理するビジネスロジックレイヤー。UIコンポーネントから分離されたサービスはテスト可能性と再利用性が向上します。

コンテキスト

React Context APIはユーザー認証ステータス、テーマ設定、言語設定など、グローバル状態を管理します。RorkはContext APIを、アプリ全体でアクセス可能にする必要がある状態に使用します。

// 例：グローバル認証状態のAuthContext
import { createContext, useState } from 'react'
 
export const AuthContext = createContext()
 
export function AuthProvider({ children }) {
  const [user, setUser] = useState(null)
  const [isLoading, setIsLoading] = useState(true)
 
  return (
    <AuthContext.Provider value={{ user, setUser, isLoading }}>
      {children}
    </AuthContext.Provider>
  )
}

状態管理

Rork生成アプリはReactのビルトインツールを状態管理に使用します：

useState: ローカルコンポーネント状態向け
useContext: グローバルアプリケーション状態向け（認証、テーマ、ユーザー設定）
useReducer: 個別スクリーンの複雑な状態ロジック向け

より大規模なアプリケーションでは、RorkはRedux、Zustand、その他の状態管理ライブラリを統合できます。

import { useContext } from 'react'
import { AuthContext } from './context/AuthContext'
 
export default function ProfileScreen() {
  const { user } = useContext(AuthContext)
 
  return (
    <View>
      <Text>Welcome, {user?.name}</Text>
    </View>
  )
}

Expo Router によるナビゲーション

Expo Router は Expo アプリの最新ナビゲーションソリューションです。Next.js に類似したファイルベースのルーティングシステムを使用し、ナビゲーションを直感的かつ構成的にしています。

app/
├── (tabs)/
│   ├── index.js      // Home tab
│   ├── explore.js    // Explore tab
│   └── profile.js    // Profile tab
├── auth/
│   ├── login.js
│   └── signup.js
└── [id].js           // Dynamic routes

スクリーンはファイル位置で定義されます。ナビゲーションは自動です：

import { Link } from 'expo-router'
import { Pressable, Text } from 'react-native'
 
export default function HomeScreen() {
  return (
    <Pressable>
      <Link href="/explore">
        <Text>Go to Explore</Text>
      </Link>
    </Pressable>
  )
}

RorkのAIがきれいなコードを生成する方法

RorkのAIはReact NativeおよびExpoアーキテクチャのベストプラクティスを理解しています。自然言語でアプリ要件を説明すると、AIは：

ナビゲーション構造を計画: どのスクリーンとナビゲーションパターンが意味を持つかを判定
コンポーネント階層を設計: UIを再利用可能なコンポーネントに分割
サービスレイヤーを組織: バックエンド呼び出しとビジネスロジック用の適切なサービスを作成
コンテキストと状態を設定: グローバル状態用にContext APIを実装
イディオマティックなReact Nativeコードを書きます: プラットフォーム固有のAPI（Platform.select、プラットフォーム固有スタイル）を適切に使用

適切なアーキテクチャを生成するプロンプト例：

「製品リスト、検索、ショッピングカート、チェックアウトを備えたeコマースアプリを作成」
「ユーザープロファイルとメッセージング機能を備えたソーシャルメディアフィードを構築」
「カテゴリと期限を備えたタスク管理アプリを作成」

AIはReact NativeおよびExpoベストプラクティスに従う完全で本番対応のコードを生成します。

パフォーマンスの考慮事項

レンダリングを最適化する

useMemo と useCallback を使用して不要な再レンダリングを防ぎます：

import { useMemo, useCallback } from 'react'
 
export default function ProductList({ products, onSelect }) {
  const filteredProducts = useMemo(() => {
    return products.filter(p => p.available)
  }, [products])
 
  const handleSelect = useCallback((id) => {
    onSelect(id)
  }, [onSelect])
 
  return (
    // Render filteredProducts
  )
}

長いリストには FlatList を使用

大規模なリストの効率的なレンダリングに FlatList を使用します：

import { FlatList, Text, View } from 'react-native'
 
export default function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  )
}

FlatListはリストアイテムを仮想化し、画面に表示されているアイテムのみをレンダリングします。

Rork でのデバッグ

Rork アプリは標準 React Native デバッグツールで動作します：

Chrome DevTools: JavaScript をデバッグしてネットワークリクエストを検査
React Native Debugger: コンポーネントツリーと状態を検査
Redux DevTools: Redux 使用時に状態変化を追跡
Expo のエラーオーバーレイ: アプリのエラーと警告を表示

全体を振り返って

RorkのReact Native + Expoアーキテクチャは、クロスプラットフォームモバイル開発への合理化されたパスを提供します。マネージドワークフローは複雑さを処理し、Expo Goは迅速なテストを可能にし、生成されたコードはコンポーネント、状態管理、ナビゲーションのベストプラクティスに従います。スタートアップのMVPを構築する場合でも本番アプリを構築する場合でも、このアーキテクチャはシンプルから複雑な要件までスケールします。

RorkのReact Native + Expoアーキテクチャを深掘り解説

RorkのReact Native + Expoアーキテクチャを深掘り解説

React Native + Expoを選ぶ理由

単一コードベースで複数プラットフォムに対応

Expoマネージドワークフロー vs ベアワークフロー

マネージドワークフロー（Rork推奨）

ベアワークフロー

Expo Go で即座テストする

EAS: Expo Application Services

EASでのビルド

EASで送信する

コンポーネント構造とアーキテクチャ

スクリーン

コンポーネント

サービス

コンテキスト

状態管理

Expo Router によるナビゲーション

RorkのAIがきれいなコードを生成する方法

パフォーマンスの考慮事項

レンダリングを最適化する

長いリストには FlatList を使用

Rork でのデバッグ

全体を振り返って

お読みいただきありがとうございます

関連記事