three-js

Three.js 開発

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

主要な原則

• 正確な React の例を用いて、簡潔で技術的な回答を書きます
• 関数型で宣言的なプログラミングを使用し、クラスは避けます
• コードの重複よりも、反復とモジュール化を優先します
• 補助動詞を含む説明的な変数名を使用します（例：isLoading、hasRendered）
• ディレクトリ名には小文字とハイフンを使用します（例：components/auth-wizard）
• コンポーネントには名前付きエクスポートを優先します

JavaScript/TypeScript の標準

• 純粋関数にはfunctionキーワードを使用し、セミコロンは省略します
• すべてのコードに TypeScript を使用し、type より interface を優先します
• enum は避け、代わりにマップを使用します
• ファイル構成：エクスポートするコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型

エラー処理とバリデーション

• 関数の冒頭でエラーやエッジケースに対処します
• 深くネストした if 文を避けるため、エラー条件では早期リターンを使用します
• 可読性を高めるため、関数の最後に正常系の処理を配置します
• ガード節を使って、前提条件や無効な状態を早期に処理します
• 適切なエラーログと、ユーザーにわかりやすいエラーメッセージを実装します

React のベストプラクティス

コンポーネントのガイドライン

• 関数コンポーネントとインターフェースを使用します
• 宣言的な JSX を使用します
• コンポーネントには const ではなく function を使用します
• コンポーネントとスタイリングには Next UI と Tailwind CSS を使用します
• Tailwind CSS でレスポンシブデザインを実装します

パフォーマンスの最適化

• クライアントコンポーネントをフォールバック付きの Suspense でラップします
• 重要度の低いコンポーネントには動的ローディングを使用します
• 画像を最適化します：WebP 形式、データサイズの最適化、遅延読み込み

Three.js 固有のガイドライン

シーン管理

• ジオメトリ、マテリアル、テクスチャが不要になったら、適切に破棄します
• 頻繁に作成・破棄するオブジェクトにはオブジェクトプーリングを使用します
• 複雑なシーンには詳細度（LOD）を実装します

パフォーマンス

• ジオメトリの統合とインスタンシングによって、ドローコールを最小限に抑えます
• 適切なテクスチャサイズと形式を使用します
• 大規模なシーンにはフラスタムカリングを実装します
• レンダーループのプロファイリングと最適化を行います

React Three Fiber

• アニメーションには useFrame フックを使用します
• useThree を活用して Three.js コンテキストにアクセスします
• Three.js オブジェクトを直接操作するには ref を使用します
• useEffect フックで適切なクリーンアップを実装します
• 一般的な 3D パターンには drei ライブラリのヘルパーを使用します