Skip to main content

Svelteの中心には、DOMを(例えば、イベントに応じて)アプリケーションの状態(state)に同期し続けさせるための強力な リアクティビティ(reactivity) システムがあります。

count 宣言をリアクティブにするには、$state(...) で値をラップします。

App
let count = $state(0);

これは Rune と呼ばれ、count が通常の変数ではないことを Svelte に伝えるためのものです。 Rune は関数のように見えますが、実際には違います — Svelte を使用する場合、これは言語の一部です。

あとは increment を実装するだけです:

App
function increment() {
	count += 1;
}

Edit this page on GitHub

previous next
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
	let count = 0;
 
	function increment() {
		// TODO implement
	}
</script>
 
<button onclick={increment}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>