Nextbeat Tech Bar：第六回関数型プログラミング（仮）の会 ikuma-t 2024/11/22 Make Impossible States Impossibleを 意識してReactのPropsを設計しよう

ikuma-t 8 フロントエンドエンジニB 8 ⁨ ⁩ 普段はReact/Next.jsを書いてます 8 趣味は個人ブログいじりと料理です。 いくま / いくまてぃー 各種SNS：https://bento.me/ikuma

https://www.shoeisha.co.jp/book/detail/9784798179803 今はScalaを やろうとしている React 関数型プログラミング のエッセンスを含む Gleam 関数型言語 関数型の基本を学ぶ 今年の夏くらいから関数型プログラミングに趣味で触れています わたしと関数型プログラミング

Make Impossible States Impossible を意識してReactのPropsを設計しよう 間違った状態になりようがない型を用いて、不整合な操作や状態が発生しないようにする Make Illegal States Unrepresentable とも。 今回お話ししたいこと

型を用いてありえない状態を定義できないようにする Make Impossible States Impossibleとは？ primaryなスタイルのボタン secondaryなスタイルのボタン 例：2つのバリエーションを持つButtonのProps

型を用いてありえない状態を定義できないようにする 「プロパティが取りうる値のパターン」× 「プロパティの数」の組み合わせが生じる。 実際にはありえない組み合わせを指定できてしまう。 プロパティが取りうる値のパターンだけの組み合わせ。 ありえる状態だけを列挙する。 Make Impossible States Impossibleとは？

Empty Stateを示す共通コンポーネントを考えてみる 最初は新規作成ボタンだけが要件としてある。この時点では問題ない。 実践例 例：「リソースがない状態のレイアウトはアプリで共通でつくろう！」

リンクを表示するケースが新たに追加される 「linkTextを指定しているがhrefがない」「buttonTextとhrefが指定してある」など不正な状態が生まれる 実践例 例：「アプリ内でリソース作成しないケースはリンクにしたいんですよね。リンクということでボタンのスタイルも変えたい！」

実装１）Discriminated Unionとして定義する タグによって判別可能な型にすることで、取りうる値を正しい状態に制限することができる 実践例

実装２）Compositionで実装する Buttonの取りうる状態が複数あるのが複雑さの原因。親は渡された関数を呼び出すことだけ担うようにする 実践例

実装２）Compositionで実装する 実践例 スタイルを使いまわしたいのであれば、Buttonにスタイルとアイコンを部分適用することもできる href、label Buttonの取りうる状態が複数あるのが複雑さの原因。親は渡された関数を呼び出すことだけ担うようにする

Make Impossible States Impossible を意識してReactのPropsを設計しよう 実現方法はReact / TypeScriptにおいては一般的なもの 大事なのは考え方・視点で、適切なPropsかどうかの1つの指針として使うとよいと思っています！

ありがとうございました！