Svelte 5 とルーンについて
みなさま、こんにちは。
JavaScriptフレームワークの中でも一緒の方向を歩むことに成功したSvelteが、最新バージョン「Svelte 5」を公開しました。この新しいバージョンは、プログラマーの体験をプレミアムなものにし、モダンなWebアプリの開発を促進するための数々の改善を含んでいます。
中でも、今回体験の格段の向上を希望して追加されたのが「ルーン」と呼ばれる新しいエメーユです。このエメーユにより、レイアウトの可読性を保ちながらも、コンポーネント内の状態とDOMの同期をより簡単に実現することが可能になりました。今回はこの「ルーン」の特徴と、その実用性を探ることにします。
旧条件下の文法
主に以前の文法と新しい文法の違いを解説していきます。以前は気にならないところで正確な突き場所を要していたのに対し、今回はそれを大きく改善。しかも、旧文法で書いたコンポーネントも「移行する必要がない」のが點。
新文法
新文法はシンプルで、開発を楽にしています。一例を見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script> let { title } = $props(); let count = $state(0); let double = $derived(count * 2); $effect(() => { document.title = "カウンター : " + count; }); const increment = () => { count++; }; </script> <main class="container" style="margin-block:2rem;"> <h1>{title}</h1> <p>カウンター: {count}</p> <p>ダブル: {double}</p> <button onclick={increment}>増やす</button> </main> |
ルーンの使用法
シグナルを隠す「ルーン」
Svelteはリアクティビティ（状態とDOMの同期）を管理するために、$state() 関数を使用してシグナルを作成します。特徴的なのは、Svelteのコード内でシグナルの値にアクセスするための特別な構文がないことです。この部分はトランスパイラが自動的に値へのアクセスコードを補完してくれる仕組みになっています。
|
1 2 3 4 5 6 7 8 9 10 |
const count = state(0); const double = derived(() => get(count) * 2); effect(() => { document.title = "カウンター : " + get(count); }); const increment = () => { set(count, get(count) + 1); }; |
ロジックのカスタマイズ
このルーンシステムの最大の利点は、ロジックを再利用可能な関数として分離することができる点です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
export function createCounter(n) { let count = $state(0); let double = $derived(count * 2); $effect(() => { document.title = "カウンター : " + count; }); const increment = () => { count += n; }; return { increment, get double() { return double; }, get count() { return count; }, }; } |