---
generated_at: 2026-02-25 10:00:00
metrics:
  claims_total: 51
  claims_with_evidence: 49
  claims_without_evidence: 2
confidence_derived: 0.96
---

# 根拠レポート：decap-cms-widget-colorstring 単体テストケース一覧

## 本レポートについて

### 目的
本レポートは、生成された設計書・ドキュメントの信頼性を検証し、人間レビュアーが効率的にレビューできるようにすることを目的としています。

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

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

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

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

---

## 1) サマリー（まず見るところ）
- 総合信頼度（derived）：**0.96**
  - 根拠あり：49 / 51、根拠なし：2
- 優先レビュー（高）
  1. **C-37**: allowInput=falseの場合にstyle.colorが'#bbb'となる挙動は `!allowInput && '#bbb'` という論理AND式に基づくが、JSの評価結果がfalsy値（false）になるケースの解釈が微妙
  2. **C-38**: allowInput=trueの場合のstyle.colorの値（false）が実際のCSS動作としてどう評価されるかは実行環境依存

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

- E-01: `packages/decap-cms-widget-colorstring/src/index.js` - Widget関数定義、エクスポート
- E-02: `packages/decap-cms-widget-colorstring/src/ColorControl.js` - ColorControlクラス定義（handleClick, handleClear, handleClose, handleChange, render）
- E-03: `packages/decap-cms-widget-colorstring/src/ColorPreview.js` - ColorPreview関数コンポーネント定義
- E-04: `packages/decap-cms-widget-colorstring/package.json` - 依存パッケージ情報（react-color, tinycolor2）
- E-05: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L89-91 - defaultProps定義
- E-06: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L93-95 - state初期値定義
- E-07: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L101-103 - handleClick実装
- E-08: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L104-106 - handleClear実装
- E-09: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L107-109 - handleClose実装
- E-10: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L110-116 - handleChange実装（alpha < 1 判定）
- E-11: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L117-176 - render実装
- E-12: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L121 - field.get('allowInput', false)
- E-13: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L124 - showClearButton条件 (!allowInput && value)
- E-14: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L138 - tinycolor(value).isValid()による背景色判定
- E-15: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L152 - field.get('enableAlpha', false)
- E-16: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L96-99 - componentDidMount PropTypes.checkPropTypes呼び出し
- E-17: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L8-17 - ClearIcon関数コンポーネント
- E-18: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L161 - value || '' でnull/undefinedのフォールバック
- E-19: `packages/decap-cms-widget-colorstring/src/ColorControl.js` L165-169 - inputのstyleプロパティ

