Svelte特殊タグ（Special tags）とディレクティブの概念と使用詳細
- 1123単語
- 6分
- 03 Jul, 2024
Svelteでは、通常のHTMLタグやコンポーネントタグの他に、特殊なタグ（Special tags）やディレクティブがあり、ヘッダーの処理、コンポーネントの動的読み込み、グローバルイベントのリスニングなど追加機能を提供します。この記事では、Svelteでよく使われる特殊タグとディレクティブ、その使用方法を詳しく説明します。
<svelte:head>
<svelte:head>タグは、コンポーネント内でドキュメントのヘッダー情報（例：タイトル<title>やメタタグ<meta>）を動的に変更するために使用されます。Svelteコンポーネント内では、<svelte:head>タグは1つしか使用できません。通常、Svelteのライフサイクルフックと共に使用されます。
サンプルコード
1<script>2 import { onMount } from "svelte";3
4 onMount(() => {5 document.querySelector("title").innerText = "Dynamic Title";6 });7</script>8
9<svelte:head>10 <title>Hello Svelte!</title>11 <meta12 name="description"13 content="This is a demo of using Svelte's special tags and directives."14 />15</svelte:head>この例では、<svelte:head>タグを使ってドキュメントのタイトルと説明情報を設定しています。onMountライフサイクルフックでドキュメントのタイトルを動的に変更しています。
<svelte:component>
<svelte:component>タグは、Svelteコンポーネントを動的に読み込み、レンダリングするために使用されます。これにより、実行時に異なるコンポーネントを選択的に読み込み、動的なコンポーネントの切り替えを実現できます。
サンプルコード
1<script>2 import FirstComponent from "./FirstComponent.svelte";3 import SecondComponent from "./SecondComponent.svelte";4
5 let showFirst = true;6
7 function toggleComponent() {8 showFirst = !showFirst;9 }10</script>11
12<button on:click={toggleComponent}>Toggle Component</button>13
14<svelte:component this={showFirst ? FirstComponent : SecondComponent} />この例では、showFirstの値に基づいて、FirstComponentまたはSecondComponentを動的にレンダリングしています。
<svelte:window>
<svelte:window>タグは、コンポーネント内でグローバルウィンドウイベント（例：resize、scrollなど）をリスニングおよび処理するために使用されます。
サンプルコード
1<script>2 function handleResize() {3 console.log("Window resized!");4 }5</script>6
7<svelte:window on:resize={handleResize} />この例では、ウィンドウサイズが変更されると、handleResize関数がトリガーされます。
<svelte:body>
<svelte:body>タグは、コンポーネント内でドキュメントの本文部分（<body>タグ）を動的に変更するために使用され、グローバルスタイルやJavaScriptの動的追加に利用できます。
サンプルコード
1<svelte:body>2 <script>3 console.log('This script will be inserted into the document body.');4 </script>5</svelte:body>この例では、<script>タグ内のコードがドキュメントの<body>タグ内に挿入されます。
<svelte:self>
<svelte:self>タグは、コンポーネント内部で自身を再帰的に参照するために使用され、再帰的な構造を持つコンポーネントの実現に使用されます。
サンプルコード
1<script>2 let count = 0;3
4 function increment() {5 count += 1;6 }7</script>8
9<button on:click={increment}>Increment</button>10
11{#if count < 5}12 <svelte:self />13{/if}14
15<p>Count: {count}</p>この例では、再帰的に自身を参照することで、カウントが5未満の場合に再帰的にコンポーネントを表示するシンプルなカウンターを実現しています。
ディレクティブ：@html, @const, @debug
特殊タグの他に、Svelteにはレンダリング動作の制御やパフォーマンスの最適化などに役立つ便利なディレクティブも提供されています。
@htmlディレクティブ
@htmlディレクティブは、HTMLコードを含む文字列をレンダリングするために使用され、SvelteのデフォルトのHTMLエスケープを回避して、文字列を直接HTMLとしてドキュメントに挿入します。
サンプルコード
1<script>2 let htmlContent = "<strong>Hello Svelte!</strong>";3</script>4
5{@html htmlContent}この例では、htmlContentの内容がHTMLとしてドキュメントに挿入され、“Hello Svelte!”が太字で表示されます。
@constディレクティブ
@constディレクティブは、定数を宣言するために使用され、Svelteがコンパイル時に最適化を行い、実行時の計算オーバーヘッドを減少させることができます。
サンプルコード
1<script>2 export let boxes;3</script>4
5{#each boxes as box}6 {@const area = box.width * box.height}7 {box.width} * {box.height} = {area}8{/each}この例では、@constを使ってローカル定数を定義しています。{@const}は{#if}、{:else if}、{:else}、{#each}、{:then}、{:catch}、<Component />、<svelte:fragment />の直接の子項目としてのみ許可されています。
@debugディレクティブ
@debugディレクティブは、変数の値をコンソールに出力してデバッグするために使用され、通常は開発中のコードのデバッグに使用されます。
サンプルコード
1<script>2 let user = {3 firstname: 'Ada',4 lastname: 'Lovelace'5 };6</script>7
8<!-- コンパイル -->9{@debug user}10{@debug user1, user2, user3}11
12<!-- コンパイルしない -->13{@debug user.firstname}14{@debug myArray[0]}15{@debug !isReady}16{@debug typeof user === 'object'}17
18<h1>Hello {user.firstname}!</h1>{@debug ...}タグはconsole.log(...)の代替手段を提供します。特定の変数の値が変化したときにそれらを記録し、デベロッパーツールが開かれているときにコードの実行を一時停止します。
{@debug ...}は、カンマで区切られた変数名のリストを受け入れます（任意の式ではありません）。
まとめ
この記事の紹介により、Svelteでよく使用される特殊タグとディレクティブの概念と使用方法を理解しました。これらの特殊タグとディレクティブは、Svelteにより多くの柔軟性と機能を提供し、動的なコンテンツ、グローバルイベント、コンポーネントの再帰、レンダリングの最適化などのシナリオでの処理をより良くすることができます。
