クロスプラットフォームアプリとは：Flutter、React Native、KMPの比較

クロスプラットフォームアプリとは？

Cross-Platform App（クロスプラットフォームアプリケーション）とは、単一のコードベースから複数のモバイルオペレーティングシステムで動作するように開発されたソフトウェアです。iOS（Swift）とAndroid（Kotlin）で2つの別々のプロジェクトを維持するネイティブ開発とは異なり、クロスプラットフォーム開発はビジネスロジック、ユーザーインターフェース、データ層を1つのプロジェクトに統合します。

クロスプラットフォーム開発の概念は2009年にPhoneGap（後のApache Cordova）とともに登場し、WebアプリケーションをネイティブのWebViewにパッケージ化しました。現代のフレームワークは大きく進歩しています。FlutterはDartを介してネイティブARMコードにコンパイルされ、React Nativeはネイティブブリッジを備えたJavaScriptエンジンを使用し、Kotlin Multiplatformは共有コードをプラットフォーム固有のバイナリにコンパイルします。2026年までに、新しいモバイルアプリの40%以上が少なくとも1つのクロスプラットフォーム技術を使用しています。

導入の主な指標：市場投入が30～50%高速化、2つのネイティブチームと比較して30～40%のコスト削減、両プラットフォームでの統一機能セットのサポート。ただし、クロスプラットフォームアプリは依然として課題に直面しています。プラットフォーム固有のUIのニュアンス、ハードウェアAPIへのアクセス、アニメーションやゲームなどのパフォーマンス重視の機能です。

Flutter：アーキテクチャとパフォーマンス

Flutterは、Dart言語を使用したGoogleのオープンソースUIフレームワークで、独自のSkiaレンダリングエンジン（バージョン4.xではImpeller）を備えています。ネイティブプラットフォームコンポーネントを使用するフレームワークとは異なり、Flutterはすべてのピクセルを自身でレンダリングし、インターフェースを完全に制御できます。このアプローチによりプラットフォーム間の差異はなくなりますが、アプリのサイズが5～15MB増加します。

// Flutter — シンプルなカウンター
import 'package:flutter/material.dart';

void main() { runApp(const CounterApp()); }

class CounterApp extends StatelessWidget {
  const CounterApp({super.key});

  Widget build(BuildContext context) {
    return const MaterialApp(home: CounterScreen());
  }
}

class CounterScreen extends StatefulWidget {
  /* ... */
}

