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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Monaco Editor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

エディターの話のまとめ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最後に

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

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

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

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

More Decks by taro

Other Decks in Programming

Featured

Transcript