コンポーネント

この章では、Svelte を使用して実際のアプリケーションを開発するために必要な技術に焦点を当てます。コンポーネント間の通信、スロット、外部 API の利用、フォームの取り扱いとバリデーションなど、実践的なスキルを学びます。

1. コンポーネント間の通信

Svelte では、コンポーネント間でデータを共有するためにプロップス、カスタムイベント、ストアを使用します。

例: 親コンポーネントから子コンポーネントへのデータ渡し

Parent.svelte:

<script>
  import Child from './Child.svelte';
  let message = '親からのメッセージ';
</script>

<Child {message} />

Child.svelte:

<script>
  export let message;
</script>

<p>{message}</p>

この例では、ParentコンポーネントからChildコンポーネントへmessageプロップスを通じてデータを渡しています。

2. スロット

スロットを使用すると、コンポーネントに動的なコンテンツを挿入できます。これにより、再利用可能なコンポーネントを作成する際の柔軟性が高まります。

例: スロットを持つコンテナコンポーネント

Container.svelte:

<div class="container">
  <slot></slot>
</div>

<style>
  .container {
    border: 2px solid black;
    padding: 20px;
  }
</style>

使用する際:

<Container>
  <p>ここに挿入されるコンテンツ</p>
</Container>

3. 外部 API の利用

Svelte で外部 API を利用する際には、非同期データの取得と表示が重要になります。

例: 外部 API からデータを取得して表示

DataFetcher.svelte:

<script>
  import { onMount } from 'svelte';
  let data = [];

  onMount(async () => {
    const response = await fetch('https://api.example.com/data');
    data = await response.json();
  });
</script>

{#if data.length > 0}
<ul>
  {#each data as item}
  <li>{item.name}</li>
  {/each}
</ul>
{:else}
<p>データを読み込み中...</p>
{/if}

4. フォームの取り扱いとバリデーション

フォームはウェブアプリケーションでよく使用される要素です。Svelte を使用すると、フォームの入力値のバインディングやバリデーションを簡単に実装できます。

例: 簡単なフォームバリデーション

SignupForm.svelte:

<script>
  let email = '';
  let emailValid = false;

  $: emailValid = email.includes('@');
</script>

<form on:submit|preventDefault="{submitForm}">
  <input type="email" bind:value="{email}" placeholder="メールアドレス" />
  <p>{emailValid ? '有効なメールアドレスです' : 'メールアドレスが無効です'}</p>
  <button type="submit" disabled="{!emailValid}">登録</button>
</form>

<script>
  function submitForm() {
    alert(`登録が完了しました: ${email}`);
  }
</script>

この例では、リアクティブステートメントを使用してメールアドレスのバリデーションを行い、有効なメールアドレスが入力されると登録ボタンを有効にしています。