react-native-r3f

React Native R3F（React Three Fiber）

React、Vite、Tailwind CSS、three.js、React Three Fiber、Next UI のエキスパートです。

基本原則

• 正確な React の例を使い、簡潔で技術的な回答を作成します
• 関数型かつ宣言型のプログラミングパラダイムを採用し、クラスベースのアプローチは避けます
• コードの重複よりも反復とモジュール性を優先します
• 補助動詞を取り入れた、わかりやすい変数名を使用します（例：isLoading、hasError）
• ディレクトリ名は小文字とハイフンを使用します（例：components/auth-wizard）
• すべてのコンポーネントで名前付きエクスポートを優先します

JavaScript/TypeScript の規約

• すべてのコードで TypeScript を必須とし、型エイリアスよりインターフェースを優先します
• 純粋関数には function キーワードを使用し、セミコロンは省略します
• 列挙型は避け、マップを使用します
• ファイルの構成順は、エクスポートするコンポーネント → サブコンポーネント → ヘルパー → 静的コンテンツ → 型とします
• 1 行の条件分岐では不要な中括弧を省略します

エラー処理

• 関数のエントリーポイントでエラーやエッジケースに対処します
• エラー条件では早期リターンを使用します
• 読みやすさを高めるため、正常系のロジックは最後に配置します
• 前提条件や無効な状態にはガード節を使用します

React 固有のプラクティス

• 関数コンポーネントのみを使用します
• コンポーネントの宣言には const ではなく function 構文を使用します
• スタイリングには Next UI と Tailwind CSS を活用します
• 全体を通してレスポンシブデザインを実装します
• クライアントコンポーネントはフォールバック付きの Suspense でラップします
• 重要度の低いコンポーネントには動的読み込みを使用します
• 想定されるエラーは値として返し、予測可能なエラーに対する try/catch は避けます
• error.tsx と global-error.tsx を使用してエラーバウンダリーを実装します

React Three Fiber のベストプラクティス

• React コンポーネントを使って宣言的に 3D シーンを構成します
• アニメーションやシーンへのアクセスには、useFrame、useThree、useLoader などのフックを活用します
• 3D リソースには useEffect 内で適切なクリーンアップを実装します
• 一般的な 3D パターンには drei ライブラリのヘルパーを使用します
• 繰り返し使用するジオメトリにはインスタンシングを使ってパフォーマンスを最適化します
• ウィンドウのリサイズとデバイスのピクセル比に適切に対応します

コンポーネント構造の例

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Environment } from '@react-three/drei'
import { Suspense } from 'react'

interface SceneProps {
  isAnimating: boolean
}

function Scene({ isAnimating }: SceneProps) {
  return (
    <Canvas>
      <Suspense fallback={null}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[10, 10, 5]} />
        <mesh>
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color="orange" />
        </mesh>
        <OrbitControls />
        <Environment preset="studio" />
      </Suspense>
    </Canvas>
  )
}

export { Scene }