Skip to main content

Template Syntax

Basic markup

Edit this page on GitHub

タグ(Tags)

<div> のような小文字のタグは、通常の HTML 要素を表します。大文字のタグ、例えば<Widget> や <Namespace.Widget> は コンポーネント を表します。

<script>
	import Widget from './Widget.svelte';
</script>

<div>
	<Widget />
</div>

属性(attributes) と props

デフォルトでは、属性は HTML と全く同じように動作します。

<div class="foo">
	<button disabled>can't touch this</button>
</div>

HTML のように、値は引用符で囲まれていない場合があります。

<input type=checkbox />

属性値には JavaScript の式を含めることができます。

<a href="page/{p}">page {p}</a>

あるいは、JavaScript の式にすることもできます。

<button disabled={!clickable}>...</button>

Boolean の属性は、その値が truthy であれば要素に含まれ、falsy であれば除外されます。

それ以外の属性は、その値が nullish (null または undefined) でない限り含まれます。

<input required={false} placeholder="This input field is not required" />
<div title={null}>This div has no title attribute</div>

式には、通常の HTML ではシンタックスハイライトに失敗するような文字が含まれている可能性があるので、値を引用符で囲むことが許可されています。引用符は値の解析方法には影響しません。

<button disabled="{number !== 42}">...</button>

属性名と値が一致する場合(name={name})は、{name} で置き換えることができます。

<button {disabled}>...</button>
<!-- equivalent to
<button disabled={disabled}>...</button>
-->

慣習として、コンポーネントに渡される値は DOM の機能である 属性 ではなく、プロパティ(properties) または props と呼ばれます。

要素の場合と同様に、name={name} は {name} の短縮形に置き換えることができます。

<Widget foo={bar} answer={42} text="hello" />

スプレッド属性 は、多くの属性やプロパティを一度に要素やコンポーネントに渡すことができます。

要素またはコンポーネントは、通常のものと混在させて、複数のスプレッド属性を持つことができます。

<Widget {...things} />

$$props は、export で宣言されていないものも含めて、コンポーネントに渡されるすべてのプロパティ(props)を参照します。$$props を使用すると、特定のプロパティを参照するときよりもパフォーマンスが低下します。なぜなら、どのプロパティを変更した場合でも、Svelte は $$props のすべての使用を再チェックするからです。しかし、例えばコンパイル時にどのようなプロパティがコンポーネントに渡されるかわからない場合などには便利です。

<Widget {...$$props} />

$$restProps には、export で宣言されていないプロパティ(props)のみが含まれます。これは他の未知の属性をコンポーネントの要素に渡すために使用できます。$$props と同じように、特定のプロパティへのアクセスをするときと比較してパフォーマンスが低下するという特性があります。

<input {...$$restProps} />

input 要素やその子要素である option 要素の value 属性は、bind:group や bind:checked を使用している場合、スプレッド属性で設定してはいけません。このような場合、Svelte はその要素の value をマークアップの中で直接確認する必要があります、そうすることでバインドされた変数にリンクすることができるからです。

Svelte は JavaScript で属性を順番に設定するため、その属性の順番が問題になることがあります。例えば、<input type="range" min="0" max="1" value={0.5} step="0.1"/> の場合、Svelte は value に 1 を設定し (step のデフォルトが 1 であるため、0.5 から切り上げられてしまいます)、そしてそのあとで step に 0.1 を設定します。これを修正するには、順序を <input type="range" min="0" max="1" step="0.1" value={0.5}/> のように変更してください。

別の例としては <img src="..." loading="lazy" /> があります。Svelte は、img 要素を loading="lazy" にする前に、img の src を設定しますが、これでは遅すぎます。画像を遅延読み込みさせるには、<img loading="lazy" src="..."> のように変更してください。

Text expressions

JavaScript の式(expression)は、中括弧で囲むことでテキストとして使用することができます。

{expression}

HTML entity 文字列を使用することで、中括弧自体を Svelte テンプレート で使用することができます: { の場合は &lbrace; や &lcub; や &#123;、そして } の場合は &rbrace; や &rcub; や &#125; です。

正規表現 (RegExp) の リテラル記法を使用する場合、括弧で囲う必要があります。

<h1>Hello {name}!</h1>
<p>{a} + {b} = {a + b}.</p>

<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>

Comments

コンポーネント内で HTML コメントを使用することができます。

<!-- this is a comment! --><h1>Hello world</h1>

svelte-ignore で始まるコメントは、マークアップの次のブロックに対する警告を無効にします。通常、これらはアクセシビリティの警告です。正当な理由で警告を無効にしていることを確認してください。

<!-- svelte-ignore a11y-autofocus -->
<input bind:value={name} autofocus />
previous Svelte components
next Logic blocks