🧊

Svelte Japan Offline Meetup #5 に行ってきたメモ #sveltejapan

せっかく東京にいたので！

+page.server.tsって結局なにを置けばいいんだ・・・？ by @shiro_333

資料は見つけたら

わざわざ愛知から、初登壇のために来ました！

  • SvelteKitのドキュメントは丁寧だが、最初はわからなかった
  • あれこれ書いてたら巨大になった
    • 名前付きActionでいっぱいに
    • リダイレクトするようにしてみたりあれこれ試行錯誤してた
  • いわゆる”コントローラー”だと理解するとすっきりした
    • ただのREST APIとも違う
    • Fatにならないようにしたいね
  • 余談: Remote functionsでも検証できると気付いた
    • DDDのドメインとしても使おうと思えばできそうではある

便利なSvelte 5 ESLintルール by @baseballyama_

資料は見つけたら

Svelteのコアチームで、ESLintプラグインのメンテしてます。

RemoteFunctionを使ったコロケーション by @_mkazutaka

RemoteFunctionを使ったコロケーション - Speaker Deck https://speakerdeck.com/mkazutaka/remotefunctionwoshi-tutakorokesiyon

株式会社エクスプラザのCTOです！

  • form要素を使いたいが、Superformsだとコードが複雑に
  • Remote Functionsだ！
    • コンポーネント単位で欲しい情報を取得できる
    • つまりはコロケーション
  • GraphQLのFragmentや、Relayのようにできる
    • 子が欲しいデータを親が知らずに済む
  • 個別に分けたformから、個別の.remote.tsを呼べる
    • +page.svelteを経由しないでいい
    • 他のコンポーネントとも干渉しない
  • Claude Skillsとして、テンプレ登録しておくと便利

Remote Functions by @dominikg.dev

dominikg/remote-functions-japan-2025 https://github.com/dominikg/remote-functions-japan-2025

SvelteおよびViteのコアメンバーの方！

  • Remote Functionsについて
  • まだexperimentalだよ！
    • 本番には入れないでほしいけど、フィードバックは歓迎
    • SvelteとSvelteKitと、2つのフラグで有効化する
  • .remote.jsか.remote.tsで定義する
    • $app/serverのquery()でラップした非同期関数
  • パラメータを、ZodかValibotで検証できる
    • query(v.string(), async (str) => {})
  • TSの型もちゃんと付くようにがんばってる
  • コンパイラがやってることは、そんなに特別ではなくシンプル
    • Vikeをはじめ、他のフレームワークでもやってる
    • RSCのようにもっと大きいことをやってるのもあるけど
  • 不正な呼び出しにも400エラーを返してくれる
    • hooks.server.tsで変えられるけど、推奨しない
  • 複数の呼び出しをbatch()でまとめることもできる
  • クエリは.refresh()が使えて、いつでも再取得できる
    • キャッシュされるけど
  • prerender()もある
  • form()でフォームも簡単に書ける
  • 他にも便利メソッドがいろいろ
  • PageLoadまわりも、Remote Functionsでリライトされるかもしれない
  • ViteConfでの発表もよかったら見てね
    • そのうち投稿されると思うから

LT

Svelte Accesibility on 2025-10-24 by @yamanoku

Svelte Accessibility on 2025-10-24 - yamaScrapbox https://scrapbox.io/yamanoku/Svelte_Accessibility_on_2025-10-24

Svelte MCPの話 by @ryoppippi

資料は作るのを諦めたそうです

  • SvelteのMCPの内部の話をしようかと
  • PostmanでMCPのデバッグするの便利
  • 公開されてるToolsは4つ
    • list-sections
    • get-documentation
    • playground-link
    • svelte-autofixer
  • list-sections
    • ドキュメントのセクションの一覧が取れる
  • get-documentation
    • セクションごとのドキュメントが取れる
  • playground-link
    • 生成したコードでPlaygroundが作れる
  • svelte-autofixer

Svelte Observability by @Yuki_Ishii_Dev

資料は見つけたら

  • Observabilityとは、可観測性
  • SvelteKitはOpenTelemetryに対応してる
  • 送信先をカスタムすることもできる
    • src/instrumentation.server.tsに書く
    • Sentryにも飛ばせるよ

おわりに

明日のVueFes Japanの同じ時間帯に話す3人がここに集ってるという奇跡おきた！

Vue Fes Japan 2025 - Vue Fes Japan 2025 - タイムテーブル https://vuefes.jp/2025/timetable