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

Slide 1

Slide 1 text

ローコードSaaSのUXを向上させるためのTypeScript 2024-11-16 TSKaigi Kansai 2024 株式会社ベースマキナ⼤⻄太郎(taro)

Slide 2

Slide 2 text

自己紹介 ● ⼤⻄太郎 ● taro( @taroro_tarotaro) ● 株式会社ベースマキナのソフトウェアエンジニア ● ローコードで管理画⾯を作れるサービスを作ってます⾃⼰紹介

Slide 3

Slide 3 text

⾃⼰紹介ベースマキナでのTSの活⽤事例の話をします！

Slide 4

Slide 4 text

UXを向上させるためのTypeScriptとは？

Slide 5

Slide 5 text

UXを向上させるための TypeScriptとは？ ● ベースマキナはローコードで管理画⾯を作成するサービス ● ⼀部ユーザーがJavaScriptで設定を書く機能が存在する UXを向上させるためのTypeScriptとは？

Slide 6

Slide 6 text

UXを向上させるための TypeScriptとは？ UXを向上させるためのTypeScriptとは？ JavaScriptで加⼯

Slide 7

Slide 7 text

UXを向上させるためのTypeScriptとは？アクション：APIやSQLなどを呼び出す処理 JavaScriptでワークフローを作成できる機能

Slide 8

Slide 8 text

UXを向上させるための TypeScriptとは？コードの⼊⼒や設定を楽にする機能の例 ● 値や関数の型がわかる ● ⼊⼒補完が効く ● 誤った関数の使い⽅を間違えてしまった時にバリデーションが効く ● エラーメッセージがわかりやすい →こういったUX改善のためにどのようにTSの機能やライブラリを使っているかの話 UXを向上させるためのTypeScriptとは？

Slide 9

Slide 9 text

セッションの流れ ● JavaScriptのコードエディターをTypeScriptの機能で便利にする ● JavaScriptの関数の引数の値が型通りかをバリデーションする ● まとめ各話題は、やりたいことに対してどうやって実現したかの流れで進みます。ぜひやりたいことのところで、みなさんならどうするか考えてみてください！僕らとは違う⽅法やもっとよくできる点などあれば懇親会などで教えてください！セッションの流れ

Slide 10

Slide 10 text

JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 11

Slide 11 text

JavaScriptのコードエディターを TypeScriptの機能で便利にする ● どんなJavaScriptのコードを設定する機能なのか？ ● Monaco Editor ● default exportされる関数の引数にフォームの状態から⽣成した型をつける ● 組み込み関数に型をつける ● ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターをTypeScriptの機能で便利にする

Slide 12

Slide 12 text

どんなJavaScriptのコードを設定する機能なのか？

Slide 13

Slide 13 text

どんなJavaScriptのコードを設定する機能なのか？ JavaScriptアクション：JavaScriptでワークフローを作成できる機能 JavaScriptのコードエディターをTypeScriptの機能で便利にするワークフローの処理

Slide 14

Slide 14 text

どんなJavaScriptのコードを設定する機能なのか？ JavaScriptアクション：JavaScriptでワークフローを作成できる機能 JavaScriptのコードエディターをTypeScriptの機能で便利にする

Slide 15

Slide 15 text

JavaScriptのコードエディターをTypeScriptの機能で便利にするパラメーター：ワークフローの実⾏時のフォームの⼊⼒値パラメーターはJavaScriptのコードと⼀緒に設定する

Slide 16

Slide 16 text

どんなJavaScriptのコードを設定する機能なのか？ JavaScriptのコードエディターをTypeScriptの機能で便利にする組み込み関数

Slide 17

Slide 17 text

Monaco Editor

Slide 18

Slide 18 text

Monaco Editor ● Microsoftが開発している ● ブラウザ上で動作するコードエディター JavaScriptのコードエディターをTypeScriptの機能で便利にする https://github.com/microsoft/monaco-editor

Slide 19

Slide 19 text

Monaco Editor Monaco Editorを使っているサービス ● TS Playground ● Google CloudのBigQueryのエディター JavaScriptのコードエディターをTypeScriptの機能で便利にする

Slide 20

Slide 20 text

Monaco Editor 今回のセッションにおいては、VSCodeと同様に ● カーソルのホバーで型情報が表⽰される ● 型による補完が効くエディターを使⽤しているという理解でOK！ JavaScriptのコードエディターをTypeScriptの機能で便利にする

