このガイドは、React、Vite、Tailwind CSS、Three.js、React Three Fiber、Next UIを使って効率的に開発するためのものです。主な要点とベストプラクティスを紹介します：
- コーディングスタイル
- 正確な情報を提供する、簡潔で技術的なコードを使用する 反応 典型例
- 関数型、宣言型プログラミングを使用し、クラスの使用を避ける。
- 重複コードよりも反復とモジュール化の使用を優先する。
- 補助動詞を含む説明的な変数名を使用する（例：isLoading）
- ディレクトリ名には小文字とダッシュを使用（例：components/auth-wizard）
- コンポーネントは名前付き輸出が望ましい
- JavaScript/タイプスクリプト
- 純粋関数は "function "キーワードを使い、セミコロンを省略する。
- すべてのコードにTypeScriptを使用し、型よりもインターフェースを優先し、列挙型を避け、マッピングを使用する。
- ファイル構造：エクスポートされたコンポーネント、サブコンポーネント、ヘルパー関数、静的コンテンツ、タイプ
- 条件文では不要な中括弧を使用しない。
- 簡潔な一行構文を使った簡単な条件文の表現
- エラー処理と検証
- 関数開始時のエラーとエッジケースの処理
- エラー状態の処理にはアーリーリターンを使用し、深くネストしたif文は避ける。
- 読みやすさを向上させるために、通常の実行パスを関数の最後に配置する。
- 不必要なelse文は避け、if-returnパターンを使う。
- ガード節を使用して、前提条件や無効な状態を前もって処理する。
- 適切なエラーログとユーザーフレンドリーなエラーメッセージの実装
- 一貫したエラー処理のために、カスタムエラータイプまたはエラーファクトリの使用を検討する。
- リアクト開発
- ファンクション・コンポーネントとインターフェースの使用
- 宣言的JSXの使用
- コンポーネントは、constの代わりにfunctionキーワードを使用する。
- Next UIとTailwind CSSによるコンポーネント開発とスタイリング
- レスポンシブデザインの導入
- 静的コンテンツとインターフェイスをファイルの最後に置く
- コンテンツ変数を使用して、レンダー関数の外に静的コンテンツを保存する。
- クライアント側コンポーネントをサスペンスでラッピングすることで、フォールバックを提供します。
- 非重要部品には動的負荷を使用する
- 画像の最適化：WebPフォーマットの使用、サイズデータの指定、遅延読み込み
- 予想されるエラーを戻り値としてモデル化することで、サーバー操作でのtry/catchの使用を避けることができる。
- useActionStateを使ってエラーを管理し、クライアントに返す。
- エラー境界を使用して予期しないエラーを処理し、error.tsxとglobal-error.tsxファイルを実装する。
- useActionStateとreact-hook-formを併用したフォーム検証
- tanStackQueryは常にユーザーフレンドリーなエラーを投げ、それをキャッチしてユーザーに表示します。
three.js
React、Vite、Tailwind CSS、three.js、React three fiber、Next UIのエキスパート。
主要原則
- 正確なReactの例を用いて、簡潔で技術的な回答を書く。
- 関数型、宣言型プログラミングを使う。 クラスを避ける。
- 重複よりも反復とモジュール化を優先する。
- 説明的な変数名を補助動詞（isLoadingなど）とともに使用する。
- ディレクトリ（components/auth-wizardなど）にはダッシュ付きの小文字を使用する。
- コンポーネントの名前付き輸出を支持する。
- オブジェクトを受け取り、オブジェクトを返す（RORO）パターンを使用する。
ジャバスクリプト
- 純粋な関数には "function "キーワードを使用し、セミコロンは省略する。
- すべてのコードにTypeScriptを使う。 型よりもインターフェイスを優先する。 列挙型を避け、マップを使う。
- ファイル構造：エクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、タイプ。
- 条件文の不要な中括弧は避ける。
- 条件文の1行文では、中括弧を省略する。
- 単純な条件文には簡潔な1行構文を使う（例：if (condition) doSomething()）。
エラー処理と検証
- エラー処理とエッジケースを優先する。
- 関数の先頭でエラーやエッジケースを処理する。
- if文が深く入れ子になるのを避けるため、エラー条件にはアーリーリターンを使う。
- 読みやすくするために、ハッピーパスを関数の最後に配置する。
- 不必要なelse文は避け、代わりにif-returnパターンを使う。
- ガード句を使用して、前提条件や無効な状態を早期に処理する。
- 適切なエラーログとユーザーフレンドリーなエラーメッセージを実装する。
- 一貫したエラー処理を行うために、カスタムエラータイプまたはエラーファクトリを使用することを検討してください。
反応
- 機能コンポーネントとインターフェースを使用する。
- 宣言的JSXを使用する。
- コンポーネントには const ではなく function を使用する。
- コンポーネントとスタイリングには、Next UIとTailwind CSSを使用します。
- Tailwind CSSでレスポンシブデザインを実装。
- レスポンシブデザインの導入
- 静的コンテンツとインターフェイスをファイル末尾に配置する。
- レンダー関数の外で静的コンテンツにコンテンツ変数を使用する。
- サスペンスでクライアントコンポーネントをフォールバックでラップする。
- 非重要部品には動的負荷を使用する。
- 画像の最適化：WebPフォーマット、サイズデータ、遅延読み込み。
- 期待されるエラーを戻り値としてモデル化する： サーバー・アクションで期待されるエラーに対してtry/catchを使用することは避けてください。 useActionStateを使用して、これらのエラーを管理し、クライアントに返します。クライアントに返します。
- 予期しないエラーにエラー境界を使用する：予期しないエラーを処理し、フォールバックUIを提供するために、error.tsxとglobal-error.tsxファイルを使用してエラー境界を実装する。フォールバックUIを提供する。
- フォームバリデーションには、react-hook-formでuseActionStateを使用します。
- tanStackQueryがキャッチしてユーザーに表示できる、ユーザーフレンドリーなエラーを常に投げる。
