これもおねがいします --- ## name: coding-standards description: TypeScript、JavaScript、React、およびNode.js開発のための、普遍的なコーディング規約、ベストプラクティス、およびパターン。 # コーディング規約とベストプラクティス (Coding Standards & Best Practices) すべてのプロジェクトに適用可能な、普遍的なコーディング規約。 ## コード品質の原則 (Code Quality Principles) ### 1. 可読性第一 (Readability First) * コードは書かれることよりも読まれることの方が多い * 明確な変数名と関数名を使用する * コメントよりも自己文書化された（コード自体が説明になっている）コードを好む * 一貫したフォーマット ### 2. KISS原則 (Keep It Simple, Stupid) * 動作する最も単純な解決策を選ぶ * オーバーエンジニアリングを避ける * 早すぎる最適化をしない * 賢いコード（Clever code）よりも理解しやすいコード ### 3. DRY原則 (Don't Repeat Yourself) * 共通のロジックを関数に抽出する * 再利用可能なコンポーネントを作成する * モジュール間でユーティリティを共有する * コピー＆ペーストプログラミングを避ける ### 4. YAGNI原則 (You Aren't Gonna Need It) * 必要になるまで機能を作らない * 推測に基づく汎用化を避ける * 必要な場合にのみ複雑さを加える * 単純に始め、必要に応じてリファクタリングする ## TypeScript\/JavaScript 基準 ### 変数の命名 ```typescript \/\/ ✅ GOOD: 説明的な名前 const marketSearchQuery = 'election' const isUserAuthenticated = true const totalRevenue = 1000 \/\/ ❌ BAD: 不明瞭な名前 const q = 'election' const flag = true const x = 1000 ``` ### 関数の命名 ```typescript \/\/ ✅ GOOD: 動詞-名詞のパターン async function fetchMarketData(marketId: string) { } function calculateSimilarity(a: number[], b: number[]) { } function isValidEmail(email: string): boolean { } \/\/ ❌ BAD: 不明瞭、または名詞のみ async function market(id: string) { } function similarity(a, b) { } function email(e) { } ``` ### 不変性パターン (重要) ```typescript \/\/ ✅ 常にスプレッド演算子を使用する const updatedUser = { ...user, name: 'New Name' } const updatedArray = [...items, newItem] \/\/ ❌ 決して直接変更（ミューテート）しない user.name = 'New Name' \/\/ BAD items.push(newItem) \/\/ BAD ``` ### エラーハンドリング ```typescript \/\/ ✅ GOOD: 包括的なエラーハンドリング async function fetchData(url: string) { try { const response = await fetch(url) if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`) } return await response.json() } catch (error) { console.error('Fetch failed:', error) throw new Error('Failed to fetch data') } } \/\/ ❌ BAD: エラーハンドリングなし async function fetchData(url) { const response = await fetch(url) return response.json() } ``` ### Async\/Await ベストプラクティス ```typescript \/\/ ✅ GOOD: 可能な場合は並列実行 const [users, markets, stats] = await Promise.all([ fetchUsers(), fetchMarkets(), fetchStats() ]) \/\/ ❌ BAD: 不必要な順次実行 const users = await fetchUsers() const markets = await fetchMarkets() const stats = await fetchStats() ``` ### 型安全性 (Type Safety) ```typescript \/\/ ✅ GOOD: 適切な型定義 interface Market { id: string name: string status: 'active' | 'resolved' | 'closed' created_at: Date } function getMarket(id: string): Promise { \/\/ 実装 } \/\/ ❌ BAD: 'any' の使用 function getMarket(id: any): Promise { \/\/ 実装 } ``` ## React ベストプラクティス ### コンポーネント構造 ```typescript \/\/ ✅ GOOD: 型付きの関数コンポーネント interface ButtonProps { children: React.ReactNode onClick: () => void disabled?: boolean variant?: 'primary' | 'secondary' } export function Button({ children, onClick, disabled = false, variant = 'primary' }: ButtonProps) { return (