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
ユーザーインターフェースを作る時、データのリストを扱うことがよくあります。この演習では、<button> マークアップを何度も繰り返し、その度に色を変えていますが、まだ追加するものがあります。
手間暇かけてコピー、ペースト、編集する代わりに、最初の button 以外を取り除き、そして each ブロックを使用します:
App
<div>
{#each colors as color}
<button
style="background: red"
aria-label="red"
aria-current={selected === 'red'}
onclick={() => selected = 'red'}
></button>
{/each}
</div>式(この場合は
colors)には、任意の iterable や配列に似たオブジェクトにすることができます。言い換えると、Array.fromが使用できるならなんでも良いということです。
こうする場合、"red" の代わりに color 変数を使用する必要があります:
App
<div>
{#each colors as color}
<button
style="background: {color}"
aria-label={color}
aria-current={selected === color}
onclick={() => selected = color}
></button>
{/each}
</div>第2引数として現在の index をこのように取得することができます。
App
<div>
{#each colors as color, i}
<button
style="background: {color}"
aria-label={color}
aria-current={selected === color}
onclick={() => selected = color}
>{i + 1}</button>
{/each}
</div>previous next
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script>
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
let selected = $state(colors[0]);
</script>
<h1 style="color: {selected}">Pick a colour</h1><div>
<button
style="background: red"
aria-label="red"
aria-current={selected === 'red'} onclick={() => selected = 'red'}></button>
<button
style="background: orange"
aria-label="orange"
aria-current={selected === 'orange'} onclick={() => selected = 'orange'}></button>
<button
style="background: yellow"
aria-label="yellow"
aria-current={selected === 'yellow'} onclick={() => selected = 'yellow'}></button>
<!-- TODO add the rest of the colours -->
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<style>
h1 {font-size: 2rem;
font-weight: 700;
transition: color 0.2s;
}
div {display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 5px;
max-width: 400px;
}
button {aspect-ratio: 1;
border-radius: 50%;
background: var(--color, #fff);
transform: translate(-2px,-2px);
filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
transition: all 0.1s;
color: black;
font-weight: 700;
font-size: 2rem;
}
button[aria-current="true"] {transform: none;
filter: none;
box-shadow: inset 3px 3px 4px rgba(0,0,0,0.2);
}
</style>