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

UIパーツの設計を「型」から読み解く〜TSKaigiのセッションから得た学び〜 0yu @yud0uhu 2026/06/25(Thu) TSKaigi 2026事後勉強会

自己紹介 0yu（おゆ） Web FE 好きなもの推理小説、映画、謎解き・マダミス、ウイスキー @yud0uhu @yud0uhu

TSKaigiのセッションから得た学び

出典：React の props は値の集合ではない — UI の状態を宣言するコンポーネント設計（nabeliwo）さん

TSKaigiのセッションから得た学び UIパーツの設計を「型」から読み解く同セッションの具体例として挙げられていた状態

出典：「進研ゼミでやったところだ！」現象｜西川智希. note. https://note.com/nishikooooth/n/n9727b86bd772

様々な状態を持つUIパーツを propsで表現する

様々な状態を持つアイコンをpropsで表現する課題用途に応じて様々な状態を表現する「AnimationIcon」を再設計したい「ToggleIcon」の名前で共通化された「AnimationIcon」が存在するお気に入り（オン/オフ）再生/停止ミュート/解除 10秒戻す、10秒進める

様々な状態を持つアイコンをpropsで表現するアイコンの責務と状態（振る舞い）の整理すべてのアイコンに共通する振る舞い「押下したこと」がアニメーションとしてフィードバックされるアイコンごとに異なる振る舞いトグルするアイコン（押下するとアイコンが変わる）例：お気に入り（オン/オフ）、再生/停止、ミュート/解除トグルしないアイコン（押下してもアイコンは変わらない）例：10秒戻す、10秒進める

Before

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; };

Before リファクタ前のコードの持つ問題点「コード（型）が仕様を表現しきれていない」実装者に誤った使い方を誘引してしまう

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;

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; };

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" />} />

「discriminated union」で UIの振る舞いを型に閉じ込める

「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'; };

「シンプル」が至上

「シンプル」が至上「シンプル」が至上「いかに削ぎ落とすか、公開するものを減らすか」を考える ex.「判別可能なユニオン型」によるカプセル化でスコープを閉じるアニメーションする責務が外側から介在しなくなる

オブジェクト指向から考える「カプセル化」と「命名」

オブジェクト指向から考える「カプセル化」と「命名」オブジェクト指向から考える「カプセル化」と「命名」 “オブジェクト指向を超えて重要な原則は  「カプセル化」と「正しい名前付け」” ➖ オブジェクト指向と10年戦ってわかったこと | https://qiita.com/tutinoco/items/6952b01e5fc38914ec4e

オブジェクト指向から考える「カプセル化」と「命名」オブジェクト指向から考える「カプセル化」と「命名」「discriminated union」による「カプセル化」単にPropsを共通化するのではなく、UIの振る舞い（ドメイン）を正しく型に落とし込む（モデリングする）不可能な状態を型で許容しない「正しい名前付け」による「関心の分離」「アニメーションという振る舞い」と  「トグルする/しないというロジック」を分離して考える
ToggleIconはToggleIconではなかった

まとめ

まとめまとめ UIコンポーネントの設計では、Propsのデータ型そのもので仕様（UIの振る舞い）を表現し、使う側の認知負荷を減らすのが理想 UIごとの責務の分離と、「引き算」を意識する実業務で先輩から学んだ設計の話とセッションの内容が重なり、ユースケース的な学びが大きかった💪

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

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

yud0uhu

More Decks by yud0uhu

Other Decks in Technology

Featured

Transcript