React_TypeScript_LT.pdf

Transcript

1. React + TypeScript 小技紹介 営業製作所 白石 卓馬
2. 会社紹介：営業製作所 ・設立 2020年4月 ・本社 大阪 (肥後橋駅 徒歩3分) ・従業員数 約150名 (2024年4月時点) ・目的 日本の製造業を支える ・特徴 泥臭い中にこそ本質がある
3. 自己紹介 ・なまえ 白石 卓馬 (gizm000) ・出身地 大阪 ・職種 ソフトウェアエンジニア ・経歴 SIer → 受託 → SaaS
4. 営業製作所のざっくり技術スタック ・フロントエンド：Next.js ・サーバーサイド：NestJS ・IasC：Terraform (CDKじゃないヨ) 業務で使う 80%以上がTypeScript
5. 今日は 駆け抜ける 10分LT
6. 時間はみだしたら ごめんなさい
7. 便利な小技を ２つ 紹介します
8. スライドは SpeakerDeckに あります
9. 後から見返したい 人はSpeakerDeck から見てください
10. Awaitable Modal
11. Awaitable Modal まずは振る舞いを 確認していきます
12. Awaitable Modal 入力フォームがあり...
13. Awaitable Modal クリック！
14. Awaitable Modal 確認モーダルが出る
15. Awaitable Modal クリック！
16. Awaitable Modal 保存に成功！
17. どこにでもある 確認ダイアログ Awaitable Modal
18. Awaitable Modal 保存処理は サーバーへの リクエスト
19. Awaitable Modal つまり 非同期関数
20. Awaitable Modal 確認ダイアログは 多数の場所で 使われる
21. Awaitable Modal 確認ダイアログは 汎用的に作るべき
22. Awaitable Modal 非同期 x 汎用的 確認ダイアログ
23. Awaitable Modal Awaitable Modal
24. Awaitable Modal まずは普通の よくある実装例
25. Awaitable Modal
26. Awaitable Modal 保存処理を書いたあとに ...
27. Awaitable Modal ダイアログを表示する
28. Awaitable Modal 実際の挙動は 表示 → 保存
29. Awaitable Modal 処理の記述は 保存 → 表示
30. Awaitable Modal 不自然な処理で 認知的負荷が高い
31. Awaitable Modal 自然な流れで 表現できないか？
32. Awaitable Modal
33. Awaitable Modal
34. Awaitable Modal 確認ダイアログを表示してから ...
35. Awaitable Modal 保存処理 🥳
36. Awaitable Modal 実際の挙動は 表示 → 保存
37. Awaitable Modal 処理の記述も 表示 → 保存
38. Awaitable Modal 認知的負荷を 下げるために
39. Awaitable Modal Promiseを 使いこなす🔥
40. Awaitable Modal 1. 確認ダイアログ表示時に Promise を生成 a. resolve, rejectをダイアログのstateに保存 b. Promiseを解決せずに返却 2. Cancel / Confirm クリック時に resolve / rejectを呼出 a. ここでPromiseが解決されるのでawaitが実現できる
41. Awaitable Modal 1. 確認ダイアログ表示時に Promise を生成 a. resolve, rejectをダイアログのstateに保存 b. Promiseを解決せずに返却 2. Cancel / Confirm クリック時に resolve / rejectを呼出 a. ここでPromiseが解決されるのでawaitが実現できる
42. Awaitable Modal
43. Awaitable Modal Promiseを解決させずに resolve/rejectを保存
44. Awaitable Modal 1. 確認ダイアログ表示時に Promise を生成 a. resolve, rejectをダイアログのstateに保存 b. Promiseを解決せずに返却 2. Cancel / Confirm クリック時に resolve / rejectを呼出 a. ここでPromiseが解決されるのでawaitが実現できる
45. Awaitable Modal
46. Awaitable Modal Confirm押下時にPromiseを解決
47. Awaitable Modal こんなダイアログ ができると
48. Awaitable Modal 呼出元のコードがナチュラルになる！！！
49. Awaitable Modal どうでしょうか？
50. Awaitable Modal 認知的負荷は 下がりましたか？
51. Awaitable Modal 呼び出し元は 自然になったけど
52. Awaitable Modal ダイアログ実装が 逆に難しい＞＜
53. Awaitable Modal ダイアログは何回 呼び出しますか？
54. Awaitable Modal N回出現する 呼び出し元の 認知的負荷を下げる
55. Awaitable Modal 1箇所の認知的負 荷が高いことを 許容する
56. Awaitable Modal 何事も トレードオフ 適切な方を選択
57. RenderProps
58. RenderProps わりとメジャーな デザインパターン
59. RenderProps ダイアログ関連で よく使うので 取り上げてみる
60. RenderProps
61. RenderProps modalの状態を呼出元が管理している 😕
62. RenderProps modalに渡してあげている 😕 modalの状態を呼出元が管理している 😕
63. RenderProps modalの状態を 呼出元が管理は 不自然では？
64. RenderProps modalの状態は modalが管理する
65. RenderProps
66. RenderProps modalの状態を呼出元は知らない 🥰
67. RenderProps buttonクリックでどうやって modalを表示する ?
68. RenderProps modalの状態を buttonが使えるよう にする
69. RenderProps AwaitableModal はコールバックを 消したが
70. RenderProps RenderPropsは コールバックを 活用する
71. Awaitable Modal 1. modalがStateを管理する a. ふつうにuseStateでもuseReducerでもなんでもよい b. Stateを操作するコンポーネントを引数で受け取る ただしStateを引数としたコールバック関数でもらう 2. 呼出元はStateを操作するコンポーネントを返すRender関数 を引数に渡す (=RenderProps)
72. RenderProps 字面にすると ややこしいので コードで見る
73. RenderProps
74. RenderProps modalが状態を持つ
75. RenderProps 状態を操作するコンポーネントを コールバック関数で受け取る modalが状態を持つ
76. RenderProps 状態を操作するコンポーネントを コールバック関数で受け取る modalが状態を持つ 引数のコールバック関数を実行することで レンダリングする
77. RenderProps Stateを操作する関数を引数で受け取れる
78. RenderProps 呼出元で状態を 持たなくてよい
79. RenderProps けどやっぱり ちょっと複雑？
80. RenderProps Stateの管理量 modalの利用回数
81. RenderProps トレードオフ 状況に応じて 適切に使おう
82. ご清聴ありがとうご ざいました
83. さいごに ・絶賛採用活動中です❗ → X, LinkedIn, Green, LAPRAS, … 　ご応募お待ちしております 😆