Slide 21

Slide 21 text

default exportされる関数の引数にフォームの状態から⽣成した型をつける

Slide 22

Slide 22 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする引数に型をつけたい

Slide 23

Slide 23 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にするフォームの設定内容から型が決まる

Slide 24

Slide 24 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする型にもageが追加される age（数値）を追加

Slide 25

Slide 25 text

JavaScriptのコードエディターを TypeScriptの機能で便利にする JavaScriptの関数にどうやって型をつけるか？

Slide 26

Slide 26 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする JSDocで型をつける

Slide 27

Slide 27 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする https://nextjs.org/docs/app/api-reference/next-config-js https://vite.dev/config

Slide 28

Slide 28 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 29

Slide 29 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする importしたHandler型をつける

Slide 30

Slide 30 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 31

Slide 31 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 32

Slide 32 text

JavaScriptのコードエディターを TypeScriptの機能で便利にする https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.typescript.LanguageServiceDefaults.html#addExtraLib

Slide 33

Slide 33 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 34

Slide 34 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にするフォームの設定内容から型を⽣成する

Slide 35

Slide 35 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする泥臭く⽂字列結合で型を⽣成

Slide 36

Slide 36 text

default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 37

Slide 37 text

JavaScriptのコードエディターを TypeScriptの機能で便利にするフォームの状態に応じた型が効くようになった！🎉

Slide 38

Slide 38 text

組み込み関数に型をつける

Slide 39

Slide 39 text

組み込み関数に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする組み込み関数

Slide 40

Slide 40 text

組み込み関数に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 41

Slide 41 text

組み込み関数に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 42

Slide 42 text

組み込み関数に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 43

Slide 43 text

ユーザーが作成したデータを元に型をつける

Slide 44

Slide 44 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にするユーザー体験的に⾜りない点がある

Slide 45

Slide 45 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にするユーザーが作成したアクションのデータに基づいて渡せる値に制限がある

Slide 46

Slide 46 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にするアクションのIDまたは識別⼦ ● ID: ⾃動⽣成のユニーク値 ● 識別⼦: 任意に設定できるユニーク値

Slide 47

Slide 47 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 48

Slide 48 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする ● ⼊⼒ミスを防げる ● ID/識別⼦を確認する⼿間を減らす

Slide 49

Slide 49 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にするアクションのパラメーター ● キー(string): パラメーターの名前 ● 値(any): パラメーターの値

Slide 50

Slide 50 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする executeActionで呼び出しているアクション(create-user)のパラメータの設定

Slide 51

Slide 51 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 52

Slide 52 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする第1引数のID/識別⼦を⼊⼒すると、第2引数のパラメーターの型が推論される！ ● ⼊⼒ミスを防げる ● アクションの設定を確認する⼿間を減らす

Slide 53

Slide 53 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 54

Slide 54 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 55

Slide 55 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 56

Slide 56 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 57

Slide 57 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 58

Slide 58 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にするデータベースに保存されているデータから型を⽣成する ● バックエンドとの通信: GraphQL ● データ取得&状態管理ライブラリ: Apollo Client

Slide 59

Slide 59 text

ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 60

Slide 60 text

ユーザーが作成したデータを元に型をつけるその他、型に影響するパラメータの設定 ● ⼊⼒が必須でなければオプショナルにする ● 必須でも初期値があればオプショナルにする ● パラメータが存在しない場合は第2引数をneverにする JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 61

Slide 61 text

JavaScriptのコードエディターを TypeScriptの機能で便利にするユーザーが作成したデータに応じた型が効くようになった！🎉

Slide 62

Slide 62 text

エディターの話のまとめ

Slide 63

Slide 63 text

まとめ ● JSDocの@typeでTypeScriptのようにJavaScriptに型をつけられる ● ローコードサービスでは、フォームの状態やデータベースの値から動的に型を⽣成し、型情報やエディターの補完でユーザー体験を向上させている JavaScriptのコードエディターを TypeScriptの機能で便利にする

Slide 64

Slide 64 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 65

Slide 65 text

