UIパーツの設計を「型」から読み解く 〜TSKaigiのセッションから得た学び〜

TSKaigi 2026事後勉強会の登壇資料です。
https://smarthr.connpass.com/event/392342/

Transcript

1. UIパーツの設計を「型」から読み解く 〜TSKaigiのセッションから得た学び〜 0yu @yud0uhu 2026/06/25(Thu) TSKaigi 2026事後勉強会
2. 自己紹介 0yu（おゆ） Web FE 好きなもの 推理小説、映画、謎解き・マダミス、ウイスキー @yud0uhu @yud0uhu
3. TSKaigiのセッションから得た学び
4. 出典：React の props は値の集合ではない — UI の状態を宣言するコンポーネント設計（nabeliwo）さん
5. TSKaigiのセッションから得た学び UIパーツの設計を「型」から読み解く 同セッションの具体例として挙げられていた状態
6. 出典：「進研ゼミでやったところだ！」現象｜西川智希. note. https://note.com/nishikooooth/n/n9727b86bd772
7. 様々な状態を持つUIパーツを propsで表現する
8. 様々な状態を持つアイコンをpropsで表現する 課題 用途に応じて様々な状態を表現する「AnimationIcon」を再設計したい 「ToggleIcon」の名前で共通化された「AnimationIcon」が存在する お気に入り（オン/オフ） 再生/停止 ミュート/解除 10秒戻す、10秒進める
9. 様々な状態を持つアイコンをpropsで表現する アイコンの責務と状態（振る舞い）の整理 すべてのアイコンに共通する振る舞い 「押下したこと」がアニメーションとしてフィードバックされる アイコンごとに異なる振る舞い トグルするアイコン（押下するとアイコンが変わる） 例：お気に入り（オン/オフ）、再生/停止、ミュート/解除 トグルしないアイコン（押下してもアイコンは変わらない） 例：10秒戻す、10秒進める
10. Before
11. Before Before 1 2 3 4 5 6 7 8 9 10 11 // 「トグルするアイコン」と // 「トグルしないアイコン」の責務が混在している type Props = { isShrinking: boolean; iconComponent: React.ReactNode; // トグルアイコンなのに、トグルしないアイコンが存在する previousIconComponent?: React.ReactNode; // アニメーションをさせるためだけに存在する handleShrinkComplete: () => void; handleGrowComplete: () => void; };
12. Before リファクタ前のコードの持つ問題点 「コード（型）が仕様を表現しきれていない」 実装者に誤った使い方を誘引してしまう
13. After
14. After 「discriminated union」でUIの振る舞いを型に閉じ込める 1 2 3 4 5 6 7 8 9 10 11 12 13 type ToggleProps = BaseProps & { type: "toggle"; isToggled: boolean; fromIcon: React.ReactNode; toIcon: React.ReactNode; }; type NonToggleProps = BaseProps & { type: "non-toggle"; icon: React.ReactNode; }; type Props = ToggleProps | NonToggleProps;
15. After Propsでアイコンごとの責務を分離する 1 2 3 4 5 6 7 8 9 export type BaseBouncyIconProps = { onClick: () => void; onAnimationEnd?: () => void; className?: string; }; export type PlayToPauseBouncyIconProps = BaseBouncyIconProps & { isPlaying: boolean; };
16. After JSXの構造でUIの状態を表現する 1 2 3 4 5 6 7 8 9 10 11 12 type ToggleProps = BaseProps & { // ... fromIcon: React.ReactNode; toIcon: React.ReactNode; }; return ( <BaseBouncyIconButton // ... fromIcon={<IconPlay className="size-full" />} toIcon={<IconPause className="size-full" />} />
17. 「discriminated union」で UIの振る舞いを型に閉じ込める
18. 「discriminated union」でUIの振る舞いを型に閉じ込める 「discriminated union」でUIの振る舞いを型に閉じ込める 1 2 3 4 5 6 7 8 9 10 11 12 // 不可能な状態を許容してしまう type BadProgressBarProps = { status: 'loading' | 'success' | 'error'; percent?: number; // loadingの時だけほしい message?: string; // errorの時だけほしい }; // 判別可能なユニオン型 type GoodProgressBarProps = | { status: 'loading'; percent: number; } | { status: 'error'; message: string; } | { status: 'success'; };
19. 「シンプル」が至上
20. 「シンプル」が至上 「シンプル」が至上 「いかに削ぎ落とすか、公開するものを減らすか」を考える ex.「判別可能なユニオン型」によるカプセル化でスコープを閉じる アニメーションする責務が外側から介在しなくなる
21. オブジェクト指向から考える 「カプセル化」と「命名」
22. オブジェクト指向から考える「カプセル化」と「命名」 オブジェクト指向から考える「カプセル化」と「命名」 “オブジェクト指向を超えて重要な原則は
 「カプセル化」と「正しい名前付け」” ➖ オブジェクト指向と10年戦ってわかったこと | https://qiita.com/tutinoco/items/6952b01e5fc38914ec4e
23. オブジェクト指向から考える「カプセル化」と「命名」 オブジェクト指向から考える「カプセル化」と「命名」 「discriminated union」による「カプセル化」 単にPropsを共通化するのではなく、UIの振る舞い（ドメイン）を正し く型に落とし込む（モデリングする） 不可能な状態を型で許容しない 「正しい名前付け」による「関心の分離」 「アニメーションという振る舞い」と
 「トグルする/しないというロジック」を分離して考える ToggleIconはToggleIconではなかった
24. オブジェクト指向から考える「カプセル化」と「命名」 オブジェクト指向から考える「カプセル化」と「命名」 「discriminated union」による「カプセル化」 単にPropsを共通化するのではなく、UIの振る舞い（ドメイン）を正し く型に落とし込む（モデリングする） 不可能な状態を型で許容しない 「正しい名前付け」による「関心の分離」 「アニメーションという振る舞い」と
 「トグルする/しないというロジック」を分離して考える ToggleIconはToggleIconではなかった
25. まとめ
26. まとめ まとめ UIコンポーネントの設計では、Propsのデータ型そのもので仕様（UIの振 る舞い）を表現し、使う側の認知負荷を減らすのが理想 UIごとの責務の分離と、「引き算」を意識する 実業務で先輩から学んだ設計の話とセッションの内容が重なり、ユース ケース的な学びが大きかった💪