Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for taro taro
November 15, 2024
Programming
2
950

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

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

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

taro

November 15, 2024
Tweet

More Decks by taro

See All by taro
VitestのIn-Source Testingが便利
Avatar for taro taro28
8
2.4k
ローコードサービスの進化のためのモノレポ移行
Avatar for taro taro28
1
380
GraphQLをServer Componentsで使いたい
Avatar for taro taro28
8
3k
Sequenceを理解する
Avatar for taro taro28
1
250
propsのバケツリレー対策でGlobal_Stateを使うその前に
Avatar for taro taro28
11
4.6k
状態ってなに？🙃
Avatar for taro taro28
2
540
ReactのSuspenseを使った非同期処理のエラーハンドリング
Avatar for taro taro28
9
7k
一口目から美味しいReactのスルメ本🦑
Avatar for taro taro28
3
1.5k
T-falってすごい【社内LT】
Avatar for taro taro28
1
300

Other Decks in Programming

See All in Programming
In geheimer Mission: AI Agents entwickeln
Avatar for Jörg Neumann joergneumann
0
100
RuboCop: Modularity and AST Insights
Avatar for Koichi ITO koic
2
2.5k
Flutterでllama.cppをつかってローカルLLMを試してみた
Avatar for sakuraidayo sakuraidayo
0
120
状態と共に暮らす：ステートフルへの挑戦
Avatar for ypresto ypresto
3
1.1k
監視 やばい
Avatar for syossan27 syossan27
12
10k
Dissecting and Reconstructing Ruby Syntactic Structures
Avatar for ydah ydah
3
2k
Browser and UI #2 HTML/ARIA
Avatar for ken7253 ken7253
2
170
設計の本質：コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
Avatar for nrs nrslib
10
3.7k
Bedrock×MCPで社内ブログ執筆文化を育てたい！
Avatar for Har1101 har1101
7
1.4k
Empowering Developers with HTML-Aware ERB Tooling @ RubyKaigi 2025, Matsuyama, Ehime
Avatar for Marco Roth marcoroth
2
960
flutter_kaigi_mini_4.pdf
Avatar for Hiroki Nobuta nobu74658
0
140
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
Avatar for Philip Schwarz philipschwarz
PRO
0
160

Featured

See All Featured
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.3k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
54
5.5k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.3k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
It's Worth the Effort
Avatar for 3n 3n
184
28k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
47
2.7k

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. ありがとうございました！

OSZAR »