JavaScriptの関数の引数の値が型通りかをバリデーションする ● 組み込み関数のバリデーションとは？ ● JavaScriptのコードと組み込み関数が実⾏される流れ ● 組み込み関数の引数が型通りの値かどうかのバリデーション ● 可変⻑引数のバリデーション ● 省略可能な引数のバリデーション ● エラーメッセージをわかりやすくする JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 66

Slide 66 text

組み込み関数のバリデーションとは？

Slide 67

Slide 67 text

JavaScriptの関数の引数の値が型通りかをバリデーションする JavaScriptの関数の引数の値が型通りかをバリデーションするエディター上で型がついていてもあくまで実⾏するのはJavaScript

Slide 68

Slide 68 text

JavaScriptの関数の引数の値が型通りかをバリデーションする JavaScriptの関数の引数の値が型通りかをバリデーションする stringの引数に数値を渡してしまっている

Slide 69

Slide 69 text

JavaScriptのコードと組み込み関数が実⾏される流れ

Slide 70

Slide 70 text

JavaScriptのコードと組み込み関数が実行される流れ JavaScriptの関数の引数の値が型通りかをバリデーションする Web Frontend Main Backend JSExecutor

Slide 71

Slide 71 text

JavaScriptのコードと組み込み関数が実行される流れ JavaScriptの関数の引数の値が型通りかをバリデーションする Web Frontend Main Backend JSExecutor 画⾯のフォームからワークフローを実⾏

Slide 72

Slide 72 text

JavaScriptのコードと組み込み関数が実行される流れ JavaScriptの関数の引数の値が型通りかをバリデーションする Web Frontend Main Backend JSExecutor DBからJSコードを取得して送信

Slide 73

Slide 73 text

JavaScriptのコードと組み込み関数が実行される流れ JavaScriptの関数の引数の値が型通りかをバリデーションする Web Frontend Main Backend JSExecutor モジュールなどの後に default exportされた関数を実⾏

Slide 74

Slide 74 text

JavaScriptのコードと組み込み関数が実行される流れ JavaScriptの関数の引数の値が型通りかをバリデーションする Web Frontend Main Backend JSExecutor 実⾏結果を返す結果を返す

Slide 75

Slide 75 text

JavaScriptの関数の引数の値が型通りかをバリデーションする組み込み関数はTypeScriptで実装

Slide 76

Slide 76 text

組み込み関数の引数が型通りの値かどうかのバリデーション

Slide 77

Slide 77 text

組み込み関数の引数が型通りの値かどうかのバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする ● 処理に⼊る前に、引数が型通りの値かどうかを検証したい ● 組み込み関数は複数あり今後も増えるので共通のバリデーション機構にしたい ● できるだけただのTypeScriptの関数と近い体験で実装できるようにしたい

Slide 78

Slide 78 text

組み込み関数の引数が型通りの値かどうかのバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする組み込み関数引数をバリデーションする zodのスキーマ

Slide 79

Slide 79 text

組み込み関数の引数が型通りの値かどうかのバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする https://zod.dev

Slide 80

Slide 80 text

組み込み関数の引数が型通りの値かどうかのバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションするバリデーション後の値の型を推論できる

Slide 81

Slide 81 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 82

Slide 82 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 83

Slide 83 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 84

Slide 84 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 85

Slide 85 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 86

Slide 86 text

JavaScriptの関数の引数の値が型通りかをバリデーションする stringの引数に数値を渡してしまっている

Slide 87

Slide 87 text

JavaScriptの関数の引数の値が型通りかをバリデーションする stringの引数に数値を渡してしまっているエラーメッセージは、終盤にわかりやすくします！

Slide 88

Slide 88 text

可変⻑引数のバリデーション

Slide 89

Slide 89 text

可変長引数のバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする ※この組み込み関数はサンプルのため実在しません

Slide 90

Slide 90 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 91

Slide 91 text

JavaScriptの関数の引数の値が型通りかをバリデーションする可変長引数のバリデーション

Slide 92

Slide 92 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 93

Slide 93 text

省略可能な引数のバリデーション

Slide 94

Slide 94 text

JavaScriptの関数の引数の値が型通りかをバリデーションする zodのスキーマで省略可能な引数をどう表現するか？

Slide 95

Slide 95 text

JavaScriptの関数の引数の値が型通りかをバリデーションする可変⻑引数にする…？

Slide 96

Slide 96 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 97

Slide 97 text

省略可能な引数のバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 98

Slide 98 text

