Flutter vs React Native パフォーマンス比較 2026：ベンチマークと面接対策

// Impeller以前：シェーダーウォームアップが必要だった
void warmUpShaders() async {
  // オフスクリーンでアニメーションを手動トリガーしてシェーダーをコンパイル
  await precacheImage(AssetImage('heavy_animation.png'), context);
}

// Impeller以降：シェーダーはAOTコンパイルされるため、このコードは不要
// シェーダーウォームアップロジックはコードベースから削除可能

// TurboModule：初回呼び出し時にのみロード
import { TurboModuleRegistry } from 'react-native';

interface CameraSpec extends TurboModule {
  takePicture(): Promise<string>;
}

// モジュールは最初のアクセス時に初期化、アプリ起動時ではない
export const CameraModule = TurboModuleRegistry.getEnforcing<CameraSpec>('Camera');

// 従来のネイティブモジュール：起動時にすべてのモジュールが初期化
// import { NativeModules } from 'react-native';
// const { Camera } = NativeModules; // アプリ起動を遅くしていた

ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CachedNetworkImage(
        imageUrl: items[index].imageUrl,
        width: 56,
        height: 56,
      ),
      title: Text(items[index].title),
      subtitle: Text(items[index].description),
      trailing: IconButton(
        icon: Icon(Icons.favorite),
        onPressed: () => toggleFavorite(index),
      ),
    );
  },
)

// React Native FlashList実装
import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  estimatedItemSize={72}
  renderItem={({ item }) => (
    <View style={styles.listItem}>
      <FastImage
        source={{ uri: item.imageUrl }}
        style={styles.image}
      />
      <View style={styles.content}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.description}>{item.description}</Text>
      </View>
      <TouchableOpacity onPress={() => toggleFavorite(item.id)}>
        <Icon name="heart" size={24} />
      </TouchableOpacity>
    </View>
  )}
/>

// Flutter複合アニメーション
class ComplexAnimation extends StatefulWidget {
  @override
  State<ComplexAnimation> createState() => _ComplexAnimationState();
}

class _ComplexAnimationState extends State<ComplexAnimation>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _rotation;
  late Animation<double> _scale;
  late Animation<Offset> _position;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    
    _rotation = Tween<double>(begin: 0, end: 2 * pi).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOutCubic),
    );
    _scale = Tween<double>(begin: 0.5, end: 1.5).animate(
      CurvedAnimation(parent: _controller, curve: Curves.elasticOut),
    );
    _position = Tween<Offset>(
      begin: Offset.zero,
      end: const Offset(100, 50),
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Transform.translate(
          offset: _position.value,
          child: Transform.scale(
            scale: _scale.value,
            child: Transform.rotate(
              angle: _rotation.value,
              child: child,
            ),
          ),
        );
      },
      child: Container(width: 100, height: 100, color: Colors.blue),
    );
  }
}

// React Native Reanimated 4実装
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withSequence,
  withTiming,
  Easing,
} from 'react-native-reanimated';

function ComplexAnimation() {
  const rotation = useSharedValue(0);
  const scale = useSharedValue(0.5);
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  useEffect(() => {
    rotation.value = withRepeat(
      withTiming(2 * Math.PI, { duration: 2000, easing: Easing.inOut(Easing.cubic) }),
      -1,
      true
    );
    scale.value = withRepeat(
      withTiming(1.5, { duration: 2000, easing: Easing.elastic(1) }),
      -1,
      true
    );
    translateX.value = withRepeat(
      withTiming(100, { duration: 2000, easing: Easing.inOut(Easing.ease) }),
      -1,
      true
    );
    translateY.value = withRepeat(
      withTiming(50, { duration: 2000, easing: Easing.inOut(Easing.ease) }),
      -1,
      true
    );
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
      { scale: scale.value },
      { rotate: `${rotation.value}rad` },
    ],
  }));

  return <Animated.View style={[styles.box, animatedStyle]} />;
}

// Flutterメモリプロファイリング
import 'dart:developer';

void profileMemory() {
  final timeline = Timeline.startSync('MemoryProfile');
  
  // DevToolsでメモリ使用量を追跡
  debugPrint('Dart heap: \${(ProcessInfo.currentRss / 1024 / 1024).toStringAsFixed(2)} MB');
  
  timeline.finish();
}

// React Nativeメモリプロファイリング
import { NativeModules } from 'react-native';

function profileMemory() {
  if (__DEV__) {
    const { JSMemory } = NativeModules;
    JSMemory?.getUsage().then((usage: number) => {
      console.log(`JS Heap: \${(usage / 1024 / 1024).toFixed(2)} MB`);
    });
  }
}