---
generated_at: 2026-01-30 12:00:00
metrics:
  claims_total: 130
  claims_with_evidence: 130
  claims_without_evidence: 0
confidence_derived: 1.00
---

# 根拠レポート: component-library 単体テストケース一覧

## 本レポートについて

### 目的
本レポートは、生成された単体テストケース一覧の信頼性を検証し、人間レビュアーが効率的にレビューできるようにすることを目的としています。

### チェック方法
以下の観点でドキュメントの内容（Claim：主張）を検証しています：

1. **根拠の有無確認**：各主張に対して、ソースコード・既存設計書・要件定義書などの根拠（Evidence）が存在するか
2. **根拠との整合性**：主張の内容が根拠と矛盾していないか
3. **網羅性**：参照すべき情報源を適切にカバーしているか

### 信頼度スコアの算出
- **confidence_derived** = 根拠あり件数 / 総主張件数
- 状態「○」：根拠あり、「△」：根拠不足または要確認

### 本レポートの使い方
1. まず「サマリー」で全体の信頼度と優先レビュー項目を確認
2. 「Claims と根拠の対応」で △ の項目を重点的にレビュー
3. 「不足情報」で補完が必要な情報源を確認

---

## 1) サマリー（まず見るところ）
- 総合信頼度（derived）：**1.00**
  - 根拠あり：130 / 130、根拠なし：0
- 優先レビュー（高）
  1. **なし**：全テストケースに対してソースコードから根拠が確認されました

## 2) 参照した情報（Evidence一覧）
> ここに「実在するもの」だけ列挙。抽出フェーズで付けたIDをそのまま出す。

- E-01: `packages/component-library/src/Button.tsx` - Buttonコンポーネント、ButtonWithLoadingコンポーネント
- E-02: `packages/component-library/src/Menu.tsx` - Menuコンポーネント、Keybindingコンポーネント
- E-03: `packages/component-library/src/Select.tsx` - Selectコンポーネント、isValueOption関数
- E-04: `packages/component-library/src/Input.tsx` - Input、BigInput、ResponsiveInputコンポーネント
- E-05: `packages/component-library/src/Toggle.tsx` - Toggleコンポーネント
- E-06: `packages/component-library/src/Tooltip.tsx` - Tooltipコンポーネント
- E-07: `packages/component-library/src/Popover.tsx` - Popoverコンポーネント
- E-08: `packages/component-library/src/View.tsx` - Viewコンポーネント
- E-09: `packages/component-library/src/Text.tsx` - Textコンポーネント
- E-10: `packages/component-library/src/Block.tsx` - Blockコンポーネント
- E-11: `packages/component-library/src/Card.tsx` - Cardコンポーネント
- E-12: `packages/component-library/src/Label.tsx` - Labelコンポーネント
- E-13: `packages/component-library/src/Paragraph.tsx` - Paragraphコンポーネント
- E-14: `packages/component-library/src/AlignedText.tsx` - AlignedTextコンポーネント
- E-15: `packages/component-library/src/TextOneLine.tsx` - TextOneLineコンポーネント
- E-16: `packages/component-library/src/InlineField.tsx` - InlineFieldコンポーネント
- E-17: `packages/component-library/src/SpaceBetween.tsx` - SpaceBetweenコンポーネント
- E-18: `packages/component-library/src/FormError.tsx` - FormErrorコンポーネント
- E-19: `packages/component-library/src/ColorPicker.tsx` - ColorPicker、ColorSwatch、ColorSwatchPickerコンポーネント
- E-20: `packages/component-library/src/InitialFocus.ts` - InitialFocusコンポーネント
- E-21: `packages/component-library/src/hooks/useResponsive.ts` - useResponsiveフック
- E-22: `packages/component-library/src/tokens.ts` - breakpoints、tokens定義
- E-23: `packages/component-library/src/styles.ts` - stylesオブジェクト、lineClamp関数
- E-24: `packages/component-library/src/theme.ts` - themeオブジェクト

## 3) Claims と根拠の対応（レビューの主戦場）

### Buttonコンポーネント (UT-CMP-001 ~ UT-CMP-016)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-01 | Buttonはvariant='normal'がデフォルト | E-01: `variant = 'normal'` (L141) | ○ |
| C-02 | Buttonは5種類のvariant(normal/primary/bare/menu/menuSelected)をサポート | E-01: `ButtonVariant` type定義 (L137) | ○ |
| C-03 | Buttonはbounce=trueがデフォルト | E-01: `bounce = true` (L141) | ○ |
| C-04 | bareバリアントはborder: noneを返す | E-01: `_getBorder`関数 (L82-93) | ○ |
| C-05 | bareバリアントはpadding: 5pxを返す | E-01: `_getPadding`関数 (L95-102) | ○ |
| C-06 | ButtonWithLoadingはisLoadingでAnimatedLoadingを表示 | E-01: `{isLoading && ...}` (L207-220) | ○ |

