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

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

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

 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
1.1k
今日からできる！ はじめてのパスキー認証
Avatar for HIBIKI CUBE hibiki_cube
1
170
ここがおもろい! Swift UI
Avatar for HIBIKI CUBE hibiki_cube
1
69
SvelteKit × Supabaseで オレオレカンバンボード作ってみた
Avatar for HIBIKI CUBE hibiki_cube
2
110

Other Decks in Technology

See All in Technology
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
Avatar for よしたけ yoshitake945
0
220
iPhone Eye Tracking機能から学ぶやさしいアクセシビリティ
Avatar for Kaito Fujimura fujiyamaorange
0
200
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
Avatar for kubell kubell_hr
0
120
Grafana Meetup Japan Vol. 6
Avatar for Taisei Ito kaedemalu
1
200
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
Avatar for hacusk hacusk
1
140
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖！ -キャラクターの魅力を最大限にファンに届けるためのこだわり-
Avatar for gree_tech gree_tech
PRO
0
430
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
Avatar for yhana yhana
2
250
MCPで変わる Amebaデザインシステム「Spindle」の開発
Avatar for Ameba Spindle spindle
PRO
2
2k
RSCの時代にReactとフレームワークの境界を探る
Avatar for uhyo uhyo
8
1.4k
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
Avatar for Sansan R&D sansan_randd
1
110
Automating Web Accessibility Testing with AI Agents
Avatar for South maminami373
0
320
AIのグローバルトレンド2025 #scrummikawa / global ai trend
Avatar for kyonmm kyonmm
PRO
0
120

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.5k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
11
1.1k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
339
57k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
185
54k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
790
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k

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!