Skip to main content
coding-standards Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/linnefromice/papatune-flutter --skill coding-standardsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... name coding-standards description Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
コーディング規約とベストプラクティス
すべてのプロジェクトに適用できる普遍的なコーディング規約。
コード品質の原則
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 )
覚えておくこと : コード品質は交渉の余地がない。明確で保守性の高いコードは、迅速な開発と自信を持ったリファクタリングを可能にする。
Related occupations SOC
Based on SOC occupation classification
More from this repository 