まず、ジェネリックコンポーネントの基本的な概念を理解しましょう。ジェネリックコンポーネントは、特定のデータ型に依存せず、汎用的に使用できるコンポーネントです。これにより、同じコンポーネントを異なるデータ型に対して再利用することができます。
Svelteでは、ジェネリックコンポーネントを定義するために<script>セクションでexport letを使用します。以下は、ジェネリックコンポーネントの例です。
<script>
export let data;
</script>
<div>
<p>{data}</p>
</div>この例では、dataというジェネリックなプロパティを受け取り、それを表示するシンプルなコンポーネントが定義されています。
ジェネリックコンポーネントを使用する際には、以下のようにコンポーネントを呼び出します。
<script>
import MyGenericComponent from './MyGenericComponent.svelte';
</script>
<MyGenericComponent data={42} />
<MyGenericComponent data="Hello, world!" />上記の例では、MyGenericComponentを2回呼び出しています。1回目ではdataに数値の42を渡し、2回目では文字列の"Hello, world!"を渡しています。
ジェネリックコンポーネントを使用することで、同じロジックを持つコンポーネントを再利用できます。また、異なるデータ型に対しても対応できるため、柔軟性が向上します。
さらに、ジェネリックコンポーネントは、データ型に応じて異なる表示や動作をすることも可能です。以下は、条件分岐を使用したコード例です。
<script>
export let data;
</script>
{#if typeof data === 'number'}
<div>
<p>This is a number: {data}</p>
</div>
{:else if typeof data === 'string'}
<div>
<p>This is a string: {data}</p>
</div>
{:else}
<div>
<p>This is something else: {data}</p>
</div>
{/if}この例では、dataのデータ型に応じて異なる表示を行っています。数値の場合は"This is a number"、文字列の場合は"This is a string"、それ以外の場合は"This is something else"と表示されます。
以上が、Svelteでジェネリックコンポーネントを使用する方法といくつかのコード例の紹介です。ジェネリックコンポーネントを活用することで、再利用性と柔軟性を高めることができます。ぜひ試してみてください！