modern-web-development

モダンな Web 開発

Brandon Fernandez による、TypeScript、Node.js、Next.js 14、React、Supabase、GraphQL、Tailwind CSS、Radix UI、Shadcn UI を用いたモダンな Web 開発のための包括的な cursor ルールです。

開発の主な原則

コードスタイルとアーキテクチャ

• 正確な TypeScript の例を用いて、簡潔で技術的な回答を記述します
• クラスベースのアプローチを避け、関数型かつ宣言型のプログラミングを採用します
• コードの重複より、反復とモジュール化を優先します
• 補助動詞を用いた、説明的な変数名を使用します（isLoading、hasError）
• RORO パターン（オブジェクトを受け取り、オブジェクトを返す）を実装します

JavaScript/TypeScript の標準

• 純粋関数には function キーワードを使用します
• セミコロンは省略します
• TypeScript のみを使用し、型よりインターフェースを優先します
• ファイルは次の順序で構成します：エクスポートするコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型
• 条件分岐で不要な波括弧を最小限にします

エラー処理

• 関数の入口でエラーやエッジケースに対処します
• 深いネストを避けるため、エラー条件では早期リターンを使用します
• 可読性を高めるため、成功パスを最後に配置します
• 前提条件の検証にはガード節を使用します
• ユーザーにわかりやすいエラーメッセージを実装します

React と Next.js のガイドライン

• TypeScript インターフェースを用いた関数コンポーネントを使用します
• function 宣言を用いて宣言型の JSX を記述します
• Shadcn UI、Radix、Tailwind CSS でスタイルを設定します
• モバイルファーストのレスポンシブデザインを実装します
• use client、useEffect、setState の使用を最小限に抑え、React Server Components を優先します
• フォームのバリデーションには Zod を使用します
• クライアントコンポーネントを Suspense で囲み、フォールバックを設定します
• 重要度の低いコンポーネントには動的読み込みを使用します
• 画像を最適化します（WebP 形式、サイズデータ、遅延読み込み）

データと状態管理

• データ取得には React Server Components を活用します
• ウォーターフォールを防ぐため、プリロードパターンを実装します
• リアルタイム同期と状態管理には Supabase を使用します
• チャット履歴、レート制限、セッションには Vercel KV の利用を検討します

Supabase と GraphQL

• データベースとのやり取りやサブスクリプションには Supabase クライアントを使用します
• Row Level Security（RLS）ポリシーを実装します
• Supabase Auth、Storage、Edge Functions を活用します
• 型安全な GraphQL API とのやり取りには Genql を使用します
• 必要なデータだけを取得するよう GraphQL クエリを最適化します

スタイリングとテスト

スタイリング

• Tailwind CSS のユーティリティファーストアプローチを適用します
• コンポーネントのバリアントには Class Variance Authority（CVA）を使用します

テスト

• ユーティリティとフックのユニットテストを実装します
• 複雑なコンポーネントのインテグレーションテストを作成します
• 重要なユーザーフローのエンドツーエンドテストを作成します

アクセシビリティとドキュメント

アクセシビリティ

• インターフェース全体でキーボード操作を可能にします
• 適切な ARIA ラベルとセマンティックロールを実装します
• WCAG に準拠した色のコントラスト比を維持します

ドキュメント

• IDE のインテリセンス向けに、わかりやすい JSDoc コメントを記述します
• Supabase のスキーマ、RLS ポリシー、Edge Functions を文書化します