Basic Svelte
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
Svelteの中心には、DOMを(例えば、イベントに応じて)アプリケーションの状態(state)に同期し続けさせるための強力な リアクティビティ(reactivity) システムがあります。
count
宣言をリアクティブにするには、$state(...)
で値をラップします。
App
let count = $state(0);
これは Rune と呼ばれ、count
が通常の変数ではないことを Svelte に伝えるためのものです。 Rune は関数のように見えますが、実際には違います — Svelte を使用する場合、これは言語の一部です。
あとは increment
を実装するだけです:
App
function increment() {
count += 1;
}
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>