mcpField
P
predictability

predictability

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

predictability について

predictabilityは、予測しやすいコードを書くためのフロントエンド開発者向けスキルです。副作用を明示し、同種の関数で戻り値を統一し、既存のAPI契約を保つ方法を示します。

主な機能

  1. 01副作用を呼び出し側に移動
  2. 02同種の関数の戻り値を統一
  3. 03動作が伝わる関数名
  4. 04既存のAPI契約を維持

活用シーン

  1. 01getterに隠れた処理がないか確認
  2. 02バリデーション関数の結果を統一
  3. 03保存も行う計算関数の名前を変更

インストール

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

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

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

README（原文）English

プロジェクトの README より

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

예측 가능성

함수는 이름이 암시하는 대로 동작해야 한다. 숨겨진 동작이 없어야 한다.

핵심 패턴

숨은 로직 드러내기

❌ fetch 함수에 숨은 부수 효과:

async function fetchBalance(): Promise<number> {
  const balance = await http.get<number>("...");
  logging.log("balance_fetched"); // 숨은 부수 효과!
  return balance;
}

✅ 부수 효과는 호출부에서 명시적으로:

async function fetchBalance(): Promise<number> {
  return await http.get<number>("...");
}

const balance = await fetchBalance();
logging.log("balance_fetched");
반환 타입 통일

❌ 같은 종류인데 반환 타입 다름:

function checkIsNameValid(name: string) {
  return name.length > 0; // boolean
}
function checkIsAgeValid(age: number) {
  if (age < 18) return { ok: false, reason: "18세 이상" };
  return { ok: true }; // 객체
}

✅ Discriminated Union으로 통일:

type ValidationResult = { ok: true } | { ok: false; reason: string };

function checkIsNameValid(name: string): ValidationResult {
  if (name.length === 0) return { ok: false, reason: "이름 필수" };
  return { ok: true };
}
function checkIsAgeValid(age: number): ValidationResult {
  if (age < 18) return { ok: false, reason: "18세 이상" };
  return { ok: true };
}

빠른 참조

코드 냄새개선 방법
getX()에 부수 효과순수 getter와 action 분리
calculateX()가 저장함calculateAndSaveX()로 이름 변경 또는 분리
같은 종류인데 반환 타입 다름Discriminated Union: { ok: true } | { ok: false; reason }
라이브러리 이름과 겹침구분되는 이름 사용: http → httpService

주의사항

  • 부수 효과를 제거하지 말고 명시적 위치로 이동
  • 지나치게 복잡한 타입 피하기
  • 기존 API 계약 유지

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

コメント

Markdown 対応