Svelteの使い方を解説！【基本編】 – イベント・リアクティブ変数

コンポーネントに機能を付与する方法

みなさん、こんにちは。どんぶラッコです。

前回の記事では、変数の宣言方法とコンポーネントの作成方法について学習しました。

参考Svelteのな使い方を解説！【基本編】 – 変数の宣言・コンポーネントの読み込みラッコWeb

今回は、イベントハンドリングの方法と、データ追加、配列の追加方法について学習していきます。

このページで学べること

イベントハンドリングの方法
Vue.jsで言うところの computed , watch のような役割をする変数・ステートメントの宣言方法

それでは、早速いってみましょう！

※この記事は Svelte のプロジェクトが作成済みという前提で進みます

まだ Svelte のプロジェクトを作っていない方は、以下の導入記事からプロジェクトを作成して読み進めてみてください！

参考2021年注目のJavaSciprtフレームワーク、Svelteとは？ – 解説とセットアップ手順ラッコWeb

イベント処理

まずは、イベント処理についてです。イベントとは、ボタンをクリックしたら実行される…のように、何かしらのアクションが行われた際に発火する処理のことですね。

今回はボタンがクリックされたら発火する仕組みを書いてみましょう。

src/App.svelte を以下のように書き換えてみてください。

src/App.svelte

<script>
	let count = 0
	const onClick = () => {count += 1}
</script>

<main>
	<button on:click={onClick}>click</button>
	<p>{count}回</p>
</main>

ここでのポイントは 7行目に記述されている <button> 要素です。この中に on:click={onClick} という記述がありますね。ここがイベントを設定している箇所になります。

Svelteではイベントを発行する際、

on:イベント名={メソッド}

の形でイベントを定義します。今回は click イベントを拾いたいので on:click と記載されているわけですね。

例えば、マウスの移動を取得したい場合は on:mousemove になりますね。

そして、 on:click={onClick} の onClick は 3行目で作成しているメソッドですね。

3行目

	const onClick = () => {count += 1}

onClick() メソッドが走ると count 変数に1加算される、というとてもわかりやすい内容です。

なので、このコードを実行すると、ボタンをクリックするたびに count 変数の値が１ずつ増えていく、という仕組みが構築されるわけです。

リアクティブな変数・ステートメント

リアクティブな変数とは

Vue.jsを学習されたことがある方は computed や watch のようなものを作る、と考えていただければOKです。

例えば、先程のボタンを押すとcountが1ずつ増えていく仕組みを作った時に、countを2倍した結果も一緒に表示したい、のように count の値が変更されるのと連動する計算結果を表示させたいとします。

２倍の結果を double という変数に格納するとしたら

count が 1 の時は double の値は 2
count が 2 の時は double の値は 4
count が 3 の時は double の値は 6
…

という具合です。

リアクティブな変数の宣言方法

このような挙動を実現したい場合、countの値が変更されたかを監視しておいて、変更されたらdoubleの値を更新する…のような仕組みが必要になってきますよね？

それを実現する仕組みが Svelteに用意されています。

それがこの書き方です。

リアクティブな変数の宣言方法

$: 変数名 = 代入されるべき値

では、実際にコードで確認してみましょう。 App.svelte に以下を追記してください。

App.svelte

<script>
	let count = 0
	const onClick = () => {count += 1}
	$: double = count * 2 // 追記
</script>

<main>
	<button on:click={onClick}>click</button>
	<p>{count}回</p>
	<p>{count} を2倍にすると {double}</p><!-- 追記 -->
</main>

$: double = count*2 という記述が追加されました。 $: を記述することで、 count 変数の更新を検知してくれるようになるわけですね。

実際に挙動を確認すると、 count を２倍した数字が double に連動されて表示されることを確認いただけます。

複数行の処理をリアクティブにしたい場合

先ほどはリアクティブな変数を宣言しましたが、ステートメント(処理)そのものをリアクティブに監視することもできます。の場合は、 {} で囲むことで複数行について監視を行うことができます。

例えば、このような記述を追加してみてください。

App.svelte

<script>
	let count = 0
	const onClick = () => {count += 1}
	$: double = count * 2
        // 追記開始 
	$: {
		alert(double + 'です')
		alert(double + 'だよ')
	}
	// 追記終了
</script>

<main>
	<button on:click={onClick}>click</button>
	<p>{count}回</p>
	<p>{count} を2倍にすると {double}</p>
</main>

すると、今回の追記部分では変数は宣言していませんが、 {} 内の変数についてリアクティブな状態になります。なので double の値が更新されたら alert() 処理が実行されるようになるのです。