Note
この記事はVim 駅伝の 5/23 の記事です。 遅れました。
はじめに
2024年7月8日月曜12時、ポッドキャストラジオ番組「エンジニアの楽園vim-jpラジオ」がAuDee（TOKYO FM）公式番組として配信開始されています。
毎週月曜12時に配信され、毎回ゲストを交えてとても面白い内容になっています。 ぜひ聞いてみてください!
(感想ブログ等々👇) https://blog.tomoya.dev/posts/vim-jp-radio/ https://zenn.dev/takeokunn/articles/20250126133908 https://zenn.dev/vim_jp/articles/vimjpradio22-guest-car https://blog.atusy.net/2024/12/23/vim-jp-radioa-24/ https://blog.atusy.net/2025/05/21/vim-jp-radio-giginet/ https://sizu.me/daiki48/posts/6xf2w79omuef
Note
自分、ryoppippiもゲストとして出演させていただきました。 https://audee.jp/voice/show/95400 https://audee.jp/voice/show/95783
オフィシャルページのアプデについて
約１年前、以下の記事で、Vim-jpラジオのオフィシャルサイトをSvelteKitで作成したことを紹介しました。
/blog/2024-07-22-zenn-e1192d17156a2d-ja
当時からSvelteのバージョンアップとともにどのように内部のコードが変化したかを軽く振り返ってみたいと思います。
Svelte5正式版リリース
2024年10月、Svelte5の正式版がリリースされました。 我々もそれに合わせてSvelteのバージョンを5に上げました。
https://github.com/vim-jp-radio/LP/pull/324
7月からの大きな変更点はなかったので、安心してアップデートできました。
12月の大型アップデート
SvelteKitのReactivity APIの変更
https://github.com/vim-jp-radio/LP/issues/338
2024年12月、Advent of Svelteの期間中に、SvelteKitのReactivity APIがStoreベースからRuneベースに変更されました。 これにより、Svelte5のSyntaxと相性の良い実装が可能になりました。
例えば、prefersReducedMotionというRuneが提供され始めました。これはユーザーの設定に基づいてアニメーションの動作を制御するためのものです。
vim-jpラジオのページでは、prefersReducedMotionがfalseの場合は、背景のアニメーションを無効にするように実装しています。
それまで、prefersReducedMotionは独自に実装していましたが、公式から提供されるようになったので採用しました。
https://svelte.dev/docs/svelte/svelte-motion#prefersReducedMotion https://github.com/vim-jp-radio/LP/pull/343
また、innerWidthやinnerHeightなどのウィンドウサイズを取得するためのRuneも追加されました。
それまでは <svelte:window> に値をバインドすることで値を取得していましたが、これもRuneを使うことでより簡潔に書けるようになりました。 https://svelte.dev/docs/svelte/svelte-reactivity-window https://github.com/vim-jp-radio/LP/pull/341
clsx風のClass API
また、Svelte5では、class属性のバインディングがより強力になりました。 clsxやAstroのclass:listのように、オブジェクトや配列を使ってクラス名を動的に制御できるようになりました。
これにより可読性、記述性が向上しました。
特に条件付きでクラスを適用する場合に便利です。
https://svelte.dev/docs/svelte/class https://github.com/vim-jp-radio/LP/pull/346
Attachments
2025年5月、SvelteのAttachments機能がリリースされました。
これは、HTMLやSvelte Componentがマウント/アンマウントされる際に、特定の処理を実行できる機能です。
React19ではrefへ直接関数を渡すことができるようになりましたが、それによく似た機能です。
<script lang="ts">
import type { Attachment } from 'svelte/attachments';
const myAttachment: Attachment = (element) => {
console.log(element.nodeName); // 'DIV'
return () => {
console.log('cleaning up');
};
};
</script>
<div {@attach myAttachment}>...</div>
以前からSvelteにはuse:ディレクティブが存在していましたが、Attachmentsはより柔軟で強力な機能です。
vim-jpラジオのページでは、背景のアニメーションを表示するcanvas要素に対して、Attachmentsを使ってアニメーションの初期化やクリーンアップを行っています。
それまでは $effect を使ってコンポーネント全体のライフサイクルに依存していましたが、canvas要素に対してAttachmentsを使うことで、実装がより明確になりました。
また、AttachmentsはDOMがマウントされるタイミングで実行されるため、JSが読み込まれているかどうかのチェックも不要になりました。
実際に以下のコードを見比べてみると、定義する変数が減り、Component全体の行数も減っていることがわかります。
今後も積極的にAttachmentsを活用していきたいと思います。
終わりに
この記事はvimの話ではなく、Svelte5の話を中心に書きました。 見た目は7月から一切変わっていませんが、内部のコードは少しずつ進化しています。 また、それに伴い、表示速度もほんの少しずつ向上しています。
vim-jpラジオは毎週月曜12時に配信されており、ゲストを交えた楽しい内容になっています。 ぜひ聞いてみてください！ そして感想をブログやSNSで共有していただけると嬉しいです。