【初心者必見】Svelteでデータを出力する方法を徹底解説。文字列と配列の出力

この記事を読んで学べること

この記事を読むと、Svelteでデータを表示する方法を学べます。

Svelteのテンプレート構文を使用して、テンプレート内に埋め込む方法と、bind を使用して、要素とJavaScriptの変数をバインドする方法を学ぶことができます。

Svelteでデータを表示する方法

Svelteでデータを表示するには、次の2つの方法があります。

Svelteは、テンプレート内に埋め込むことができるテンプレート構文を持っています。データを表示するには、テンプレート内でJavaScriptの変数を特定に記述方法で出力します。

例:

let message = 'Hello World!';

<p>{message}</p>

↓↓↓↓↓↓↓

Hellow World!

Svelteは、入力フィールドなどの要素を bind を使用して動的に出力することができます。

これを使用すると、テンプレート内の要素の値を変更すると、JavaScriptの変数も自動的に更新されます。

例:

let name = "";

<input type="text" bind:value={name} />
<p>Hello, {name}!</p>

Svelteで配列のデータを出力するには、次のように{#each}ディレクティブを使用します。

記述方法はこのようになります。

let users = [
　　{ id: '1', name: 'Tanaka' },
　　{ id: '2', name: 'Suzuki' },
　　{ id: '3', name: 'Sato' }
];

<ul>
	{#each users as user}
		<li>{user.id} : {user.name}</li>
	{/each}
</ul>

この例では、users配列を user変数とともにループ処理しています。各 userの値が li要素の中に表示されます。

連想配列の場合は、user.key名と記述することで出力できます。