Skip to main content
coding-standards 命名、可読性、不変性、コード品質レビューのための、プロジェクト横断で共通のベースラインとなるコーディング規約です。フレームワーク固有のパターンには、詳細なフロントエンド／バックエンド向けスキルを使用してください。
Zur Installation springen Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/linnefromice/claude-code-workspace --skill coding-standardsDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
name coding-standards description 命名、可読性、不変性、コード品質レビューのための、プロジェクト横断で共通のベースラインとなるコーディング規約です。フレームワーク固有のパターンには、詳細なフロントエンド／バックエンド向けスキルを使用してください。 origin ECC
コーディング規約とベストプラクティス
プロジェクト横断で適用できるベースラインのコーディング規約です。
このスキルは共通の最低ラインであり、フレームワーク固有の詳細なプレイブックではありません。
React、状態管理、フォーム、レンダリング、UI アーキテクチャについては frontend-patterns を使用してください。
リポジトリ／サービス層、エンドポイント設計、バリデーション、サーバー固有の関心事には backend-patterns または api-design を使用してください。
スキルによる詳細な解説ではなく、最小限で再利用可能なルール層だけが必要な場合は rules/common/coding-style.md を使用してください。
起動条件
新規プロジェクトやモジュールの開始
コード品質と保守性のレビュー
規約に従うための既存コードのリファクタリング
命名、フォーマット、構造の一貫性の強制
リンティング、フォーマット、型チェックルールのセットアップ
コーディング規約への新規コントリビューターのオンボーディング
スコープの境界
このスキルを起動する対象:
説明的な命名
不変性のデフォルト
可読性、KISS、DRY、YAGNI の徹底
エラーハンドリング上の期待値とコードスメルのレビュー
次のケースでは、このスキルを主要な情報源として使用しないでください:
React のコンポジション、Hooks、レンダリングパターン
バックエンドアーキテクチャ、API 設計、データベース層の設計
より限定的な ECC スキルが既に存在する、ドメイン固有のフレームワーク指針
コード品質の原則
1. 可読性優先
コードは書くより読む回数の方が多い
明確な変数名と関数名
コメントよりも自己文書化コードを優先
一貫したフォーマット
2. KISS（Keep It Simple, Stupid）
動く最もシンプルな解決策
過剰なエンジニアリングを避ける
早すぎる最適化をしない
理解しやすい > 賢いコード
3. DRY（Don't Repeat Yourself）
共通ロジックを関数に抽出
再利用可能なコンポーネントを作成
モジュール間でユーティリティを共有
コピペプログラミングを避ける
4. YAGNI（You Aren't Gonna Need It）
必要になる前に機能を作らない
投機的な一般化を避ける
必要な時だけ複雑さを追加
シンプルに始めて、必要に応じてリファクタ
TypeScript/JavaScript規約
変数命名
const marketSearchQuery = 'election'
const isUserAuthenticated = true
const totalRevenue = 1000
const q = 'election'
const flag = true
const x = 1000
関数命名
async function fetchMarketData (marketId : string function calculateSimilarity (a : number [], b : number []function isValidEmail (email : string boolean { }
async function market (id : string function similarity (a, b ) { }
function email (e ) { }
イミュータビリティパターン（重要）
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' )
}
}
async function fetchData (url ) {
const response = await fetch (url)
return response.json ()
}
Async/Awaitベストプラクティス
const [users, markets, stats] = await Promise .all ([
fetchUsers (),
fetchMarkets (),
fetchStats ()
])
const users = await fetchUsers ()
const markets = await fetchMarkets ()
const stats = await fetchStats ()
型安全性
interface Market {
id : string
name : string
status : 'active' | 'resolved' | 'closed'
created_at : Date
}
function getMarket (id : string Promise <Market > {
}
function getMarket (id : any Promise <any > {
}
Reactベストプラクティス
コンポーネント構造
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 btn- ${variant }`}
>
{children}
</button > export function Button (props ) {
return <button onClick ={props.onClick} > {props.children}</button >
カスタムフック
export function useDebounce<T>(value : T, delay : number ): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value)
useEffect (() => {
const handler = setTimeout (() => {
setDebouncedValue (value)
}, delay)
return () => clearTimeout (handler)
}, [value, delay])
return debouncedValue
}
const debouncedQuery = useDebounce (searchQuery, 500 )
状態管理
const [count, setCount] = useState (0 )
setCount (prev =>1 )
setCount (count + 1 )
条件付きレンダリング
{isLoading && <Spinner /> <ErrorMessage error ={error} /> <DataDisplay data ={data} /> <Spinner /> <ErrorMessage error ={error} /> <DataDisplay data ={data} /> null }
API設計規約
REST API慣例 GET /api/markets # 全マーケット一覧
GET /api/markets/:id # 特定マーケット取得
POST /api/markets # 新規マーケット作成
PUT /api/markets/:id # マーケット更新（全体）
PATCH /api/markets/:id # マーケット更新（部分）
DELETE /api/markets/:id # マーケット削除
# フィルタリング用クエリパラメータ
GET /api/markets?status=active&limit=10&offset=0
レスポンスフォーマット
interface ApiResponse <T> {
success : boolean
data ?: T
error ?: string
meta ?: {
total : number
page : number
limit : number
}
}
return NextResponse .json ({
success : true ,
data : markets,
meta : { total : 100 , page : 1 , limit : 10 }
})
return NextResponse .json ({
success : false ,
error : 'Invalid request'
}, { status : 400 })
入力バリデーション import { z } from 'zod'
const CreateMarketSchema = z.object ({
name : z.string ().min (1 ).max (200 ),
description : z.string ().min (1 ).max (2000 ),
endDate : z.string ().datetime (),
categories : z.array (z.string ()).min (1 )
})
export async function POST (request : Request const body = await request.json ()
try {
const validated = CreateMarketSchema .parse (body)
} catch (error) {
if (error instanceof z.ZodError ) {
return NextResponse .json ({
success : false ,
error : 'Validation failed' ,
details : error.errors
}, { status : 400 })
}
}
}
ファイル構成
プロジェクト構造 src/
├── app/ # Next.js App Router
│ ├── api/ # APIルート
│ ├── markets/ # マーケットページ
│ └── (auth)/ # 認証ページ（ルートグループ）
├── components/ # Reactコンポーネント
│ ├── ui/ # 汎用UIコンポーネント
│ ├── forms/ # フォームコンポーネント
│ └── layouts/ # レイアウトコンポーネント
├── hooks/ # カスタムReactフック
├── lib/ # ユーティリティと設定
│ ├── api/ # APIクライアント
│ ├── utils/ # ヘルパー関数
│ └── constants/ # 定数
├── types/ # TypeScript型
└── styles/ # グローバルスタイル
ファイル命名 components/Button.tsx # コンポーネントはPascalCase
hooks/useAuth.ts # フックはcamelCaseと'use'プレフィックス
lib/formatDate.ts # ユーティリティはcamelCase
types/market.types.ts # camelCaseと.typesサフィックス
コメントとドキュメント
コメントすべき時
const delay = Math .min (1000 * Math .pow (2 , retryCount), 30000 )
items.push (newItem)
count++
name = user.name
パブリックAPI用JSDoc
export async function searchMarkets (
query : string ,
limit : number = 10
): Promise <Market []> {
}
パフォーマンスベストプラクティス
メモ化 import { useMemo, useCallback } from 'react'
const sortedMarkets = useMemo (() => {
return markets.sort ((a, b ) => b.volume - a.volume )
}, [markets])
const handleSearch = useCallback ((query : string {
setSearchQuery (query)
}, [])
遅延読み込み import { lazy, Suspense } from 'react'
const HeavyChart = lazy (() => import ('./HeavyChart' ))
export function Dashboard (return (
<Suspense fallback ={ <Spinner /> }>
<HeavyChart />
</Suspense >
データベースクエリ
const { data } = await supabase
.from ('markets' )
.select ('id, name, status' )
.limit (10 )
const { data } = await supabase
.from ('markets' )
.select ('*' )
テスト規約
テスト構造（AAAパターン） test ('calculates similarity correctly' , () => {
const vector1 = [1 , 0 , 0 ]
const vector2 = [0 , 1 , 0 ]
const similarity = calculateCosineSimilarity (vector1, vector2)
expect (similarity).toBe (0 )
})
テスト命名
test ('returns empty array when no markets match query' , () => { })
test ('throws error when OpenAI API key is missing' , () => { })
test ('falls back to substring search when Redis unavailable' , () => { })
test ('works' , () => { })
test ('test search' , () => { })
コードスメル検出
1. 長い関数
function processMarketData (function processMarketData (const validated = validateData ()
const transformed = transformData (validated)
return saveData (transformed)
}
2. 深いネスト
if (user) {
if (user.isAdmin ) {
if (market) {
if (market.isActive ) {
if (hasPermission) {
}
}
}
}
}
if (!user) return
if (!user.isAdmin ) return
if (!market) return
if (!market.isActive ) return
if (!hasPermission) return
3. マジックナンバー
if (retryCount > 3 ) { }
setTimeout (callback, 500 )
const MAX_RETRIES = 3
const DEBOUNCE_DELAY_MS = 500
if (retryCount > MAX_RETRIES ) { }
setTimeout (callback, DEBOUNCE_DELAY_MS )
覚えておくこと : コード品質は交渉の余地がない。明確で保守性の高いコードは、迅速な開発と自信を持ったリファクタリングを可能にする。
Mehr aus diesem Repository 