react-native-guidelines

React Native ガイドライン

googleadsagent.ai™ による Agent Skills™ の一部です。

説明

React Native ガイドラインは、7 つのセクション（パフォーマンス、レイアウト、アニメーション、画像、状態、アーキテクチャ、プラットフォーム）にわたる 16 のルールを体系化し、クロスプラットフォームのモバイル開発で最もよくある落とし穴を防ぎます。各ルールでは、React Native のブリッジアーキテクチャとネイティブレンダリングパイプラインに固有の問題を取り上げます。

React Native のパフォーマンス特性は、Web の React とは根本的に異なります。JavaScript スレッド、UI スレッド、ネイティブモジュールスレッドは非同期で通信するため、どのスレッドでもボトルネックが発生すると、ユーザーエクスペリエンスが低下します。このガイドラインでは、JS スレッドをブロックしないこと、アニメーションにネイティブドライバーを使用すること、FlatList のレンダリングを最適化すること、ブリッジの通過回数を最小限にすることに重点を置いています。

このルールは、iOS と Android の両方で動作する本番アプリケーション向けに調整されています。プラットフォーム固有の挙動、ジェスチャー処理の違い、ナビゲーションパターンについても、特殊なケースとして扱うのではなく、明示的に取り上げています。

使用する場面

• 新しい React Native の画面やコンポーネントを構築するとき
• iOS または Android のパフォーマンス問題をデバッグするとき
• クロスプラットフォームでの正しさを確認するために React Native のコードをレビューするとき
• アニメーションやジェスチャー操作を実装するとき
• 大規模なデータセット向けにリストのレンダリングを最適化するとき
• プラットフォーム固有の挙動の違いに対応するとき

仕組み

graph TD
    A[React Native Code] --> B{Section Analysis}
    B --> C[Performance: JS Thread Budget]
    B --> D[Layout: Flexbox + Safe Areas]
    B --> E[Animation: Native Driver]
    B --> F[Images: Caching + Sizing]
    B --> G[State: Minimal Re-renders]
    B --> H[Architecture: Navigation + Deep Links]
    B --> I[Platform: iOS/Android Specifics]
    C --> J[Optimized Output]
    D --> J
    E --> J
    F --> J
    G --> J
    H --> J
    I --> J

各セクションには、そのカテゴリで影響の大きい問題に焦点を当てた 2～3 個のルールが含まれています。ルールはコード生成中に適用され、レビュー時に指摘されます。

実装

パフォーマンス：FlatList を最適化する

// BAD: Re-creates renderItem on every render
<FlatList
  data={items}
  renderItem={({ item }) => <Card item={item} />}
/>

// GOOD: Stable renderItem + keyExtractor + windowing config
const renderItem = useCallback(
  ({ item }: { item: Item }) => <Card item={item} />,
  []
);

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  getItemLayout={(_, index) => ({
    length: CARD_HEIGHT,
    offset: CARD_HEIGHT * index,
    index,
  })}
  maxToRenderPerBatch={10}
  windowSize={5}
  removeClippedSubviews
/>

アニメーション：ネイティブドライバーを使用する

// BAD: JS-driven animation blocks the thread
Animated.timing(opacity, {
  toValue: 1,
  duration: 300,
  useNativeDriver: false,
}).start();

// GOOD: Native driver runs on UI thread
Animated.timing(opacity, {
  toValue: 1,
  duration: 300,
  useNativeDriver: true,
}).start();

// BEST: Reanimated for gesture-driven animations
const animatedStyle = useAnimatedStyle(() => ({
  transform: [{ translateX: withSpring(offset.value) }],
}));

プラットフォーム：セーフエリアに対応する

import { useSafeAreaInsets } from "react-native-safe-area-context";

function Screen({ children }: PropsWithChildren) {
  const insets = useSafeAreaInsets();
  return (
    <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>
      {children}
    </View>
  );
}

ベストプラクティス

• 最適化の前に Flipper または React DevTools でプロファイリングを行います。推測せず、測定してください
• 60fps のレンダリングを実現するため、JS スレッドを 1 フレームあたり 16ms 未満に保ちます
• すべての不透明度および変形アニメーションで useNativeDriver: true を使用します
• リスト項目でのインラインスタイルを避け、静的なスタイルには StyleSheet.create を使用します
• iOS と Android の両方で、セーフエリア、ノッチ、ジェスチャーナビゲーションに対応します
• シミュレーターだけでなく実機でもテストします。パフォーマンスには大きな違いがあります

プラットフォーム互換性

プラットフォーム	サポート	備考
Cursor	完全	React Native プロジェクトをサポート
VS Code	完全	React Native Tools 拡張機能
Windsurf	完全	モバイル開発をサポート
Claude Code	完全	コード生成とレビュー
Cline	完全	React Native に対応
aider	一部	モバイル関連のコンテキストに制限あり

関連スキル

• React ベストプラクティス
• コンポジションパターン
• Web デザインガイドライン
• CI/CD パイプライン

キーワード

react-native mobile performance flatlist native-driver animation safe-area cross-platform ios android

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT ライセンス