Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ローコードSaaSのUXを向上させるためのTypeScript
Search
taro
November 15, 2024
Programming
1
720
ローコードSaaSのUXを向上させるためのTypeScript
TSKaigi Kansai 2024での登壇資料です。
スピーカーノート
https://zenn.dev/taroro28/scraps/83e2a3cd6ea2b4
taro
November 15, 2024
Tweet
Share
More Decks by taro
See All by taro
GraphQLをServer Componentsで使いたい
taro28
8
2.7k
Sequenceを理解する
taro28
1
220
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
4.2k
状態ってなに?🙃
taro28
2
490
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
6.5k
一口目から美味しいReactのスルメ本🦑
taro28
3
1.4k
T-falってすごい【社内LT】
taro28
1
270
Reactは何を提供するLibraryなのか?
taro28
7
1.5k
Other Decks in Programming
See All in Programming
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
sangunkang
0
2.3k
Vapor Revolution
kazupon
2
2.4k
Modular Monolith Monorepo ~シンプルさを保ちながらmonorepoのメリットを最大化する~
yuisakamoto
10
3.7k
事業成長を爆速で進めてきたプロダクトエンジニアたちの成功談・失敗談
nealle
3
1k
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
140
as(型アサーション)を書く前にできること
marokanatani
10
3k
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
140
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.9k
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
140
subpath importsで始めるモック生活
10tera
0
380
Contemporary Test Cases
maaretp
0
160
CSC509 Lecture 12
javiergs
PRO
0
170
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
How GitHub (no longer) Works
holman
310
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
KATA
mclloyd
29
14k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Raft: Consensus for Rubyists
vanstee
136
6.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Into the Great Unknown - MozCon
thekraken
33
1.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Happy Clients
brianwarren
98
6.7k
Transcript
ローコード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型をつける
default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
JavaScriptのコードエディターを TypeScriptの機能で便利にする https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.typescript.LanguageServiceDefaults.html#addExtraLib
default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする フォームの設定内容から型を⽣成する
default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする 泥臭く⽂字列結合で型を⽣成
default exportされる関数の引数にフォームの状態から生成した型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
JavaScriptのコードエディターを TypeScriptの機能で便利にする フォームの状態に応じた型が効くようになった!🎉
組み込み関数に型をつける
組み込み関数に型をつける 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の機能で便利にする
ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする 第1引数のID/識別⼦を⼊⼒すると、第2引数のパラメーターの型が推論される! • ⼊⼒ミスを防げる • アクションの設定を確認する⼿間を減らす
ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする データベースに保存されているデータから型を⽣成する • バックエンドとの通信: GraphQL • データ取得&状態管理ライブラリ: Apollo
Client
ユーザーが作成したデータを元に型をつける JavaScriptのコードエディターを TypeScriptの機能で便利にする
ユーザーが作成したデータを元に型をつける その他、型に影響するパラメータの設定 • ⼊⼒が必須でなければオプショナルにする • 必須でも初期値があればオプショナルにする • パラメータが存在しない場合は第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の関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする stringの引数に数値を渡してしまっている
JavaScriptの関数の引数の値が型通りかをバリデーションする stringの引数に数値を渡してしまっている エラーメッセージは、 終盤にわかりやすくします!
可変⻑引数のバリデーション
可変長引数のバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする ※この組み込み関数はサンプルのため実在しません
JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする 可変長引数のバリデーション
JavaScriptの関数の引数の値が型通りかをバリデーションする
省略可能な引数のバリデーション
JavaScriptの関数の引数の値が型通りかをバリデーションする zodのスキーマで 省略可能な引数をどう表現するか?
JavaScriptの関数の引数の値が型通りかをバリデーションする 可変⻑引数にする…?
JavaScriptの関数の引数の値が型通りかをバリデーションする
省略可能な引数のバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする 第3引数を省略
JavaScriptの関数の引数の値が型通りかをバリデーションする 複数のスキーマで 省略可能な引数を作れるようにした
省略可能な引数のバリデーション JavaScriptの関数の引数の値が型通りかをバリデーションする スキーマに対応した関数のユニオン型が推論される
JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする Mapped Typesで、スキーマの配列を関数のユニオン型に変換
JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする スキーマの配列のインデックス: そのスキーマの型を使った関数
JavaScriptの関数の引数の値が型通りかをバリデーションする スキーマの配列から、各スキーマを使った関数のユニオン型に変換できる
JavaScriptの関数の引数の値が型通りかをバリデーションする 引数の値と 同じ⻑さのスキーマを探す
JavaScriptの関数の引数の値が型通りかをバリデーションする 同じ⻑さのスキーマで バリデーション
JavaScriptの関数の引数の値が型通りかをバリデーションする 最⻑のスキーマで バリデーション
JavaScriptの関数の引数の値が型通りかをバリデーションする 省略可能な引数も 表現できるようになった!
JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする 同じ⻑さの異なるスキーマにも対応
JavaScriptの関数の引数の値が型通りかをバリデーションする インターセクション型に変更が必要
エラーメッセージをわかりやすくする
JavaScriptの関数の引数の値が型通りかをバリデーションする stringの引数に数値を渡してしまっている
JavaScriptの関数の引数の値が型通りかをバリデーションする
エラーメッセージをわかりやすくする JavaScriptの関数の引数の値が型通りかをバリデーションする
エラーメッセージをわかりやすくする JavaScriptの関数の引数の値が型通りかをバリデーションする ただ全てのメソッドの全てエラータイプに設定するのは⾮現実的…
JavaScriptの関数の引数の値が型通りかをバリデーションする https://github.com/aiji42/zod-i18n
JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする
JavaScriptの関数の引数の値が型通りかをバリデーションする satisfiesは本当に便利…
JavaScriptの関数の引数の値が型通りかをバリデーションする pathでエラーの位置がわかる
JavaScriptの関数の引数の値が型通りかをバリデーションする 泥臭く⽂字列結合でエラーメッセージを⽣成
JavaScriptの関数の引数の値が型通りかをバリデーションする エラーメッセージがわかりやすくなった!🎉
バリデーションの話のまとめ
まとめ JavaScriptのコードエディターを TypeScriptの機能で便利にする • zodのtupleを使うとJSの関数の引数が型通りかをバリデーションできる • TypeScriptの柔軟な型の表現⼒と型推論のおかげで、通常のTSの関数を実装す るような体験で、バリデーションが適⽤された組み込み関数を実装できる
最後に
最後に 最後に • ベースマキナではエディターの補完やバリデーションで、ユーザー体験のため にTypeScriptを活⽤している • ユーザーにJSを書いてもらう機能をTSを活⽤して作るのは⾯⽩い • 最終的には泥臭い実装で型やエラーメッセージを⽣成している🔥 泥臭い部分も含めてローコードサービス特有のTSを使った開発はとても⾯⽩い!
(ベースマキナのブースもあるので、ぜひお越しください!)
ありがとうございました!