・0 pv・8 min read
Svelte学習メモ タグ編
こんにちは
今日は、svelteに使われているタグについてのメモをしていきます。
snippetタグ
snippetタグを使うと、重複しているコードの再利用ができるみたいです。
プログラムで言う関数みたいな役割ができるみたいですね。
<script>
let images = [
{
src: "https://loremflickr.com/320/240",
caption: "画像1",
width: 320,
height: 240,
href: "https://loremflickr.com/320/240"
},
{
src: "https://loremflickr.com/640/480",
caption: "画像2",
width: 640,
height: 480
}
];
</script>
{#snippet figure(image)}
<figure>
<img src="{image.src}" alt={image.caption} width="{image.width}" height="{image.height}" />
<figcaption>{image.caption}</figcaption>
</figure>
{/snippet}
{#each images as image }
{#if image.href}
<a href={image.href}>
{@render figure(image)}
</a>
{:else}
{@render figure(image)}
{/if}
{/each}実際に使用する時は、@renderタグというものを使って、表示を行うようです。
実行すると、こんな感じ。
hrefが含まれる画像は、リンク付きになり、hrefが含まれない画像はリンクなしになります。
ふてぶてしいネコ(？)
{#snippet blastoff()}
<span>🚀</span>
{/snippet}
{#snippet countdown(n)}
{#if n > 0}
<span>{n}…</span>
{@render countdown(n - 1)}
{:else}
{@render blastoff()}
{/if}
{/snippet}
{@render countdown(10)}関数と同じように、再帰的に呼び出せたり、他のスニペットを使えたりするようですね。
ロケット発射！
また、これはsvelte5.5以上の機能ですが、別ファイルのsnippetを使うこともできるようです。
snippets_export.svelte
<script module>
export {add};
export {sub};
</script>
{#snippet add(a, b)}
{a} + {b} = {a + b}
{/snippet}
{#snippet sub(a, b)}
{a} - {b} = {a - b}
{/snippet}App.svelte
<script>
import { add, sub } from "./snippets_export.svelte";
</script>
{@render add(1, 2)}
<br>
{@render sub(3, 2)}出力結果はこの通り
コンポーネントとの使い分けをどうしようかちょっと悩みそうではありますが、便利ですね！
@const タグ
constタグを使うことで、ローカル変数的に利用できるようです。
<script>
let scores =
[
[1, 1, 1, 1, 1],
[2, 2, 1, 1, 1],
[3, 3, 1, 1, 1],
];
</script>
<table>
<thead>
<tr>
<th>生徒</th>
<th>スコア合計</th>
<th>平均スコア</th>
</tr>
</thead>
<tbody>
{#each scores as score, i }
{@const total = score.reduce((a, b) => a + b)}
<tr>
<td>#{i+1}</td>
<td>{total}</td>
<td>{total / score.length}</td>
</tr>
{/each}
</tbody>
</table>
他にも、{#if}{#snippet}などの中で使えるみたい。
スコープ範囲を絞れるのでよさそう。
@HTMLタグ
HTMLの内容をそのまま表示するのに使うタグです。
@html内のタグをcssで装飾する時には、:globalをつけてあげないと、うまく反映されないみたいですね。
<style>
article :global
{
p
{
color:red;
}
}
</style>
<article>
{@html `<p>hello</p>`}
</article>外部からHTML取得して、表示する時とかに使えるかも。
最近現れた、ヘッドレスCMSとか。
@debugタグ
debugタグは、変数の値が変更されるたびにログ出力して、
開発者ツールが開いている場合は、コードの実行を一時停止してくれるみたいです。
Input.svelte
<script>
let { text=$bindable() } = $props();
</script>
<input type="text" bind:value={text} />Debug.svelte
<script>
import Input from "./Input.svelte";
let user = $state(
{
name: "さくら",
age: 20,
job: "programmer"
}
)
</script>
<Input bind:text={user.name} />
{@debug user}
# Hello {user.name}
## 年齢: {user.age}
### 職業: {user.job}
実行すると、こんな感じにコンソールログに出力される。
Inputフィールドの値を書き換えると、デバッガが起動して、一時停止してくれる。
うっかりconsole.logで出しちゃいそうだけど、あると便利かも。
特殊タグ
その他にも、svelteで使える特殊なタグがあるようです。
svelte:window
このタグを使うこで、windowオブジェクトにイベントリスナーを追加できるようになるみたいですね。
Window.svelte
<script>
function handleKeyDown(event) {
console.log(`${event.key} が押されました`);
}
let y = $state(0);
function backToTop()
{
y = 0;
}
</script>
<svelte:window onkeydown={handleKeyDown} bind:scrollY={y} />
# トップ
{#each Array(100) as _}
<div>ダミーです</div>
{/each}
<button onclick={backToTop}>上へ戻る</button>この例だと、キーを押すと、押されたキーをログに出力してくれます。
また、scrollYをbindで、割り当てることで、上へ戻るボタンを押すと、scrollYの方に値が入ってくれるようです。
svelte:body
svelte:windowと同様に、イベントリスナーを追加できるようです。
mouseenter, mouseleaveは、windowでは発火しないので、こちらで追加するようですね。
<script>
let entered = $state(false);
function handleMouseEnter()
{
entered = true;
}
function handleMouseLeave()
{
entered = false;
}
</script>
<svelte:body onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave} />
{#if entered}
<p>マウスが入りました</p>
{:else}
<p>マウスが出ています</p>
{/if}マウスがbody内に入ったら、マウスが入った。出たら、マウスが出た。としてます。
svelte:document
svelte:window, svelte:documentと同様に、documentにイベントリスナーを追加できるようです。
<script>
function handleVisibilityChange()
{
console.log(document.visibilityState);
}
</script>
<svelte:document onvisibilitychange={handleVisibilityChange} />onvisibilitychangeは、タブを別のものに切り替えてバックグラウンドにいる時は、hidden状態、アクティブ状態の時に、visible状態になるイベントのようです。
svelte:head
こちらを使用することで、document.head内に要素を挿入できるみたいです。
<script>
let title = "ドキュメントタイトル";
</script>
<svelte:head>
<title>{title}</title>
</svelte:head>
ドキュメント
こうすることで、タイトルにばっちり反映されてますね。
metaタグとかcdn読み込みとかもこれでできそう。
svelte:element
DOM要素を動的に変更する時に使えるタグのようです。
<script>
let level = $state(1);
</script>
<input type="number" bind:value={level} min="1" max="6" />
<svelte:element this={`h${level}`}>Hello</svelte:element>この例だと、hタグをinputフィールドのレベルに動的に変更できます。
inputフィールドに2を入れると。こんな感じ。
6を入れると、こんな感じに、動的に変更してくれる。
まだまだ、どうやって使おうかピンとこないものもありますが、実際に使いながら慣れていきたいですね。