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
React_TypeScript_LT.pdf
Search
gizm000
July 05, 2024
0
130
React_TypeScript_LT.pdf
gizm000
July 05, 2024
Tweet
Share
More Decks by gizm000
See All by gizm000
NestJSを実運用してみて.pdf
gizm000
1
73
XStateでReactに秩序を与えたい
gizm000
0
900
営業製作所_採用ピッチ資料_202407
gizm000
1
1.4k
もう、例外投げたくないねん neverthrow
gizm000
1
340
サーバーサイドもTSにしたらモノレポになった.pdf
gizm000
2
130
レガシー業界を乗り越える
gizm000
1
26
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
What's in a price? How to price your products and services
michaelherold
243
12k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Code Review Best Practice
trishagee
65
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Building Adaptive Systems
keathley
38
2.3k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Why Our Code Smells
bkeepers
PRO
335
57k
Transcript
React + TypeScript 小技紹介 営業製作所 白石 卓馬
会社紹介:営業製作所 ・設立 2020年4月 ・本社 大阪 (肥後橋駅 徒歩3分) ・従業員数 約150名 (2024年4月時点)
・目的 日本の製造業を支える ・特徴 泥臭い中にこそ本質がある
自己紹介 ・なまえ 白石 卓馬 (gizm000) ・出身地 大阪 ・職種 ソフトウェアエンジニア ・経歴
SIer → 受託 → SaaS
営業製作所のざっくり技術スタック ・フロントエンド:Next.js ・サーバーサイド:NestJS ・IasC:Terraform (CDKじゃないヨ) 業務で使う 80%以上がTypeScript
今日は 駆け抜ける 10分LT
時間はみだしたら ごめんなさい
便利な小技を 2つ 紹介します
スライドは SpeakerDeckに あります
後から見返したい 人はSpeakerDeck から見てください
Awaitable Modal
Awaitable Modal まずは振る舞いを 確認していきます
Awaitable Modal 入力フォームがあり...
Awaitable Modal クリック!
Awaitable Modal 確認モーダルが出る
Awaitable Modal クリック!
Awaitable Modal 保存に成功!
どこにでもある 確認ダイアログ Awaitable Modal
Awaitable Modal 保存処理は サーバーへの リクエスト
Awaitable Modal つまり 非同期関数
Awaitable Modal 確認ダイアログは 多数の場所で 使われる
Awaitable Modal 確認ダイアログは 汎用的に作るべき
Awaitable Modal 非同期 x 汎用的 確認ダイアログ
Awaitable Modal Awaitable Modal
Awaitable Modal まずは普通の よくある実装例
Awaitable Modal
Awaitable Modal 保存処理を書いたあとに ...
Awaitable Modal ダイアログを表示する
Awaitable Modal 実際の挙動は 表示 → 保存
Awaitable Modal 処理の記述は 保存 → 表示
Awaitable Modal 不自然な処理で 認知的負荷が高い
Awaitable Modal 自然な流れで 表現できないか?
Awaitable Modal
Awaitable Modal
Awaitable Modal 確認ダイアログを表示してから ...
Awaitable Modal 保存処理 🥳
Awaitable Modal 実際の挙動は 表示 → 保存
Awaitable Modal 処理の記述も 表示 → 保存
Awaitable Modal 認知的負荷を 下げるために
Awaitable Modal Promiseを 使いこなす🔥
Awaitable Modal 1. 確認ダイアログ表示時に Promise を生成 a. resolve, rejectをダイアログのstateに保存 b.
Promiseを解決せずに返却 2. Cancel / Confirm クリック時に resolve / rejectを呼出 a. ここでPromiseが解決されるのでawaitが実現できる
Awaitable Modal 1. 確認ダイアログ表示時に Promise を生成 a. resolve, rejectをダイアログのstateに保存 b.
Promiseを解決せずに返却 2. Cancel / Confirm クリック時に resolve / rejectを呼出 a. ここでPromiseが解決されるのでawaitが実現できる
Awaitable Modal
Awaitable Modal Promiseを解決させずに resolve/rejectを保存
Awaitable Modal 1. 確認ダイアログ表示時に Promise を生成 a. resolve, rejectをダイアログのstateに保存 b.
Promiseを解決せずに返却 2. Cancel / Confirm クリック時に resolve / rejectを呼出 a. ここでPromiseが解決されるのでawaitが実現できる
Awaitable Modal
Awaitable Modal Confirm押下時にPromiseを解決
Awaitable Modal こんなダイアログ ができると
Awaitable Modal 呼出元のコードがナチュラルになる!!!
Awaitable Modal どうでしょうか?
Awaitable Modal 認知的負荷は 下がりましたか?
Awaitable Modal 呼び出し元は 自然になったけど
Awaitable Modal ダイアログ実装が 逆に難しい><
Awaitable Modal ダイアログは何回 呼び出しますか?
Awaitable Modal N回出現する 呼び出し元の 認知的負荷を下げる
Awaitable Modal 1箇所の認知的負 荷が高いことを 許容する
Awaitable Modal 何事も トレードオフ 適切な方を選択
RenderProps
RenderProps わりとメジャーな デザインパターン
RenderProps ダイアログ関連で よく使うので 取り上げてみる
RenderProps
RenderProps modalの状態を呼出元が管理している 😕
RenderProps modalに渡してあげている 😕 modalの状態を呼出元が管理している 😕
RenderProps modalの状態を 呼出元が管理は 不自然では?
RenderProps modalの状態は modalが管理する
RenderProps
RenderProps modalの状態を呼出元は知らない 🥰
RenderProps buttonクリックでどうやって modalを表示する ?
RenderProps modalの状態を buttonが使えるよう にする
RenderProps AwaitableModal はコールバックを 消したが
RenderProps RenderPropsは コールバックを 活用する
Awaitable Modal 1. modalがStateを管理する a. ふつうにuseStateでもuseReducerでもなんでもよい b. Stateを操作するコンポーネントを引数で受け取る ただしStateを引数としたコールバック関数でもらう 2.
呼出元はStateを操作するコンポーネントを返すRender関数 を引数に渡す (=RenderProps)
RenderProps 字面にすると ややこしいので コードで見る
RenderProps
RenderProps modalが状態を持つ
RenderProps 状態を操作するコンポーネントを コールバック関数で受け取る modalが状態を持つ
RenderProps 状態を操作するコンポーネントを コールバック関数で受け取る modalが状態を持つ 引数のコールバック関数を実行することで レンダリングする
RenderProps Stateを操作する関数を引数で受け取れる
RenderProps 呼出元で状態を 持たなくてよい
RenderProps けどやっぱり ちょっと複雑?
RenderProps Stateの管理量 modalの利用回数
RenderProps トレードオフ 状況に応じて 適切に使おう
ご清聴ありがとうご ざいました
さいごに ・絶賛採用活動中です❗ → X, LinkedIn, Green, LAPRAS, … ご応募お待ちしております 😆