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

なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)

Avatar for HIBIKI CUBE HIBIKI CUBE
January 16, 2026
Programming
0
100

 なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)

バックエンドがフルTSではないような構成のときに、バックエンドとの通信を型安全に実現する手法を紹介したスライドです。
SvelteKitとLaravelを組み合わせたパターンを例に取り、ScribeとOpenAPI TSとOpenAPI fetchを使って型安全にバックエンドにリクエストを行います。

この資料はSvelte Japan Offline Meetup #6での登壇資料です。

Avatar for HIBIKI CUBE

HIBIKI CUBE

January 16, 2026
Tweet

More Decks by HIBIKI CUBE

See All by HIBIKI CUBE
SvelteKitで凝ったルーティングをするのが楽しかった話
Avatar for HIBIKI CUBE hibiki_cube
0
100
パスキーでのログインを 実装してみよう！
Avatar for HIBIKI CUBE hibiki_cube
0
1.5k
今日からできる！ はじめてのパスキー認証
Avatar for HIBIKI CUBE hibiki_cube
1
220
ここがおもろい! Swift UI
Avatar for HIBIKI CUBE hibiki_cube
1
79
SvelteKit × Supabaseで オレオレカンバンボード作ってみた
Avatar for HIBIKI CUBE hibiki_cube
2
130

Other Decks in Programming

See All in Programming
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
210
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
640
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
1.1k
JETLS.jl ─ A New Language Server for Julia
Avatar for abap34 abap34
2
480
[AtCoder Conference 2025] LLMを使った業務AHCの上⼿な解き⽅
Avatar for terry-u16 terryu16
6
1k
re:Invent 2025 トレンドからみる製品開発への AI Agent 活用
Avatar for Kohei Yoshikawa yoskoh
0
640
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
210
Deno Tunnel を使ってみた話
Avatar for すずとも kamekyame
0
320
.NET Conf 2025 の興味のあるセッ ションを復習した / dotnet conf 2025 quick recap for backend engineer
Avatar for Tomohisa Takaoka tomohisa
0
110
生成AI時代を勝ち抜くエンジニア組織マネジメント
Avatar for coconala_engineer coconala_engineer
0
39k
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
170
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
5.3k

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
120
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
200
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.8k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k

Transcript

  1. なるべく楽して バックエンドに型をつけたい！ (楽とは言ってない) HIBIKI CUBE @hibiki_cube

  2. SvelteKitでの ページ表示までの処理と 型付けについておさらい

  3. 例えば…

  4. bunx sv create demo

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None

  18. でも、これができるのは load関数の返り値に 型がついているからこそ

  19. マイページ 見せてちょ

  20. サーバーの処理 するやで

  21. ユーザーの データ取ってきて

  22. 型情報もつけて 渡してあげるよ

  23. マイページだよ〜

  24. とはいえ、 プロダクトによっては フルTSではない構成に したいこともある。

  25. None

  26. TSのための型？ こちとらPHPやぞ えぇぇ……

  27. None
  28. None

  29. 例えば…

  30. laravel new demo

  31. None
  32. None
  33. None

  34. curl -s localhost:8000/api/hello | jq . { "message": "Hi!" }

  35. php artisan scribe:generate

  36. None
  37. None
  38. None

  39. bunx openapi-typescript \ openapi.yaml \ -o ./src/lib/api.d.ts

  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None

  48. フルTSではない構成で型安全性を高める • Scribeなどを使って実装からOpenAPI仕様を生成する • OpenAPI仕様があれば、それを使ってTSの型を生成できる • TSの型があれば、それを使って型安全にやりとりができる おわり