SvelteのLogic blocksを深く理解する
- 623単語
- 3分
- 02 Jul, 2024
Svelteにおいて、Logic blocksはコンポーネントのレンダリングを制御するための重要なツールです。本記事では、SvelteにおけるLogic blocksの使用方法について詳しく説明します。条件レンダリング、ループレンダリング、テンプレートスロットなどを含み、開発者がより効率的に動的アプリケーションを構築できるようにします。
Logic blocksの種類
1. 条件レンダリング（{#if ...}）
条件レンダリングは、条件に基づいて動的にコンテンツをレンダリングするために使用されます。Svelteは、if、else if、およびelse構文を提供して条件レンダリングを実現します。
例：
1<script>2 let loggedIn = false;3</script>4
5{#if loggedIn}6<p>Welcome back!</p>7{:else}8<p>Please log in.</p>9{/if}10
11<button on:click="{() => loggedIn = !loggedIn}">Toggle Login State</button>2. ループレンダリング（{#each ...}）
ループレンダリングは、配列やオブジェクトを反復処理し、各要素に対応するHTML構造を生成するために使用されます。Svelteは、each構文を提供してループレンダリングを実現します。
例：
1<script>2 let items = ["Apple", "Banana", "Cherry"];3</script>4
5<ul>6 {#each items as item, index}7 <li>{index + 1}: {item}</li>8 {/each}9</ul>10
11<button on:click="{() => items = [...items, 'New Item']}">Add Item</button>3. テンプレートスロット（<slot>）
テンプレートスロットは、コンポーネント内に挿入可能なコンテンツを定義するために使用されます。Svelteは、slot構文を提供してテンプレートスロットを実現します。
例：
1<script>2 import ChildComponent from "./ChildComponent.svelte";3</script>4
5<ChildComponent>6 <p>This is slot content from the parent component.</p>7</ChildComponent>8
9<!-- ChildComponent.svelte -->10<div>11 <h1>Child Component</h1>12 <slot></slot>13</div>Logic blocksの高度な使い方
1. awaitブロック
awaitブロックは、非同期操作の状態を処理するために使用され、thenおよびcatch構文をサポートします。
例：
1<script>2 let promise = fetch("https://jsonplaceholder.typicode.com/posts").then(3 (response) => response.json(),4 );5</script>6
7{#await promise}8<p>Loading...</p>9{:then posts}10<ul>11 {#each posts as post}12 <li>{post.title}</li>13 {/each}14</ul>15{:catch error}16<p>Error: {error.message}</p>17{/await}2. 動的コンポーネント（<svelte:component>）
動的コンポーネントは、条件に基づいて異なるコンポーネントを動的にロードおよびレンダリングするために使用されます。
例：
1<script>2 import ComponentA from "./ComponentA.svelte";3 import ComponentB from "./ComponentB.svelte";4
5 let currentComponent = ComponentA;6</script>7
8<svelte:component this="{currentComponent}" />9
10<button11 on:click="{() => currentComponent = currentComponent === ComponentA ? ComponentB : ComponentA}"12>13 Toggle Component14</button>3. keyブロック
keyブロックは、特定の部分のコンテンツを強制的に再レンダリングするために使用され、通常は複雑なアニメーションや状態変化を処理するために使用されます。
例：
1<script>2 let count = 0;3</script>4
5{#key count}6<p>Keyed content: {count}</p>7{/key}8
9<button on:click="{() => count++}">Increment</button>まとめ
Svelteは、コンポーネントのレンダリング動作を制御するための強力なLogic blocksを提供します。条件レンダリング、ループレンダリング、テンプレートスロット、awaitブロック、動的コンポーネント、およびkeyブロックを使用することで、開発者はより効率的に動的アプリケーションを構築し、ユーザー体験を向上させることができます。
