Menu
コーディング標準とベストプラクティス。TypeScript、JavaScript、React、Node.js開発の品質基準に使用。
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
認証実装、ユーザー入力処理、シークレット管理、APIエンドポイント作成、決済機能等のセキュリティ関連作業時に使用。包括的なセキュリティチェックリストとパターンを提供。
アプリケーションアーキテクチャ設計。DDD、クリーンアーキテクチャ、マイクロサービス、イベント駆動設計時に使用。
フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。
指定されたコードまたはファイルに対して包括的なコードレビューを実施する。
バックエンド開発パターン。API設計、データベース最適化、認証、キャッシング、エラーハンドリングに使用。
フロントエンド開発パターン。React、Next.js、状態管理、パフォーマンス最適化、UIベストプラクティスに使用。
| name | coding-standards |
| description | コーディング標準とベストプラクティス。TypeScript、JavaScript、React、Node.js開発の品質基準に使用。 |
すべてのプロジェクトに適用可能な普遍的なコーディング標準。
| 原則 | 説明 |
|---|---|
| KISS | 動作する最もシンプルなソリューション |
| DRY | 共通ロジックを関数に抽出 |
| YAGNI | 必要になる前に機能を構築しない |
| 可読性第一 | コードは書くより読む回数が多い |
// ✅ 変数: 説明的な名前
const marketSearchQuery = 'election'
const isUserAuthenticated = true
// ✅ 関数: 動詞-名詞パターン
async function fetchMarketData(marketId: string) { }
function calculateSimilarity(a: number[], b: number[]) { }
function isValidEmail(email: string): boolean { }
// ✅ 常にスプレッド演算子を使用
const updatedUser = { ...user, name: 'New Name' }
const updatedArray = [...items, newItem]
// ❌ 絶対に直接ミューテートしない
user.name = 'New Name' // 悪い
items.push(newItem) // 悪い
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')
}
}
// ✅ 可能な場合は並列実行
const [users, markets, stats] = await Promise.all([
fetchUsers(),
fetchMarkets(),
fetchStats()
])
// ❌ 不要な順次実行は避ける
// ✅ 適切な型定義
interface Market {
id: string
name: string
status: 'active' | 'resolved' | 'closed'
}
// ❌ 'any'は禁止
interface ButtonProps {
children: React.ReactNode
onClick: () => void
disabled?: boolean
variant?: 'primary' | 'secondary'
}
export function Button({
children,
onClick,
disabled = false,
variant = 'primary'
}: ButtonProps) {
return (
<button onClick={onClick} disabled={disabled} className={`btn-${variant}`}>
{children}
</button>
)
}
// ✅ 前の状態に基づく場合は関数型更新
setCount(prev => prev + 1)
// ❌ 直接状態参照（古くなる可能性）
setCount(count + 1)
// ✅ 明確な条件付きレンダリング
{isLoading && <Spinner />}
{error && <ErrorMessage error={error} />}
{data && <DataDisplay data={data} />}
// ❌ 三項演算子の地獄は避ける
// ❌ 50行以上の関数
// ✅ 小さな関数に分割
function processMarketData() {
const validated = validateData()
const transformed = transformData(validated)
return saveData(transformed)
}
// ✅ 早期リターンを使用
if (!user) return
if (!user.isAdmin) return
if (!market) return
// 処理を続行
// ✅ 名前付き定数
const MAX_RETRIES = 3
const DEBOUNCE_DELAY_MS = 500
if (retryCount > MAX_RETRIES) { }
// ✅ 「何を」ではなく「なぜ」を説明
// 障害時にAPIを圧倒しないよう指数バックオフを使用
const delay = Math.min(1000 * Math.pow(2, retryCount), 30000)
// ❌ 明らかなことを述べない
// カウンターを1増やす
count++
references/typescript.md - TypeScript型システム詳細