Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Make Impossible States Impossibleを 意識してReactのPr...
Search
ikuma-t
November 09, 2024
Programming
0
44
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
[Nextbeat Tech Bar:第六回関数型プログラミング(仮)の会](
https://nextbeat.connpass.com/event/332165/
) のLT登壇資料です。
ikuma-t
November 09, 2024
Tweet
Share
More Decks by ikuma-t
See All by ikuma-t
いまさらのStorybook
ikumatadokoro
0
170
これで最後にしたい! Astroと立ち向かう 6度目の個人ブログ再開発
ikumatadokoro
3
310
Panda CSS と Ark UI ではじめる個人開発
ikumatadokoro
2
860
見た目から始める生産性向上
ikumatadokoro
10
5.3k
ぼくが 美容師さんに伝えたかった バンドの話
ikumatadokoro
0
130
Railsアプリをコスパよく読むための環境整備
ikumatadokoro
2
770
HTTPを手で書いて学ぶ ファイルアップロードの仕組み
ikumatadokoro
74
27k
たどころくん1号を支える技術
ikumatadokoro
1
190
なんだか うまくいっている を 自分たちの いつもどおり に 定着させるためのチーム戦略
ikumatadokoro
4
620
Other Decks in Programming
See All in Programming
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
400
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
160
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
300
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
140
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.7k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
300
受け取る人から提供する人になるということ
little_rubyist
0
180
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
280
僕がつくった48個のWebサービス達
yusukebe
20
17k
Quine, Polyglot, 良いコード
qnighy
4
610
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
15
2k
Documentation Writing (for coders)
carmenintech
65
4.4k
GitHub's CSS Performance
jonrohan
1030
460k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
4 Signs Your Business is Dying
shpigford
180
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Visualization
eitanlees
145
15k
What's in a price? How to price your products and services
michaelherold
243
12k
Building Your Own Lightsaber
phodgson
102
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
How to Ace a Technical Interview
jacobian
276
23k
Transcript
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が指定してある」など不正な状態が生まれる 実践例 例:「アプリ内でリソース作成しないケースはリンクにしたいんですよね。リンクということでボタンのスタイルも変えたい!」
実装1)Discriminated Unionとして定義する タグによって判別可能な型にすることで、取りうる値を正しい状態に制限することができる 実践例
実装2)Compositionで実装する Buttonの取りうる状態が複数あるのが複雑さの原因。親は渡された関数を呼び出すことだけ担うようにする 実践例
実装2)Compositionで実装する 実践例 スタイルを使いまわしたいのであれば、Buttonにスタイルとアイコンを部分適用することもできる href、label Buttonの取りうる状態が複数あるのが複雑さの原因。親は渡された関数を呼び出すことだけ担うようにする
Make Impossible States Impossible を意識してReactのPropsを設計しよう 実現方法はReact / TypeScriptにおいては一般的なもの 大事なのは考え方・視点で、適切なPropsかどうかの1つの指針として使うとよいと思っています!
ありがとうございました!