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 標準

• 純粋関数には function キーワードを使用；セミコロンは省略する
• すべてのコードで TypeScript は必須；型エイリアスより interface を優先する
• enums は避ける；代わりにマップを使用する
• ファイル構成：エクスポートされたコンポーネント → サブコンポーネント → ヘルパー → 静的コンテンツ → 型
• 単一行の条件式では不要な括弧を省略する

エラーハンドリング

• 関数エントリーポイントでエラーとエッジケースに対応する
• エラー条件には早期リターンを使用する
• ハッピーパスロジックを最後に配置して可読性を向上させる
• 事前条件と無効な状態にはガード句を使用する

React 固有のプラクティス

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

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

• React コンポーネントで宣言型の 3D シーン構成を使用する
• useFrame、useThree、useLoader などのフックを活用してアニメーションとシーンアクセスを実装する
• useEffect で 3D リソースの適切なクリーンアップを実装する
• 一般的な 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 }