ローコードSaaSのUXを向上させるためのTypeScript

TSKaigi Kansai 2024での登壇資料です。

スピーカーノート
https://zenn.dev/taroro28/scraps/83e2a3cd6ea2b4

Transcript

1. ローコードSaaSのUXを向上させるためのTypeScript 2024-11-16 TSKaigi Kansai 2024 株式会社ベースマキナ ⼤⻄太郎(taro)
2. 自己紹介 • ⼤⻄太郎 • taro( @taroro_tarotaro) • 株式会社ベースマキナのソフトウェアエンジニア • ローコードで管理画⾯を作れるサービスを作ってます ⾃⼰紹介
3. ⾃⼰紹介 ベースマキナでのTSの活⽤事例の話をします！
4. UXを向上させるためのTypeScriptとは？
5. UXを向上させるための TypeScriptとは？ • ベースマキナはローコードで管理画⾯を作成するサービス • ⼀部ユーザーがJavaScriptで設定を書く機能が存在する UXを向上させるためのTypeScriptとは？
6. UXを向上させるための TypeScriptとは？ UXを向上させるためのTypeScriptとは？ JavaScriptで加⼯
7. UXを向上させるためのTypeScriptとは？ アクション：APIやSQLなどを呼び出す処理 JavaScriptでワークフローを作成できる機能
8. UXを向上させるための TypeScriptとは？ コードの⼊⼒や設定を楽にする機能の例 • 値や関数の型がわかる • ⼊⼒補完が効く • 誤った関数の使い⽅を間違えてしまった時にバリデーションが効く • エラーメッセージがわかりやすい →こういったUX改善のためにどのようにTSの機能やライブラリを使っているかの話 UXを向上させるためのTypeScriptとは？
9. セッションの流れ • JavaScriptのコードエディターをTypeScriptの機能で便利にする • JavaScriptの関数の引数の値が型通りかをバリデーションする • まとめ 各話題は、やりたいことに対してどうやって実現したかの流れで進みます。 ぜひやりたいことのところで、みなさんならどうするか考えてみてください！ 僕らとは違う⽅法やもっとよくできる点などあれば懇親会などで教えてください！ セッションの流れ
10. JavaScriptのコードエディターを TypeScriptの機能で便利にする
11. JavaScriptのコードエディターを TypeScriptの機能で便利にする • どんなJavaScriptのコードを設定する機能なのか？ • Monaco Editor • default exportされる関数の引数にフォームの状態から⽣成した型をつける • 組み込み関数に型をつける • ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターをTypeScriptの機能で便利にする
12. どんなJavaScriptのコードを設定する機能なのか？
13. どんなJavaScriptのコードを設定する機能なのか？ JavaScriptアクション：JavaScriptでワークフローを作成できる機能 JavaScriptのコードエディターをTypeScriptの機能で便利にする ワークフローの処理
14. どんなJavaScriptのコードを設定する機能なのか？ JavaScriptアクション：JavaScriptでワークフローを作成できる機能 JavaScriptのコードエディターをTypeScriptの機能で便利にする
15. JavaScriptのコードエディターをTypeScriptの機能で便利にする パラメーター： ワークフローの実⾏時のフォームの⼊⼒値 パラメーターはJavaScriptのコードと⼀緒に設定する
16. どんなJavaScriptのコードを設定する機能なのか？ JavaScriptのコードエディターをTypeScriptの機能で便利にする 組み込み関数
17. Monaco Editor
18. Monaco Editor • Microsoftが開発している • ブラウザ上で動作するコードエディター JavaScriptのコードエディターをTypeScriptの機能で便利にする https://github.com/microsoft/monaco-editor
19. Monaco Editor Monaco Editorを使っているサービス • TS Playground • Google CloudのBigQueryのエディター JavaScriptのコードエディターをTypeScriptの機能で便利にする
20. Monaco Editor 今回のセッションにおいては、VSCodeと同様に • カーソルのホバーで型情報が表⽰される • 型による補完が効く エディターを使⽤しているという理解でOK！ JavaScriptのコードエディターをTypeScriptの機能で便利にする
21. default exportされる関数の引数に フォームの状態から⽣成した型をつける
22. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする 引数に型をつけたい
23. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする フォームの設定内容から型が決まる
24. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする 型にもageが追加される age（数値）を追加
25. JavaScriptのコードエディターを TypeScriptの機能で便利にする JavaScriptの関数にどうやって型をつけるか？
26. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする JSDocで型をつける
27. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする https://nextjs.org/docs/app/api-reference/next-config-js https://vite.dev/config
28. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
29. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする importしたHandler型をつける
30. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
31. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
32. JavaScriptのコードエディターを TypeScriptの機能で便利にする https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.typescript.LanguageServiceDefaults.html#addExtraLib
33. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
34. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする フォームの設定内容から型を⽣成する
35. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする 泥臭く⽂字列結合で型を⽣成
36. default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
37. JavaScriptのコードエディターを TypeScriptの機能で便利にする フォームの状態に応じた型が効くようになった！🎉
38. 組み込み関数に型をつける
39. 組み込み関数に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする 組み込み関数
40. 組み込み関数に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
41. 組み込み関数に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
42. 組み込み関数に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
43. ユーザーが作成したデータを元に型をつける
44. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする ユーザー体験的に⾜りない点がある
45. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする ユーザーが作成したアクションのデータに基づいて渡せる値に制限がある
46. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする アクションのIDまたは識別⼦ • ID: ⾃動⽣成のユニーク値 • 識別⼦: 任意に設定できるユニーク値
47. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
48. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする • ⼊⼒ミスを防げる • ID/識別⼦を確認する⼿間を減らす
49. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする アクションのパラメーター • キー(string): パラメーターの名前 • 値(any): パラメーターの値
50. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする executeActionで呼び出している アクション(create-user)の パラメータの設定
51. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
52. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする 第1引数のID/識別⼦を⼊⼒すると、第2引数のパラメーターの型が推論される！ • ⼊⼒ミスを防げる • アクションの設定を確認する⼿間を減らす
53. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
54. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
55. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
56. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
57. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
58. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする データベースに保存されているデータから型を⽣成する • バックエンドとの通信: GraphQL • データ取得&状態管理ライブラリ: Apollo Client
59. ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
60. ユーザーが作成したデータを元に型をつける その他、型に影響するパラメータの設定 • ⼊⼒が必須でなければオプショナルにする • 必須でも初期値があればオプショナルにする • パラメータが存在しない場合は第2引数をneverにする JavaScriptのコードエディターを TypeScriptの機能で便利にする
61. JavaScriptのコードエディターを TypeScriptの機能で便利にする ユーザーが作成したデータに応じた型が効くようになった！🎉
62. エディターの話のまとめ
63. まとめ • JSDocの@typeでTypeScriptのようにJavaScriptに型をつけられる • ローコードサービスでは、フォームの状態やデータベースの値から動的に型を ⽣成し、型情報やエディターの補完でユーザー体験を向上させている JavaScriptのコードエディターを TypeScriptの機能で便利にする
64. JavaScriptの関数の引数の値が型通りかを バリデーションする
65. JavaScriptの関数の引数の値が型通りかをバリデーションする • 組み込み関数のバリデーションとは？ • JavaScriptのコードと組み込み関数が実⾏される流れ • 組み込み関数の引数が型通りの値かどうかのバリデーション • 可変⻑引数のバリデーション • 省略可能な引数のバリデーション • エラーメッセージをわかりやすくする JavaScriptの関数の引数の値が型通りかをバリデーションする
66. 組み込み関数のバリデーションとは？
67. JavaScriptの関数の引数の値が型通りかをバリデーションする JavaScriptの関数の引数の値が型通りかをバリデーションする エディター上で型がついていてもあくまで実⾏するのはJavaScript
68. JavaScriptの関数の引数の値が型通りかをバリデーションする JavaScriptの関数の引数の値が型通りかをバリデーションする stringの引数に数値を渡してしまっている
69. JavaScriptのコードと組み込み関数が実⾏される流れ
70. JavaScriptのコードと組み込み関数が実行される流れ JavaScriptの関数の引数の値が型通りかをバリデーションする Web Frontend Main Backend JSExecutor
71. JavaScriptのコードと組み込み関数が実行される流れ JavaScriptの関数の引数の値が型通りかをバリデーションする Web Frontend Main Backend JSExecutor 画⾯のフォームから ワークフローを実⾏
72. JavaScriptのコードと組み込み関数が実行される流れ JavaScriptの関数の引数の値が型通りかをバリデーションする Web Frontend Main Backend JSExecutor DBからJSコードを 取得して送信
73. JavaScriptのコードと組み込み関数が実行される流れ JavaScriptの関数の引数の値が型通りかをバリデーションする Web Frontend Main Backend JSExecutor モジュールなどの後に default exportされた関数を 実⾏
74. JavaScriptのコードと組み込み関数が実行される流れ JavaScriptの関数の引数の値が型通りかをバリデーションする Web Frontend Main Backend JSExecutor 実⾏結果を返す 結果を返す
75. JavaScriptの関数の引数の値が型通りかをバリデーションする 組み込み関数はTypeScriptで実装
76. 組み込み関数の引数が型通りの値かどうかのバリデーション
77. 組み込み関数の引数が型通りの値かどうかのバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする • 処理に⼊る前に、引数が型通りの値かどうかを検証したい • 組み込み関数は複数あり今後も増えるので共通のバリデーション機構にしたい • できるだけただのTypeScriptの関数と近い体験で実装できるようにしたい
78. 組み込み関数の引数が型通りの値かどうかのバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする 組み込み関数 引数をバリデーションする zodのスキーマ
79. 組み込み関数の引数が型通りの値かどうかのバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする https://zod.dev
80. 組み込み関数の引数が型通りの値かどうかのバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする バリデーション後の値の型を推論できる
81. JavaScriptの関数の引数の値が型通りかをバリデーションする
82. JavaScriptの関数の引数の値が型通りかをバリデーションする
83. JavaScriptの関数の引数の値が型通りかをバリデーションする
84. JavaScriptの関数の引数の値が型通りかをバリデーションする
85. JavaScriptの関数の引数の値が型通りかをバリデーションする
86. JavaScriptの関数の引数の値が型通りかをバリデーションする stringの引数に数値を渡してしまっている
87. JavaScriptの関数の引数の値が型通りかをバリデーションする stringの引数に数値を渡してしまっている エラーメッセージは、 終盤にわかりやすくします！
88. 可変⻑引数のバリデーション
89. 可変長引数のバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする ※この組み込み関数はサンプルのため実在しません
90. JavaScriptの関数の引数の値が型通りかをバリデーションする
91. JavaScriptの関数の引数の値が型通りかをバリデーションする 可変長引数のバリデーション
92. JavaScriptの関数の引数の値が型通りかをバリデーションする
93. 省略可能な引数のバリデーション
94. JavaScriptの関数の引数の値が型通りかをバリデーションする zodのスキーマで 省略可能な引数をどう表現するか？
95. JavaScriptの関数の引数の値が型通りかをバリデーションする 可変⻑引数にする…？
96. JavaScriptの関数の引数の値が型通りかをバリデーションする
97. 省略可能な引数のバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする
98. JavaScriptの関数の引数の値が型通りかをバリデーションする 第3引数を省略
99. JavaScriptの関数の引数の値が型通りかをバリデーションする 複数のスキーマで 省略可能な引数を作れるようにした
100. 省略可能な引数のバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする スキーマに対応した関数のユニオン型が推論される
101. JavaScriptの関数の引数の値が型通りかをバリデーションする
102. JavaScriptの関数の引数の値が型通りかをバリデーションする Mapped Typesで、スキーマの配列を関数のユニオン型に変換
103. JavaScriptの関数の引数の値が型通りかをバリデーションする
104. JavaScriptの関数の引数の値が型通りかをバリデーションする スキーマの配列のインデックス: そのスキーマの型を使った関数
105. JavaScriptの関数の引数の値が型通りかをバリデーションする スキーマの配列から、各スキーマを使った関数のユニオン型に変換できる
106. JavaScriptの関数の引数の値が型通りかをバリデーションする 引数の値と 同じ⻑さのスキーマを探す
107. JavaScriptの関数の引数の値が型通りかをバリデーションする 同じ⻑さのスキーマで バリデーション
108. JavaScriptの関数の引数の値が型通りかをバリデーションする 最⻑のスキーマで バリデーション
109. JavaScriptの関数の引数の値が型通りかをバリデーションする 省略可能な引数も 表現できるようになった！
110. JavaScriptの関数の引数の値が型通りかをバリデーションする
111. JavaScriptの関数の引数の値が型通りかをバリデーションする
112. JavaScriptの関数の引数の値が型通りかをバリデーションする 同じ⻑さの異なるスキーマにも対応
113. JavaScriptの関数の引数の値が型通りかをバリデーションする インターセクション型に変更が必要
114. エラーメッセージをわかりやすくする
115. JavaScriptの関数の引数の値が型通りかをバリデーションする stringの引数に数値を渡してしまっている
116. JavaScriptの関数の引数の値が型通りかをバリデーションする
117. エラーメッセージをわかりやすくする JavaScriptの関数の引数の値が型通りかをバリデーションする
118. エラーメッセージをわかりやすくする JavaScriptの関数の引数の値が型通りかをバリデーションする ただ全てのメソッドの全てエラータイプに設定するのは⾮現実的…
119. JavaScriptの関数の引数の値が型通りかをバリデーションする https://github.com/aiji42/zod-i18n
120. JavaScriptの関数の引数の値が型通りかをバリデーションする
121. JavaScriptの関数の引数の値が型通りかをバリデーションする
122. JavaScriptの関数の引数の値が型通りかをバリデーションする satisfiesは本当に便利…
123. JavaScriptの関数の引数の値が型通りかをバリデーションする pathでエラーの位置がわかる
124. JavaScriptの関数の引数の値が型通りかをバリデーションする 泥臭く⽂字列結合でエラーメッセージを⽣成
125. JavaScriptの関数の引数の値が型通りかをバリデーションする エラーメッセージがわかりやすくなった！🎉
126. バリデーションの話のまとめ
127. まとめ JavaScriptのコードエディターを TypeScriptの機能で便利にする • zodのtupleを使うとJSの関数の引数が型通りかをバリデーションできる • TypeScriptの柔軟な型の表現⼒と型推論のおかげで、通常のTSの関数を実装す るような体験で、バリデーションが適⽤された組み込み関数を実装できる
128. 最後に
129. 最後に 最後に • ベースマキナではエディターの補完やバリデーションで、ユーザー体験のため にTypeScriptを活⽤している • ユーザーにJSを書いてもらう機能をTSを活⽤して作るのは⾯⽩い • 最終的には泥臭い実装で型やエラーメッセージを⽣成している🔥 泥臭い部分も含めてローコードサービス特有のTSを使った開発はとても⾯⽩い！ （ベースマキナのブースもあるので、ぜひお越しください！）
130. ありがとうございました！