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

SvelteKitで凝ったルーティングをするのが楽しかった話

Avatar for HIBIKI CUBE HIBIKI CUBE
July 18, 2025
Technology
0
6

 SvelteKitで凝ったルーティングをするのが楽しかった話

Svelte Japan Offline Meetup #4で登壇した際の資料です。
https://svelte-jp.connpass.com/event/358769/
Avatar for HIBIKI CUBE

HIBIKI CUBE

July 18, 2025
Tweet

More Decks by HIBIKI CUBE

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

Other Decks in Technology

See All in Technology
Data Engineering Study#30 LT資料
Avatar for tetsuroito tetsuroito
1
210
20250708オープンエンドな探索と知識発見
Avatar for Sakana AI sakana_ai
PRO
4
1k
スタックチャン家庭用アシスタントへの道
Avatar for Hiroyuki Kaneko kanekoh
0
120
【あのMCPって、どんな処理してるの？】 AWS CDKでの開発で便利なAWS MCP Servers特集
Avatar for yoshimi0227 yoshimi0227
6
960
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
Avatar for karacoro / からころ tsukuha
1
390
AIでテストプロセス自動化に挑戦する
Avatar for K_SAK sakatakazunori
1
540
三視点LLMによる複数観点レビュー
Avatar for リリカル mhlyc
0
230
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
Avatar for goldfinch3710 flyaahelpguide
0
240
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
Avatar for Masaya Hayashi rinchsan
10
5.1k
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
Avatar for tomoki10 tomoki10
1
670
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
Avatar for John thejetblueairhelpsupport
0
150
無理しない AI 活用サービス / #jazug
Avatar for Kodai Sakabe koudaiii
0
100

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
840
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
990
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Visualization
Avatar for Eitan Lees eitanlees
146
16k

Transcript

  1. SvelteKitで 凝ったルーティングを するのが楽しかった話 HIBIKI CUBE @hibiki_cube

  2. {@render children()}

  3. 突然ですが、 Svelteのプロジェクト を1つ作ってみます

  4. bunx sv create my-app

  5. None
  6. None
  7. None
  8. None

  9. なんとなく 見覚えあるかも… という方！

  10. app.d.tsの 存在を知っていた という方！

  11. app.d.tsを 編集したことがある という方！

  12. SvelteKitで 凝ったルーティングを するのが楽しかった話 HIBIKI CUBE @hibiki_cube

  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None

  30. たとえば…

  31. None
  32. None

  33. let grade = $state('Adventure');

  34. let grade = $state('Adventure'); const price = $derived(getPrice(grade));

  35. None
  36. None
  37. None

  38. やっぱり1コ前の グレードの方がいいかも

  39. None
  40. None

  41. 実装してみる

  42. None
  43. None

  44. http://localhost:5173/adventure http://localhost:5173/g

  45. None

  46. page.params.grade ↓ と間違えないように！

  47. None
  48. None
  49. None
  50. None
  51. None

  52. let activeGrade = $derived(...);

  53. None
  54. None
  55. None
  56. None

  57. SvelteKitで 凝ったルーティングを するのが楽しかった話 HIBIKI CUBE @hibiki_cube Fin!