Next.js React Redux TypeScript Cursor Rules

Next.js、React、Redux Toolkit、TypeScript を使用した保守性と拡張性の高いアプリケーション構築のための包括的な開発ガイドライン。

開発哲学

• SOLID 原則に従った保守性と拡張性の高いコードを作成する
• 命令型スタイルより関数型・宣言型アプローチを優先する
• 型安全性と静的解析を重視する
• コンポーネント駆動型アーキテクチャを採用する

コードスタイル標準

• インデント: タブを使用
• 文字列: シングルクォートを使用（エスケープが必要な場合を除く）
• セミコロン: 曖昧さを排除する必要がない限り省略
• 演算子: 中置演算子の周りにスペースを配置
• 関数: 宣言の括弧の前にスペースを配置
• 等価性: == ではなく常に === を使用
• 行の長さ: 最大 80 文字
• 条件分岐: 複数行の if 文は中括弧を使用
• コレクション: 複数行の配列/オブジェクトに末尾のカンマを配置

命名規則

規則	用途
PascalCase	コンポーネント、型定義、インターフェース
kebab-case	ディレクトリ名とファイル名（例：user-profile.tsx）
camelCase	変数、関数、メソッド、フック、プロパティ、props
UPPERCASE	環境変数、定数、グローバル設定

プレフィックス

• イベントハンドラー: handle（例：handleClick）
• ブール値: 動詞（例：isLoading、hasError、canSubmit）
• カスタムフック: use（例：useAuth、useForm）

React ベストプラクティス

コンポーネント

• TypeScript インターフェースを使用した関数型コンポーネントを使用
• function キーワードでコンポーネントを定義
• 再利用可能なロジックをカスタムフックに抽出
• コンポジション パターンを適切に適用
• React.memo() を戦略的に活用
• useEffect フックでクリーンアップを実装

パフォーマンス

• 関数をメモ化するために useCallback を使用
• 計算量の多い処理には useMemo を適用
• JSX でのインライン関数定義を回避
• 動的インポートによるコード分割を実装
• リストで適切な key props を使用（インデックスは使用しない）

Next.js ベストプラクティス

コア

• ルーティングに App Router を使用
• メタデータ管理を実装
• 適切なキャッシング戦略を適用
• エラーバウンダリを実装

コンポーネント

• 組み込みコンポーネントを使用：Image、Link、Script、Head
• ローディング状態を実装
• 適切なデータフェッチング方法を使用

サーバーコンポーネント

• Server Components をデフォルトとして使用
• サーバー状態には URL クエリパラメータを使用
• 必要な場合にのみ use client を適用：
  • イベントリスナー
  • ブラウザ API
  • 状態管理
  • クライアントライブラリ

TypeScript 実装

• strict モードを有効化
• props、state、Redux 構造に対して明確なインターフェースを定義
• undefined/null 安全性のために型ガードを使用
• 柔軟性のためにジェネリクスを適用
• ユーティリティ型（Partial、Pick、Omit）を活用
• type より interface をオブジェクトに対して優先
• 動的な型変動にはマップ型を使用

UI とスタイリング

ライブラリ

• Shadcn UI: 一貫性と アクセシビリティのあるコンポーネント
• Radix UI: カスタマイズ可能なプリミティブ
• コンポジション パターン: モジュール性

スタイリング

• Tailwind CSS ユーティリティファースト アプローチ
• モバイルファースト レスポンシブ デザイン
• CSS 変数または Tailwind のダークモード経由のダークモード
• アクセシブルなカラーコントラスト比
• 一貫したスペーシング値
• テーマカラーに対する CSS 変数

状態管理

ローカル状態

• コンポーネントレベルの状態には useState
• 複雑な状態には useReducer
• 共有状態には useContext

グローバル状態（Redux Toolkit）

• 結合された state/reducers/actions に createSlice を使用
• 正規化された状態構造
• アクセス カプセル化のためにセレクターを使用
• フィーチャーごとに関心を分離（モノリシックなスライスを回避）

エラーハンドリングとバリデーション

フォーム

• スキーマ バリデーションに Zod を使用
• React Hook Form との統合
• 明確なエラー メッセージング

エラーバウンダリ

• React ツリーのエラーをキャッチし適切に処理
• 外部サービス（例：Sentry）にエラーをログ
• ユーザーフレンドリーなフォールバック UI を表示

テスト

ユニットテスト

• Jest と React Testing Library
• Arrange-Act-Assert パターン
• 外部の依存関係と API 呼び出しをモック

統合テスト

• ユーザーワークフローに焦点を当てる
• 適切なテスト環境のセットアップ/ティアダウン
• 選別されたスナップショット テスト
• テスト ユーティリティを使用（RTL で screen）

アクセシビリティ（a11y）

• セマンティック HTML
• 正確な ARIA 属性
• 完全なキーボード ナビゲーション
• 適切なフォーカス管理
• アクセシブルなカラーコントラスト
• 論理的な見出しの階層
• アクセシブルなインタラクティブ要素
• 明確なエラー フィードバック

セキュリティ

• XSS 防止のための入力サニタイゼーション
• HTML サニタイゼーションに DOMPurify を使用
• 適切な認証方法

国際化（i18n）

• 翻訳に next-i18next を使用
• ロケール検出
• 数値と日付フォーマット
• RTL サポート
• 通貨フォーマット

ドキュメンテーション

• すべてのパブリック関数、クラス、メソッド、インターフェースに JSDoc を記述
• 適切な句読点を含む完全な文
• 明確で簡潔な説明
• 適切な markdown、コードブロック、リンク、見出し、リスト
• 必要に応じて例を記載