はじめに
SvelteはWebページのUIを構築するためのフレームワークです。コンパイルによりプレーンなJavaScriptを生成し、実行時にSvelte固有の実装を利用しないことで、実行ファイルのサイズを小さくできる特徴があります。
本連載ではSvelteの活用方法を、順を追って説明していきます。前回はSvelteでWebページを実装するプロジェクトの基本的な構成や使い方と、SvelteにおけるWebページの構成単位であるコンポーネントの実装方法を説明しました。
今回は、コンポーネントにおいてデータの変更をWebページに反映させるのに利用できる、Svelteのリアクティブ機能とバインディング機能を説明します。これらの機能により、シンプルな記述で、データの変更を動的にWebページに反映するよう実装できます。
対象読者
- Webページのファイルサイズをより小さくしたい方
- Svelteで実装していくイメージを把握したい方
- 他のフレームワークで利用できる算出プロパティやバインディング機能をSvelteでも利用したい方
必要な環境
サンプルコードは、以下の環境で動作を確認しています。
- Windows 11
- Svelte 4.2.19
- SvelteKit 2.5.27
- Node.js v20.17.0 64bit版
- Microsoft Edge 128.0.2739.79
サンプルコードを実行するには、サンプルのフォルダーでnpm installコマンドを実行してライブラリをダウンロード後、npm run devコマンドを実行して、http://localhost:5173/をWebブラウザーで表示します。
Svelteのリアクティブ機能
Svelteでは、データの変更に応じてWebページの更新や特定の処理を行うリアクティブ機能が利用できます。以下で説明していきます。
変数の内容から動的に計算される別の変数を宣言できるリアクティブ宣言
「リアクティブ宣言」は、ある変数をもとに、常に一定のルールで計算される別の変数を宣言できる機能です（Vue.jsでの算出プロパティに相当します）。図1のサンプルでは、ボタンを押すたびに1ずつ増加するカウンターに対して、常に2倍の値を同時に画面に表示します。
図1を表示するWebページ全体のコンポーネントはリスト1の通りです。
<script lang="ts">
let count: number = 0;
// リアクティブ宣言 ...（1）
$: doubled = count * 2;
const increment = () => {
count += 1;
};
</script>
<button on:click={increment}>
count is {count}
</button>
<!-- リアクティブ宣言された変数を参照 ...（2）-->
<div>doubled is {doubled}</div>
カウンターの変数countをもとに、（1）でcountの2倍に対応する変数doubledを宣言しています。この変数は（2）の通り、通常の変数と同じ記述で参照できます。
変数の変更時に実行する処理を定義
リアクティブ宣言で利用した$: の記法を利用すると、変数の変更時に実行される処理を記述できます。カウンターを2つに増やした、図2のサンプルで説明します。
図2を表示するWebページ全体のコンポーネントはリスト2の通りです。
<script lang="ts">
let count1: number = 0;
let count2: number = 0;
// カウント変更時の処理を記述 ...（1）
$: console.log(`1つの処理: count1 is ${count1}`);
// 複数の処理を記述する場合 ...（2）
$: {
console.log(`複数処理: count1 is ${count1}`);
console.log(`複数処理: count2 is ${count2}`);
}
// 条件分岐を記述する場合 ...（3）
$: if (count1 >= 3) {
console.log('count1は3以上');
}
const increment1 = () => {
count1 += 1;
};
const increment2 = () => {
count2 += 1;
};
</script>
<button on:click={increment1}>
count1 is {count1}
</button>
<button on:click={increment2}>
count2 is {count2}
</button>
変数の変更時に実行する処理は、（1）の通り$: に続けて記述します。処理が複数行にわたるときは（2）の通り{}で囲んで記述します。（3）の通り、処理の実行に条件（ここではcount1が3以上）を指定することもできます。
これらの処理は、処理に含まれる変数が変更されたときに実行されます。例えばcount1が増えた時にコンソールログを参照すると、処理内でcount1を参照する（1）～（3）すべての処理が動作することがわかります。
一方、count2が増えた時のコンソールログを参照すると、処理内にcount2を含む（2）の処理だけが動作することがわかります。（1）と（3）は処理内でcount2を参照しないため動作しません。
このように$: の記法による処理は、処理中に参照される変数が変更されたときだけ実行されるよう、Svelteが自動的に制御してくれます。
