---
title: "Vim-jp ラジオ オフィシャルサイトの目に見えないアプデ履歴"
date: '2025-05-25'
isPublished: true
lang: 'ja'
---

> [!NOTE]
> この記事は[Vim 駅伝](https://vim-jp.org/ekiden/)の 5/23 の記事です。
> 遅れました。

# はじめに

2024年7月8日月曜12時、ポッドキャストラジオ番組「[ エンジニアの楽園vim-jpラジオ ](https://vim-jp-radio.com/)」がAuDee（TOKYO FM）公式番組として配信開始されています。

https://vim-jp-radio.com/

毎週月曜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`へ直接関数を渡すことができるようになりましたが、それによく似た機能です。

```html
<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:`](fhttps://svelte.dev/docs/svelte/use)ディレクティブが存在していましたが、Attachmentsはより柔軟で強力な機能です。

vim-jpラジオのページでは、背景のアニメーションを表示するcanvas要素に対して、Attachmentsを使ってアニメーションの初期化やクリーンアップを行っています。
それまでは `$effect` を使ってコンポーネント全体のライフサイクルに依存していましたが、canvas要素に対してAttachmentsを使うことで、実装がより明確になりました。
また、AttachmentsはDOMがマウントされるタイミングで実行されるため、JSが読み込まれているかどうかのチェックも不要になりました。
実際に以下のコードを見比べてみると、定義する変数が減り、Component全体の行数も減っていることがわかります。

https://github.com/vim-jp-radio/LP/pull/354/files#diff-fd133074abe47babd99d30f37ba97dead318cf5f8f141747cedf1f3c0cedc90b

Before:
https://github.com/vim-jp-radio/LP/blob/952ff425cfa098abc5ade08a8b0f2158a0a11be4/src/lib/Background/Background.svelte#L21-L81

After:
https://github.com/vim-jp-radio/LP/blob/13f083ac356c93640eb7a122195ce108e928efbf/src/lib/Background/Background.svelte#L22-L68

今後も積極的にAttachmentsを活用していきたいと思います。

# 終わりに

この記事はvimの話ではなく、Svelte5の話を中心に書きました。
見た目は7月から一切変わっていませんが、内部のコードは少しずつ進化しています。
また、それに伴い、表示速度もほんの少しずつ向上しています。

vim-jpラジオは毎週月曜12時に配信されており、ゲストを交えた楽しい内容になっています。
ぜひ聞いてみてください！
そして感想をブログやSNSで共有していただけると嬉しいです。