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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for HIBIKI CUBE HIBIKI CUBE
July 18, 2025
Technology
130
0

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

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

Avatar for HIBIKI CUBE

HIBIKI CUBE

July 18, 2025

More Decks by HIBIKI CUBE

See All by HIBIKI CUBE
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
180
パスキーでのログインを 実装してみよう！
Avatar for HIBIKI CUBE hibiki_cube
0
1.9k
今日からできる！ はじめてのパスキー認証
Avatar for HIBIKI CUBE hibiki_cube
1
270
ここがおもろい! Swift UI
Avatar for HIBIKI CUBE hibiki_cube
1
110
SvelteKit × Supabaseで オレオレカンバンボード作ってみた
Avatar for HIBIKI CUBE hibiki_cube
2
170

Other Decks in Technology

See All in Technology
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
Avatar for 高玉 広和 / TAKATAMA Hirokazu takatama
4
1.8k
AWSシリコン最前線 〜AI時代のチップ選択を読み解く〜
Avatar for Hiroshi Tokoyo htokoyo
1
180
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
50k
タクシーアプリ『GO』の実践的データ活用
Avatar for GO Inc. dev mot_techtalk
3
170
トークン数だけでは測れない — Claude Code 組織展開の効果検証から学んだこと
Avatar for Masaki Kubota makikub
0
130
【Gen-AX】20260530開催_JJUG CCC 2026 Spring
Avatar for Gen-AX株式会社 genax
0
430
AgentGatewayを試してみたかった
Avatar for t-kikuchi tkikuchi
0
120
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.9k
AI駆動開発が変える、大規模開発の前提 ーHuman in the Loop から Human on the Loop へ / AIE2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
25
15k
ABEMA の Datadog × OTel 基盤、 中から見るか？ 外から見るか？
Avatar for tetsuya28 tetsuya28
0
110
サイバーセキュリティ概論 / Introduction to Cybersecurity
Avatar for Kenji Saito ks91
PRO
0
170
Unlocking the Apps
Avatar for Tim Perry pimterry
0
250

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
480
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
800
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.3k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.3k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.2k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
840
Between Models and Reality
Avatar for mayunak mayunak
4
330

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!