Svelte

Svelte | 制御文

if-else 文

src/App.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
  let checked = false;
</script>

<main>
  <label>
    <input type="checkbox" bind:checked={checked}>
    Check Me!
  </label>
  {#if checked}
    <div>Checked!</div>
  {:else}
    <div>Hurry!</div>
  {/if}
</main>

<style>
</style>

foreach文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script lang="ts">
        let list:string[] = [
        ];
        function onClick() {
                list[list.length] = {
                        id:String(list.length + 1).padStart(2, '0'),
                        name:Math.random().toString(32).substring(2)
                };
        }
</script>

<table>
{#each list as data}
<tr>
<td>{data.id}</td>
<td>{data.name}</td>
</tr>
{/each}
</table>

<button on:click={onClick}>Add</button>
Binding

Svelte | バインディング

バインディング機能を使うと、入力した内容を即時に表示することができる。

バインディング

src/App.svelte

  1. 入力コントロールの要素として、bind:value={変数名}を追加する
  2. 表示したい変数を {変数名} として記述する
1
2
3
4
5
6
7
8
9
10
11
<script>
        let message = '';
</script>

<main>
        <input placeholder="Hello, world" bind:value={message}>
        <div>{message}</div>
</main>

<style>
</style>

自動再計算

src/App.svelte

バインディングされた変数は表示内容が即時変更されるが、バインディングされていない変数はそのままでは変更されない。

バインディングされた変数の変更に伴って変更させるためには、$: で変数を宣言する。

1
2
3
4
5
6
7
8
9
10
11
12
<script>
        let message = '';
        $: decoratedMessage = '!' + message + '!'
</script>

<main>
        <input placeholder="Hello, world" bind:value={message}>
        <div>{decoratedMessage}</div>
</main>

<style>
</style>
Svelte

Svelte | コンポーネントとスロット

コンポーネント

App.svelte ファイルが肥大化するのを防ぐためにファイルを分割することができる。

src/App.svelte

-import 文でをファイル名を指定してコンポーネントを読み込む
-コンポーネントはタグとして <コンポネント名>...</コンポネント名> 使用する
-コンポーネントに変数を渡すには、要素として記述する。このような変数を props と呼ぶ

1
2
3
4
5
6
7
8
9
10
<script>
    import Message from './message.svelte';
</script>

<main>
    <Message message="Hello, world"></Message>
</main>

<style>
</style>

src/message.svelte

-引き渡された変数は export して宣言する

1
2
3
4
5
6
7
<script>
  export let message;
</script>

<div>
  {message}
</div>

スロット

<コンポーネント名> と </コンポーネント名> に囲まれた部分はそのままだと表示されないが、コンポーネント側で <slot></slot> として表示することができる。

src/App.svelte

コンポーネント<Card>と</Card>の間に挟まれたは通常だと表示されない。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    import Message from './message.svelte';
    import Card from './card.svelte';
</script>

<main>
    <Card>
        <Message message="Hello, world"></Message>
    </Card>
</main>

<style>
</style>

src/card.svelte

<slot></slot> Card コンポーネントで囲んだ内容を呼び出すことができる。

1
2
3
4
5
6
7
8
9
10
11
<div>
  <slot></slot>
</div>

<style>
  div {
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 1em;
  }
</style>

src/message.svelte

1
2
3
4
5
6
7
<script>
  export let message;
</script>

<div>
  {message}
</div>

展開される HTML

以下のHTMLのように展開される。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en"><head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>Svelte app</title>

	<link rel="icon" type="image/png" href="/favicon.png">
	<link rel="stylesheet" href="/global.css">
	<link rel="stylesheet" href="/build/bundle.css">

	<script defer="" src="/build/bundle.js"></script>
<script async="" src="//localhost:35729/livereload.js?snipver=1" id="livereloadscript"></script></head>

<body>


<main><div class="svelte-tzljh"><div>Hello, world</div></div></main></body></html>
Svelte

Svelte | イベントを制御する

Svelteでは「on:イベント名」という属性でイベントを設定する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  const messages = ['Hello!', 'Svelte!'];
  let current = 0;

  const countup = () => current = current+1;
</script>

<main>
  {current}
  <button on:click={countup}>Toggle Message</button>
</main>

<style>
</style>