code-refactoring
このスキルは、コードレビュー後、新機能追加前、バグ修正後、パフォーマンス最適化時、セキュリティ改善時など、コードのリファクタリングに使用され、コード品質と保守性を向上させます。
npx skills add supercent-io/skills-template --skill code-refactoringBefore / After 効果比較
1 组長年蓄積されたバックエンドコードには、大量の冗長性、複雑なロジック、および「コードの臭い」が存在し、新機能の開発が非常に困難になり、バグ修正に時間がかかり、チームメンバーが既存のコードを理解し維持することが困難で、プロジェクトの進行を著しく遅らせていました。
継続的なコードリファクタリング後、複雑なロジックの簡素化に成功し、コードの冗長性を排除し、コードの可読性とモジュール化の度合いを向上させました。現在、チームはより迅速かつ自信を持って新機能を追加し、バグを修正できるようになり、開発効率が大幅に向上しました。
code-refactoring
Code Refactoring When to use this skill Code review: Discovering complex or duplicated code Before adding new features: Cleaning up existing code After bug fixes: Removing root causes Resolving technical debt: Regular refactoring Instructions Step 1: Extract Method Before (long function): function processOrder(order: Order) { // Validation if (!order.items || order.items.length === 0) { throw new Error('Order must have items'); } if (!order.customerId) { throw new Error('Order must have customer'); } // Price calculation let total = 0; for (const item of order.items) { total += item.price * item.quantity; } const tax = total * 0.1; const shipping = total > 100 ? 0 : 10; const finalTotal = total + tax + shipping; // Inventory check for (const item of order.items) { const product = await db.product.findUnique({ where: { id: item.productId } }); if (product.stock < item.quantity) { throw new Error(Insufficient stock for ${product.name}); } } // Create order const newOrder = await db.order.create({ data: { customerId: order.customerId, items: order.items, total: finalTotal, status: 'pending' } }); return newOrder; } After (method extraction): async function processOrder(order: Order) { validateOrder(order); const total = calculateTotal(order); await checkInventory(order); return await createOrder(order, total); } function validateOrder(order: Order) { if (!order.items || order.items.length === 0) { throw new Error('Order must have items'); } if (!order.customerId) { throw new Error('Order must have customer'); } } function calculateTotal(order: Order): number { const subtotal = order.items.reduce((sum, item) => sum + item.price * item.quantity, 0); const tax = subtotal * 0.1; const shipping = subtotal > 100 ? 0 : 10; return subtotal + tax + shipping; } async function checkInventory(order: Order) { for (const item of order.items) { const product = await db.product.findUnique({ where: { id: item.productId } }); if (product.stock < item.quantity) { throw new Error(Insufficient stock for ${product.name}); } } } async function createOrder(order: Order, total: number) { return await db.order.create({ data: { customerId: order.customerId, items: order.items, total, status: 'pending' } }); } Step 2: Remove Duplication Before (duplication): async function getActiveUsers() { return await db.user.findMany({ where: { status: 'active', deletedAt: null }, select: { id: true, name: true, email: true } }); } async function getActivePremiumUsers() { return await db.user.findMany({ where: { status: 'active', deletedAt: null, plan: 'premium' }, select: { id: true, name: true, email: true } }); } After (extract common logic): type UserFilter = { plan?: string; }; async function getActiveUsers(filter: UserFilter = {}) { return await db.user.findMany({ where: { status: 'active', deletedAt: null, ...filter }, select: { id: true, name: true, email: true } }); } // Usage const allActiveUsers = await getActiveUsers(); const premiumUsers = await getActiveUsers({ plan: 'premium' }); Step 3: Replace Conditional with Polymorphism Before (long if-else): class PaymentProcessor { process(payment: Payment) { if (payment.method === 'credit_card') { // Credit card processing const cardToken = this.tokenizeCard(payment.card); const charge = this.chargeCreditCard(cardToken, payment.amount); return charge; } else if (payment.method === 'paypal') { // PayPal processing const paypalOrder = this.createPayPalOrder(payment.amount); const approval = this.getPayPalApproval(paypalOrder); return approval; } else if (payment.method === 'bank_transfer') { // Bank transfer processing const transfer = this.initiateBankTransfer(payment.account, payment.amount); return transfer; } } } After (polymorphism): interface PaymentMethod { process(payment: Payment): Promise; } class CreditCardPayment implements PaymentMethod { async process(payment: Payment): Promise { const cardToken = await this.tokenizeCard(payment.card); return await this.chargeCreditCard(cardToken, payment.amount); } } class PayPalPayment implements PaymentMethod { async process(payment: Payment): Promise { const order = await this.createPayPalOrder(payment.amount); return await this.getPayPalApproval(order); } } class BankTransferPayment implements PaymentMethod { async process(payment: Payment): Promise { return await this.initiateBankTransfer(payment.account, payment.amount); } } class PaymentProcessor { private methods: Map<string, PaymentMethod> = new Map([ ['credit_card', new CreditCardPayment()], ['paypal', new PayPalPayment()], ['bank_transfer', new BankTransferPayment()] ]); async process(payment: Payment): Promise { const method = this.methods.get(payment.method); if (!method) { throw new Error(Unknown payment method: ${payment.method}); } return await method.process(payment); } } Step 4: Introduce Parameter Object Before (many parameters): function createUser( name: string, email: string, password: string, age: number, country: string, city: string, postalCode: string, phoneNumber: string ) { // ... } After (grouped into object): interface UserProfile { name: string; email: string; password: string; age: number; } interface Address { country: string; city: string; postalCode: string; } interface CreateUserParams { profile: UserProfile; address: Address; phoneNumber: string; } function createUser(params: CreateUserParams) { const { profile, address, phoneNumber } = params; // ... } // Usage createUser({ profile: { name: 'John', email: 'john@example.com', password: 'xxx', age: 30 }, address: { country: 'US', city: 'NYC', postalCode: '10001' }, phoneNumber: '+1234567890' }); Step 5: Apply SOLID Principles Single Responsibility: // ❌ Bad example: multiple responsibilities class User { constructor(public name: string, public email: string) {} save() { // Save to DB } sendEmail(subject: string, body: string) { // Send email } generateReport() { // Generate report } } // ✅ Good example: separated responsibilities class User { constructor(public name: string, public email: string) {} } class UserRepository { save(user: User) { // Save to DB } } class EmailService { send(to: string, subject: string, body: string) { // Send email } } class UserReportGenerator { generate(user: User) { // Generate report } } Output format Refactoring Checklist - [ ] Function does one thing only (SRP) - [ ] Function name clearly describes what it does - [ ] Function is 20 lines or fewer (guideline) - [ ] 3 or fewer parameters - [ ] No duplicate code (DRY) - [ ] if nesting is 2 levels or fewer - [ ] No magic numbers (extract as constants) - [ ] Understandable without comments (self-documenting) Constraints Mandatory Rules (MUST) Test first: Write tests before refactoring Small steps: Change one thing at a time Behavior preservation: No functional changes Prohibited (MUST NOT) Multiple tasks simultaneously: No refactoring + feature addition at the same time Refactoring without tests: Risk of regression Best practices Boy Scout Rule: Leave code cleaner than you found it Refactoring timing: Red-Green-Refactor (TDD) Incremental improvement: Consistency over perfection Behavior preservation: Refactoring involves no functional changes Small commits: Commit in focused units Behavior Validation (Code Simplifier Integration) Step A: Understand Current Behavior Fully understand current behavior before refactoring: ## Behavior Analysis ### Inputs - [list of input parameters] - [types and constraints] ### Outputs - [return values] - [side effects] ### Invariants - [conditions that must always be true] - [edge cases] ### Dependencies - [external dependencies] - [state dependencies] Step B: Validate After Refactoring # 1. Run tests npm test -- --coverage # 2. Type check npx tsc --noEmit # 3. Lint check npm run lint # 4. Compare with previous behavior (snapshot tests) npm test -- --updateSnapshot Step C: Document Changes ## Refactoring Summary ### Changes Made 1. [Change 1]: [reason] 2. [Change 2]: [reason] ### Behavior Preserved - [x] Same input → same output - [x] Same side effects - [x] Same error handling ### Risks & Follow-ups - [potential risks] - [follow-up tasks] ### Test Status - [ ] Unit tests: passing - [ ] Integration tests: passing - [ ] E2E tests: passing Troubleshooting Issue: Tests fail after refactor Cause: Behavior change occurred Solution: Revert and isolate the change, then retry Issue: Code still complex Cause: Multiple responsibilities mixed in one function Solution: Extract into smaller units with clear boundaries Issue: Performance regression Cause: Inefficient abstraction introduced Solution: Profile and optimize the hot path Multi-Agent Workflow Validation & Retrospectives Round 1 (Orchestrator): Validate behavior preservation checklist Round 2 (Analyst): Complexity and duplication analysis Round 3 (Executor): Test or static analysis verification Agent Roles Agent Role Claude Refactoring plan, code transformation Gemini Large-scale codebase analysis, pattern detection Codex Test execution, build verification Workflow Example # 1. Gemini: Codebase analysis ask-gemini "@src/ extract list of high-complexity functions" # 2. Claude: Refactoring plan and execution # Work based on IMPLEMENTATION_PLAN.md # 3. Codex: Verification codex-cli shell "npm test && npm run lint" References Refactoring (Martin Fowler) Clean Code (Robert C. Martin) SOLID Principles Metadata Version Current Version: 1.0.0 Last Updated: 2025-01-01 Compatible Platforms: Claude, ChatGPT, Gemini Related Skills code-review backend-testing Tags #refactoring #code-quality #DRY #SOLID #design-patterns #clean-code Examples Example 1: Basic usage Example 2: Advanced usageWeekly Installs11.0KRepositorysupercent-io/sk…templateGitHub Stars53First SeenJan 24, 2026Security AuditsGen Agent Trust HubPassSocketFailSnykPassInstalled oncodex10.9Kgemini-cli10.8Kopencode10.8Kgithub-copilot10.8Kcursor10.8Kamp10.8K
ユーザーレビュー (0)
レビューを書く
レビューなし
統計データ
ユーザー評価
この Skill を評価