JavaScriptの関数の引数の値が型通りかをバリデーションする第3引数を省略

Slide 99

Slide 99 text

JavaScriptの関数の引数の値が型通りかをバリデーションする複数のスキーマで省略可能な引数を作れるようにした

Slide 100

Slide 100 text

省略可能な引数のバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションするスキーマに対応した関数のユニオン型が推論される

Slide 101

Slide 101 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 102

Slide 102 text

JavaScriptの関数の引数の値が型通りかをバリデーションする Mapped Typesで、スキーマの配列を関数のユニオン型に変換

Slide 103

Slide 103 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 104

Slide 104 text

JavaScriptの関数の引数の値が型通りかをバリデーションするスキーマの配列のインデックス: そのスキーマの型を使った関数

Slide 105

Slide 105 text

JavaScriptの関数の引数の値が型通りかをバリデーションするスキーマの配列から、各スキーマを使った関数のユニオン型に変換できる

Slide 106

Slide 106 text

JavaScriptの関数の引数の値が型通りかをバリデーションする引数の値と同じ⻑さのスキーマを探す

Slide 107

Slide 107 text

JavaScriptの関数の引数の値が型通りかをバリデーションする同じ⻑さのスキーマでバリデーション

Slide 108

Slide 108 text

JavaScriptの関数の引数の値が型通りかをバリデーションする最⻑のスキーマでバリデーション

Slide 109

Slide 109 text

JavaScriptの関数の引数の値が型通りかをバリデーションする省略可能な引数も表現できるようになった！

Slide 110

Slide 110 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 111

Slide 111 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 112

Slide 112 text

JavaScriptの関数の引数の値が型通りかをバリデーションする同じ⻑さの異なるスキーマにも対応

Slide 113

Slide 113 text

JavaScriptの関数の引数の値が型通りかをバリデーションするインターセクション型に変更が必要

Slide 114

Slide 114 text

エラーメッセージをわかりやすくする

Slide 115

Slide 115 text

JavaScriptの関数の引数の値が型通りかをバリデーションする stringの引数に数値を渡してしまっている

Slide 116

Slide 116 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 117

Slide 117 text

エラーメッセージをわかりやすくする JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 118

Slide 118 text

エラーメッセージをわかりやすくする JavaScriptの関数の引数の値が型通りかをバリデーションするただ全てのメソッドの全てエラータイプに設定するのは⾮現実的…

Slide 119

Slide 119 text

JavaScriptの関数の引数の値が型通りかをバリデーションする https://github.com/aiji42/zod-i18n

Slide 120

Slide 120 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 121

Slide 121 text

JavaScriptの関数の引数の値が型通りかをバリデーションする

Slide 122

Slide 122 text

JavaScriptの関数の引数の値が型通りかをバリデーションする satisﬁesは本当に便利…

Slide 123

Slide 123 text

JavaScriptの関数の引数の値が型通りかをバリデーションする pathでエラーの位置がわかる

Slide 124

Slide 124 text

JavaScriptの関数の引数の値が型通りかをバリデーションする泥臭く⽂字列結合でエラーメッセージを⽣成

Slide 125

Slide 125 text

JavaScriptの関数の引数の値が型通りかをバリデーションするエラーメッセージがわかりやすくなった！🎉

Slide 126

Slide 126 text

バリデーションの話のまとめ

Slide 127

Slide 127 text

まとめ JavaScriptのコードエディターを TypeScriptの機能で便利にする ● zodのtupleを使うとJSの関数の引数が型通りかをバリデーションできる ● TypeScriptの柔軟な型の表現⼒と型推論のおかげで、通常のTSの関数を実装するような体験で、バリデーションが適⽤された組み込み関数を実装できる

Slide 128

Slide 128 text

最後に

Slide 129

Slide 129 text

最後に最後に ● ベースマキナではエディターの補完やバリデーションで、ユーザー体験のためにTypeScriptを活⽤している ● ユーザーにJSを書いてもらう機能をTSを活⽤して作るのは⾯⽩い ● 最終的には泥臭い実装で型やエラーメッセージを⽣成している🔥 泥臭い部分も含めてローコードサービス特有のTSを使った開発はとても⾯⽩い！（ベースマキナのブースもあるので、ぜひお越しください！）

Slide 130

Slide 130 text

ありがとうございました！