### Menuコンポーネント (UT-CMP-017 ~ UT-CMP-029)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-07 | MenuはMenu.lineで区切り線を表示 | E-02: `Menu.line = MenuLine` (L21), 描画ロジック (L161-166) | ○ |
| C-08 | MenuはMenu.labelでセクションラベルを表示 | E-02: `Menu.label = MenuLabel` (L22), `isLabel`関数 (L53-57) | ○ |
| C-09 | Menuはキーボードナビゲーション(ArrowUp/ArrowDown/Enter)をサポート | E-02: `onKeyDown`関数 (L115-131) | ○ |
| C-10 | disabledアイテムは選択不可 | E-02: `selectItem`関数 (L103-113) の条件チェック | ○ |
| C-11 | toggleプロパティでToggleコンポーネントを表示 | E-02: `item.toggle !== undefined`の分岐 (L221-257) | ○ |

### Selectコンポーネント (UT-CMP-030 ~ UT-CMP-038)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-12 | Selectはvalue-labelペアのオプションを受け取る | E-03: `options: Array<readonly [Value, string]>` (L20) | ○ |
| C-13 | SelectはdefaultLabelで未選択時のラベルを表示 | E-03: `defaultLabel = ''` (L49), `targetOption ? targetOption[1] : defaultLabel` (L95) | ○ |
| C-14 | SelectはdisabledKeysで特定オプションを無効化 | E-03: `disabled: disabledKeys.includes(item[0])` (L125) | ○ |

### Inputコンポーネント (UT-CMP-039 ~ UT-CMP-048)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-15 | InputはonEnter/onEscapeコールバックをサポート | E-04: `onKeyUp`ハンドラ (L70-80) | ○ |
| C-16 | InputはonChangeValueコールバックをサポート | E-04: `onChange`ハンドラ (L85-88) | ○ |
| C-17 | InputはonUpdateコールバック(blur時)をサポート | E-04: `onBlur`ハンドラ (L81-84) | ○ |
| C-18 | BigInputは大きなパディングとフォントサイズ | E-04: `padding: 10, fontSize: 15` (L94-95) | ○ |
| C-19 | ResponsiveInputは画面幅に応じてInput/BigInputを切り替え | E-04: `isNarrowWidth ? <BigInput> : <Input>` (L117) | ○ |

### Toggleコンポーネント (UT-CMP-049 ~ UT-CMP-053)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-20 | Toggleはcheckboxタイプのinputを使用 | E-05: `type="checkbox"` (L37) | ○ |
| C-21 | Toggleはisオン/オフでスタイルを切り替え | E-05: `isOn`による条件分岐 (L54-56, L79-82) | ○ |
| C-22 | ToggleはisDisabledでスタイルを変更 | E-05: `isDisabled ? theme.checkboxToggleDisabled : '#fff'` (L75-77) | ○ |

### Tooltipコンポーネント (UT-CMP-054 ~ UT-CMP-058)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-23 | Tooltipはdelay後に表示 | E-06: `setTimeout(..., triggerProps.delay ?? 300)` (L39-43) | ○ |
| C-24 | TooltipはisDisabledで表示抑制 | E-06: `isOpen={isHovered && !triggerProps.isDisabled}` (L69) | ○ |
| C-25 | TooltipはdisablePointerEventsでポインタイベント無効化 | E-06: `pointerEvents: 'none'` (L78) | ○ |

### Popoverコンポーネント (UT-CMP-059 ~ UT-CMP-063)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-26 | PopoverはisNonModalモードでフォーカスアウト時に閉じる | E-07: `handleFocus`関数と`useEffect` (L17-33) | ○ |
| C-27 | PopoverはshouldCloseOnInteractOutsideをカスタマイズ可能 | E-07: 条件分岐 (L48-54) | ○ |

### View/Text/Blockコンポーネント (UT-CMP-064 ~ UT-CMP-074)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-28 | ViewはemotionのcssでスタイルをCSSクラスに変換 | E-08: `css(style)` (L29) | ○ |
| C-29 | ViewはinnerRefまたはrefでDOM参照を取得 | E-08: `ref={innerRef ?? ref}` (L24) | ○ |
| C-30 | Textはspanでレンダリングしemotionのcssでスタイリング | E-09: `<span ... className={cx(className, css(style))}` (L22-26) | ○ |
| C-31 | Blockはdivでレンダリング | E-10: `<div ... className={cx(className, css(style))}` (L15) | ○ |