class _CounterScreenState extends State<CounterScreen> {
  int _count = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('クロスプラットフォームカウンター')),
      body: Center(
        child: Column(
          children: [
            const Text('ボタンを押した回数：'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Flutterの中核はウィジェットアーキテクチャです。パディングや配置からレイアウトの制約まで、すべてがウィジェットです。Reactから継承されたこの宣言型モデルにより、UIは予測可能になります。DartのAOTコンパイルのおかげで、Flutterアプリは2秒未満で起動し、ミッドレンジのデバイスでも60FPSを維持します。新しいレンダリングエンジンであるImpellerは、Skiaの主要な問題であったシェーダーコンパイル時のジッターを解消しました。

React Native：JavaScriptブリッジとエコシステム

React Nativeは、JavaScript/TypeScriptとReactを使用してモバイルアプリを作成するためのMetaのクロスプラットフォームフレームワークです。Flutterとは異なり、React NativeはJavaScriptブリッジを介してプラットフォームのネイティブUIコンポーネント（iOSではUIView、AndroidではView）を使用します。ビジネスロジックはJavaScriptエンジン（HermesまたはJSC）で実行され、ネイティブモジュールと非同期に相互作用します。

// React Native — プラットフォームコードを含むコンポーネント
import React, { useState } from 'react';
import {
  View, Text, TouchableOpacity, Platform
} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  const greeting = Platform.select({
    ios: 'iOSからの挨拶',
    android: 'Androidからの挨拶',
    default: 'こんにちは',
  });

  return (
    <View>
      <Text>{greeting}</Text>
      <Text>{count}</Text>
      <TouchableOpacity
        onPress={() => setCount(c => c + 1)}>
        <Text>+1</Text>
      </TouchableOpacity>
    </View>
  );
};

React Nativeの最大の利点はそのエコシステムです。npmには200万以上のパッケージがあり、React Navigation、Expo、Reanimatedなどのライブラリは、ナビゲーション、ジェスチャー、アニメーションのための既製のソリューションを提供します。マネージドワークフローのExpoは、OTAアップデートと50以上の組み込みネイティブモジュールを備えたビルドと公開を簡素化します。Instagram、Shopify、DiscordはReact Nativeで動作し、月間アクティブユーザーは合計5億人を超えています。

Kotlin Multiplatform：ネイティブUIと共有ロジック

Kotlin Multiplatform（KMP）は、共有Kotlinコードをプラットフォーム固有のバイナリにコンパイルするJetBrainsのテクノロジーです。FlutterやReact Nativeとは異なり、KMPはUIフレームワークを提供しません。その目的は、インターフェースを完全にネイティブに保ちながら、ビジネスロジック、データ層、ネットワークリクエスト、検証を再利用することです。Netflix、McDonald's、VMwareは本番環境でKMPを使用しています。

// Kotlin Multiplatform — commonMainの共有リポジトリ
class UserRepository(
    private val api: KtorClient,
    private val db: Database
) {
    suspend fun getUsers(): Result<List<User>> {
        return try {
            val users = api.fetch<List<UserDto>>("/users")
            db.save(users.map { it.toDomain() })
            Result.success(db.getAll())
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
}

// expect/actual — プラットフォーム向けの日付フォーマット
expect fun formatDate(timestamp: Long): String

KMPの主要なパターンはexpect/actualメカニズムです。共有モジュール（commonMain）でexpect関数またはクラスが宣言され、各プラットフォーム固有のソースセット（androidMain、iosMain）でactual実装が提供されます。これにより、共有コードで統一されたパブリックインターフェースを維持しながら、プラットフォームAPI（SharedPreferences、NSUserDefaults、カメラ、生体認証）を使用できます。KMPのUIレイヤーであるCompose Multiplatformは、2025年にAndroidとDesktopで安定版に達し、iOS版はまだベータテスト中です。

クロスプラットフォームフレームワークの比較

パフォーマンスはシナリオによって大きく異なります。Flutterの独自レンダリングは、アニメーションとトランジションに安定した60FPSを保証します。React Nativeのブリッジアーキテクチャはネイティブ呼び出しごとに2～5msのレイテンシを追加しますが、新しいJSI（JavaScript Interface）レイヤーはこのギャップを縮小します。KMPは共有コードが直接プラットフォームバイナリにコンパイルされるため、オーバーヘッドがゼロです。複雑なアニメーションを伴うUI集約型アプリの場合、選択肢はFlutterとネイティブ開発の間にあります。

適切なフレームワークの選び方

Flutter、React Native、KMPの選択はプロジェクトの優先順位によって決まります。ピクセルパーフェクトなUIと完全なアニメーション制御が必要な場合、Flutterは最も一貫したクロスプラットフォーム体験を提供します。チームがJavaScript/Reactを熟知しており、最大のサードパーティライブラリエコシステムを重視する場合、React Nativeが実用的な選択肢です。ネイティブアプリがすでに存在し、ビジネスロジックを共有する必要がある場合、KMPはUIを犠牲にすることなくモジュールごとに共有コードを導入できます。

MVPやスタートアップの場合、FlutterまたはReact Nativeは80～100%の共有コードで市場への最短ルートを提供します。既存のネイティブベースを持つエンタープライズアプリケーションの場合、KMPは段階的なモジュール移行を可能にします。カスタムレンダリングを行うゲームやメディアアプリケーションは、Flutterまたは完全なネイティブアプローチの恩恵を受けます。各フレームワークはその成熟度を証明しています。Instagram（React Native）、Google Pay（Flutter）、Netflix（KMP）はクロスプラットフォーム技術で動作しています。

トレンド：Flutterは統一コードベースでデスクトップとWebに拡大しています。新しいアーキテクチャ（Fabric + TurboModules）を備えたReact Nativeはブリッジを完全に排除します。Compose Multiplatformを備えたKMPは、ネイティブパフォーマンスを維持しながら統一UIレイヤーを目指しています。2027年までに、クロスプラットフォーム開発とネイティブ開発の境界は完全に曖昧になり、フレームワークはプラットフォームコンパイルパスに移行しています。