## 3) Claims と根拠の対応（レビューの主戦場）
| Claim ID | 主張 | Evidence | 状態 |
|---|---|---|---|
| C-01 | Widget()がデフォルトでname='color'のオブジェクトを返す | E-01 (L4-11) | ○ |
| C-02 | Widget()にカスタムオプションを渡すとマージされる | E-01 (L4-11, スプレッド構文 ...opts) | ○ |
| C-03 | Widget({})で空オブジェクトを渡すとデフォルト値が維持される | E-01 (L4-11) | ○ |
| C-04 | Widget()に追加プロパティを渡すとそれも含まれる | E-01 (L4-11, スプレッド構文) | ○ |
| C-05 | DecapCmsWidgetColorStringにWidget, controlComponent, previewComponentが含まれる | E-01 (L13) | ○ |
| C-06 | デフォルトエクスポートがDecapCmsWidgetColorStringと同一 | E-01 (L14) | ○ |
| C-07 | 初期stateのshowColorPickerがfalse | E-06 (L93-95) | ○ |
| C-08 | defaultProps.valueが空文字列 | E-05 (L89-91) | ○ |
| C-09 | handleClickがshowColorPickerをfalseからtrueにトグル | E-07 (L101-103) | ○ |
| C-10 | handleClickがshowColorPickerをtrueからfalseにトグル | E-07 (L101-103) | ○ |
| C-11 | handleClearがonChange('')を呼ぶ | E-08 (L104-106) | ○ |
| C-12 | handleCloseがshowColorPickerをfalseに設定 | E-09 (L107-109) | ○ |
| C-13 | alpha=1のときhex形式でonChangeが呼ばれる | E-10 (L111-114, a < 1の条件分岐) | ○ |
| C-14 | alpha<1のときrgba形式でonChangeが呼ばれる | E-10 (L111-114) | ○ |
| C-15 | alpha=0のときrgba形式で出力される | E-10 (L112, 0 < 1 はtrue) | ○ |
| C-16 | alpha=0.99のときrgba形式で出力される | E-10 (L112, 0.99 < 1 はtrue) | ○ |
| C-17 | input要素が正しいpropsでレンダリングされる | E-11 (L156-173) | ○ |
| C-18 | allowInput=falseでinputがreadOnly | E-11 (L172) | ○ |
| C-19 | allowInput=trueでinputがreadOnlyでない | E-11 (L172) | ○ |
| C-20 | allowInput=falseかつvalueありでクリアボタン表示 | E-13 (L124) | ○ |
| C-21 | allowInput=trueでクリアボタン非表示 | E-13 (L124, !allowInput=false) | ○ |
| C-22 | value空でクリアボタン非表示 | E-13 (L124, value=falsy) | ○ |
| C-23 | showColorPicker=trueでChromePicker表示 | E-11 (L146-155) | ○ |
| C-24 | showColorPicker=falseでChromePicker非表示 | E-11 (L146条件) | ○ |
| C-25 | enableAlpha=trueでdisableAlpha=false | E-15 (L152, !true=false) | ○ |
| C-26 | enableAlpha未設定/falseでdisableAlpha=true | E-15 (L152, !false=true) | ○ |
| C-27 | 有効な色でColorSwatchの背景色がその色になる | E-14 (L138) | ○ |
| C-28 | 無効な色でColorSwatchの背景色が#fff | E-14 (L138, tinycolor.isValid()=false) | ○ |
| C-29 | 無効な色でColorSwatchの文字色がグレー | E-14 (L139-141) | ○ |
| C-30 | 有効な色でColorSwatchの文字色が透明 | E-14 (L139-141) | ○ |
| C-31 | value=nullでinputのvalueが空文字列 | E-18 (L161, null || '' = '') | ○ |
| C-32 | allowInput=falseでinputクリック時handleClick呼び出し | E-11 (L171) | ○ |
| C-33 | allowInput=trueでinputクリック時handleClick未呼び出し | E-11 (L171, onClick=undefined) | ○ |
| C-34 | inputのonChangeでprops.onChangeが呼ばれる | E-11 (L162) | ○ |
| C-35 | onFocusでsetActiveStyleが呼ばれる | E-11 (L163) | ○ |
| C-36 | onBlurでsetInactiveStyleが呼ばれる | E-11 (L164) | ○ |
| C-37 | allowInput=falseでstyle.colorが'#bbb' | E-19 (L168, !allowInput && '#bbb') | △ |
| C-38 | allowInput=trueでstyle.colorがfalse | E-19 (L168, !true && '#bbb' = false) | △ |
| C-39 | ClickOutsideDivクリックでhandleClose呼び出し | E-11 (L148) | ○ |
| C-40 | クリアボタンクリックでhandleClear呼び出し | E-11 (L131) | ○ |
| C-41 | inputのpaddingLeftが75px | E-19 (L166) | ○ |
| C-42 | value=nullでChromePickerのcolorが空文字列 | E-11 (L150, value || '' = '') | ○ |
| C-43 | ClearIconがSVG要素を返す | E-17 (L8-17) | ○ |
| C-44 | ClearIconにaria-hidden, focusable属性あり | E-17 (L10) | ○ |
| C-45 | ColorPreviewがvalueをWidgetPreviewContainer内に表示 | E-03 (L5-7) | ○ |
| C-46 | ColorPreviewが空文字列で空のコンテナを表示 | E-03 (L5-7) | ○ |
| C-47 | ColorPreviewがundefinedでエラーなし | E-03 (L5-7) | ○ |
| C-48 | ColorPreviewがrgba形式の文字列を表示 | E-03 (L5-7) | ○ |
| C-49 | componentDidMountでPropTypes.checkPropTypesが呼ばれる | E-16 (L96-99) | ○ |
| C-50 | RGB最大値(255)でhex形式が正しくフォーマットされる | E-10 (L111-114) | ○ |
| C-51 | RGB最小値(0)でhex形式が正しくフォーマットされる | E-10 (L111-114) | ○ |

## 4) 不足情報（Unknown / Missing）
- C-37, C-38: `!allowInput && '#bbb'` というJavaScript論理AND式の評価結果がReactのstyleプロパティとしてどのように適用されるかは、Reactの内部実装に依存する。`false`がstyle.colorに渡された場合のReactの実際の挙動（プロパティが無視される/空文字列になる等）について、Reactの公式ドキュメントでの確認が推奨される。
  - 候補：React公式ドキュメント / @emotion/styledの実装 / ブラウザCSS仕様

## 5) リスクフラグ（レビュー観点）
- 0: 低リスク - Widget関数、エクスポート構造、ClearIcon、ColorPreviewは単純な構造で根拠が明確
- 0: 低リスク - handleClick, handleClear, handleCloseは単純なstate/props操作
- 0: 低リスク - handleChangeのalpha判定ロジックはソースコードから明確に読み取れる
- 1: 中リスク - renderメソッド内の条件分岐（allowInput, showClearButton, tinycolor判定）は複合条件のため、テストケースの網羅性の確認が必要
- 1: 中リスク - style.colorに `!allowInput && '#bbb'` の評価結果(false)が渡される挙動は実行時に確認が必要

## 6) レビュアーチェックリスト（最小）
- [ ] handleChangeのalpha < 1 判定の境界値（alpha=1.0, 0.999, 0.0）が十分にテストされているか
- [ ] tinycolor(value).isValid()の判定に使われる色文字列パターン（hex, rgb, rgba, 名前付き色等）のテストが必要か検討
- [ ] allowInput=falseの場合の `!allowInput && '#bbb'` がReact styleでどう解釈されるかの実機確認
- [ ] ColorPreviewのpropTypes定義（value: PropTypes.node）に対する型バリエーションテストが十分か
- [ ] ChromePickerコンポーネントとの連携テスト（モック vs 実コンポーネント）の方針確認