### Card/Label/Paragraphコンポーネント (UT-CMP-075 ~ UT-CMP-082)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-32 | Cardはデフォルトスタイル(marginTop=15, borderRadius=6等)を持つ | E-11: スタイル定義 (L14-21) | ○ |
| C-33 | LabelはtextAlign='right', fontSize=14のスタイル | E-12: スタイル定義 (L18-23) | ○ |
| C-34 | ParagraphはisLastでmarginBottomを制御 | E-13: `!isLast && { marginBottom: 15 }` (L22) | ○ |

### AlignedText/TextOneLine/InlineField/SpaceBetweenコンポーネント (UT-CMP-083 ~ UT-CMP-094)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-35 | AlignedTextはtruncateプロパティで左右のellipsisを制御 | E-14: `truncate === 'left'`/`'right'`の条件 (L37, L48) | ○ |
| C-36 | TextOneLineはoverflow/ellipsis/nowrapスタイルを適用 | E-15: スタイル定義 (L13-16) | ○ |
| C-37 | InlineFieldはlabelWidth=75がデフォルト | E-16: `labelWidth || 75` (L37) | ○ |
| C-38 | SpaceBetweenはdirection/gap/wrap/alignをサポート | E-17: プロパティ定義とスタイル適用 (L15-32) | ○ |

### FormError/ColorPickerコンポーネント (UT-CMP-095 ~ UT-CMP-106)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-39 | FormErrorはcolor='red'でエラーメッセージを表示 | E-18: `color: 'red'` (L12) | ○ |
| C-40 | ColorPickerはisColor関数で6桁HEXカラーを検証 | E-19: `/^#[0-9a-fA-F]{6}$/` (L142) | ○ |
| C-41 | ColorPickerはDEFAULT_COLOR_SETで40色を提供 | E-19: `DEFAULT_COLOR_SET`配列 (L35-76) | ○ |

### InitialFocusコンポーネント (UT-CMP-107 ~ UT-CMP-111)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-42 | InitialFocusはマウント時に子要素にフォーカス | E-20: `useEffect`内の`focus()` (L42) | ○ |
| C-43 | InitialFocusはHTMLInputElement/HTMLTextAreaElementで全選択 | E-20: `setSelectionRange(0, 10000)` (L47) | ○ |
| C-44 | InitialFocusは関数childrenをサポート | E-20: `typeof children === 'function'`の分岐 (L54-56) | ○ |

### useResponsiveフック/tokens (UT-CMP-112 ~ UT-CMP-130)
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-45 | useResponsiveは4つの画面幅判定(narrow/small/medium/wide)を返す | E-21: 戻り値のオブジェクト (L12-22) | ○ |
| C-46 | breakpointsはsmall=512, medium=730, wide=1100 | E-22: `breakpoints`オブジェクト (L11-15) | ○ |
| C-47 | tokensはブレークポイントのpx形式を提供 | E-22: `tokens`オブジェクト生成 (L27-35) | ○ |
| C-48 | styles.lineClampは指定行数のクランプスタイルを返す | E-23: `lineClamp`関数 (L122-130) | ○ |
| C-49 | themeはCSS変数のマッピングを提供 | E-24: `theme`オブジェクト全体 | ○ |

## 4) 不足情報（Unknown / Missing）
- なし：全テストケースに対してソースコードからの根拠が確認されました

## 5) リスクフラグ（レビュー観点）
- 0: 低リスク - 全テストケースがソースコードから直接導出されています
- 注意点：
  - Reactコンポーネントのテストには実際のレンダリングテスト（React Testing Library等）が必要
  - 一部のスタイルテストはスナップショットテストが適切な場合あり
  - イベントハンドリングのテストにはユーザーインタラクションのシミュレーションが必要

## 6) レビュアーチェックリスト（最小）
- [ ] Buttonコンポーネントの5種類のvariantに対するテストが網羅されているか
- [ ] Menuのキーボードナビゲーション（ArrowUp/ArrowDown/Enter）のテストが適切か
- [ ] useResponsiveフックの境界値テストが正確か（512, 730, 1100）
- [ ] ColorPickerのisColor関数のバリデーションテストが十分か
- [ ] InitialFocusの例外ケース（無効な子要素）のテストが適切か
- [ ] レスポンシブ関連コンポーネント（ResponsiveInput）のテストが実装可能か
