mcpField
C
coupling

coupling

github.com/toss開発2.0k55 回インストール34 週間前に更新
リポジトリ

coupling について

フロントエンド開発者向けに、コードの結合度を下げるパターンを示すコーディングスキルです。コンポジション、単一責任のフック、Contextや重複コードの適切な使い方を扱います。

主な機能

  1. 01childrenによるコンポジションでProps Drillingを回避
  2. 02フックを責務ごとに分割
  3. 03結合点を特定してインターフェースを導入
  4. 04Contextが適切な場面を判断
  5. 05意図的なコード重複の条件を確認

活用シーン

  1. 01コンポーネント階層を通るpropsを削減
  2. 02状態を抱えすぎたフックを分割
  3. 03機能変更による影響範囲を抑制

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/toss/frontend-fundamentals --skill coupling

インストール後、Claude Code で/couplingを入力して読み込まれたか確認します。

README（原文）English

プロジェクトの README より

この README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。

결합도

코드 변경의 영향 범위를 최소화한다. 한 기능 변경이 다른 기능을 깨뜨리면 안 된다.

핵심 패턴

Props Drilling 제거 (조합 패턴)

❌ props가 계층을 통과:

function ItemEditModal({ items, onConfirm, onClose }) {
  return (
    <Modal onClose={onClose}>
      <ItemEditBody items={items} onConfirm={onConfirm} onClose={onClose} />
    </Modal>
  );
}
function ItemEditBody({ items, onConfirm, onClose }) {
  return (
    <>
      <Button onClick={onClose}>닫기</Button>
      <ItemEditList items={items} onConfirm={onConfirm} />
    </>
  );
}

✅ children으로 조합:

function ItemEditModal({ items, onConfirm, onClose }) {
  return (
    <Modal onClose={onClose}>
      <ItemEditBody onClose={onClose}>
        <ItemEditList items={items} onConfirm={onConfirm} />
      </ItemEditBody>
    </Modal>
  );
}
function ItemEditBody({ children, onClose }) {
  return <><Button onClick={onClose}>닫기</Button>{children}</>;
}
책임 분리

❌ 모든 것을 관리하는 Hook:

function usePageState() {
  const [query] = useQueryParams({
    cardId: NumberParam, dateFrom: DateParam, dateTo: DateParam, statusList: ArrayParam
  });
}

✅ 단일 책임 Hook:

function useCardIdQueryParam() {
  const [cardId, setCardId] = useQueryParam("cardId", NumberParam);
  return [cardId ?? undefined, setCardId] as const;
}

빠른 참조

코드 냄새개선 방법
3개 이상 계층 통과하는 props조합 패턴: children 사용
5개 이상 반환하는 Hook단일 책임 Hook으로 분리
A 수정 시 관련 없는 B 깨짐결합 지점 식별 후 인터페이스 도입
모든 곳에서 import하는 util사용처 가까이로 이동

Context가 적절한 경우

진정한 전역 관심사만: 테마, 로케일, 인증 상태, 10개 이상 컴포넌트가 필요한 데이터.

조합 패턴을 피하려고 Context 남용하지 말 것.

예외: 중복이 나은 경우

  • 페이지마다 동작이 달라질 여지가 있을 때
  • 공통 코드 수정 시 모든 의존 코드 테스트 부담이 클 때

참고: https://frontend-fundamentals.com/code-quality/loosely-coupled/

コメント

Markdown 対応