基本文法 / Learch

基本的な構文と構造

Svelte を使った開発では、コンポーネントベースのアーキテクチャを採用しています。この章では、Svelte における基本的な構文と構造について学びます。具体例を用いて、データバインディング、条件分岐、ループ、イベントハンドリング、ライフサイクルメソッドについて説明します。

1. コンポーネントの作成と使用

例: シンプルなメッセージ表示コンポーネント

Message.svelte:

<script>
  export let message = 'デフォルトメッセージ';
</script>

<div>{message}</div>

このコンポーネントは、外部からmessageプロパティを受け取り、それを表示します。exportキーワードを使用してプロパティを公開している点に注意してください。

親コンポーネント（例えばApp.svelte）で使用する方法:

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

<Message message="こんにちは、Svelte!" />

2. データバインディング

例: ユーザー入力とバインディング

UserInput.svelte:

<script>
  let name = '';
</script>

<input type="text" bind:value="{name}" />
<p>入力された名前: {name}</p>

この例では、<input>要素のvalue属性と変数nameを双方向にバインドしています。ユーザーが入力フィールドに何かを入力すると、name変数が更新され、それが即座に<p>タグ内に反映されます。

3. 条件分岐

例: ログイン状態の表示

<script>
  let isLoggedIn = false;
</script>

{#if isLoggedIn}
  <p>ログインしています。</p>
{:else}
  <p>ログインしていません。</p>
{/if}

<button on:click={() => isLoggedIn = !isLoggedIn}>
  {#if isLoggedIn}ログアウト{:else}ログイン{/if}
</button>

このコードスニペットは、isLoggedInの値に基づいて異なるテキストを表示します。ボタンをクリックすることでログイン状態を切り替えることができます。

4. ループ

例: ユーザーリストの表示

<script>
  let users = ['Alice', 'Bob', 'Charlie'];
</script>

<ul>
  {#each users as user}
  <li>{user}</li>
  {/each}
</ul>

{#each ...}ブロックを使用すると、配列の各アイテムに対して繰り返し処理を行うことができます。この例では、users配列の各ユーザー名をリストアイテムとして表示します。

5. イベントハンドリング

例: カウンターアプリ

<script>
  let count = 0;

  function increment() {
    count += 1;
  }
</script>

<button on:click="{increment}">クリック</button>
<p>カウント: {count}</p>

この例では、ボタンをクリックするたびにカウントが増えるシンプルなカウンターアプリケーションを作成しています。on:clickディレクティブを使用して、クリックイベントに反応させています。

6. ライフサイクルメソッド

例: コンポーネントの

マウントとアンマウント

<script>
  import { onMount, onDestroy } from 'svelte';

  onMount(() => {
    console.log('コンポーネントがマウントされました。');
  });

  onDestroy(() => {
    console.log('コンポーネントが破棄されます。');
  });
</script>

<p>ライフサイクルメソッドのデモ</p>

onMountはコンポーネントがマウントされた直後に実行される関数を登録し、onDestroyはコンポーネントが破棄される直前に実行される関数を登録します。

Svelte概要

Svelte状態管理