cohesion について
フロントエンド開発者向けに、同時に変更されるコードをまとめる方法を示すスキルです。ドメイン別のファイル配置や定数の集約に加え、共有を避ける場面も説明します。
主な機能
- 01関連ファイルを機能ドメインごとに配置
- 02繰り返すマジックナンバーを共有定数に抽出
- 03型定義を使用箇所の近くに配置
- 04ファイル間の相対パスを短縮
- 05コード共有を避けるべき状況を判断
活用シーン
- 01複数ディレクトリに散らばった機能コードを整理
- 02複数箇所で使う数値定数を統一
- 03型と実装を近くに保つ
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/cohesionを入力して読み込まれたか確認します。
README（原文）English
プロジェクトの README よりこの README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。
응집도
함께 수정되는 코드는 함께 있어야 한다.
핵심 패턴
함께 수정되는 파일을 같은 디렉토리에 두기
❌ 종류별 분리 (의존 관계 파악 어려움):
src/
├── components/UserForm.tsx
├── hooks/useUserValidation.ts
├── types/userTypes.ts
└── api/userApi.ts
✅ 도메인별 배치:
src/
├── components/ # 전역 공유
└── domains/User/ # User 관련 코드 모음
├── UserForm.tsx
├── useUserValidation.ts
├── types.ts
└── api.ts
매직 넘버 제거
같은 숫자가 여러 곳에 있으면 한쪽만 수정되어 버그 발생.
❌ 분산:
// Pagination.tsx
const pages = Math.ceil(total / 20);
// useItems.ts
const offset = (page - 1) * 20;
✅ 상수로 통합:
export const PAGE_SIZE = 20;
import { PAGE_SIZE } from './constants';
빠른 참조
| 코드 냄새 | 개선 방법 |
|---|---|
| 같은 매직 넘버 3곳 이상 | 공유 상수로 추출 |
기능이 components/, hooks/, types/ 모두 수정 | domains/featureName/으로 배치 |
긴 상대 경로 ../../.. | 파일들을 가까이 배치 |
| 타입 정의가 사용처와 멀리 떨어짐 | 사용하는 코드와 함께 배치 |
예외: 중복이 나은 경우
- 두 기능이 다르게 발전할 가능성이 높을 때
- 공유 시 원치 않는 의존성이 생길 때
- 공유 코드가 5줄 미만으로 단순할 때
참고: https://frontend-fundamentals.com/code-quality/cohesive/
コメント
Markdown 対応