slot="name"による名前付きスロット
名前付きスロットを使用して、コンポーネント内に複数の挿入位置を定義します。
「slot="name"による名前付きスロット」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
名前付きスロットを使う理由
コンポーネントには、たとえばヘッダー、本文、フッターなど、複数の挿入位置が必要になることがよくあります。
名前付きスロットを定義する
子コンポーネントのスロット要素に name 属性を追加します。
<!-- Layout.svelte -->
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>名前付きスロットを埋める
親コンポーネントで、要素に slot="name" 属性を付けます。
<Layout>
<h1 slot="header">Title</h1>
<p>Body</p>
<p slot="footer">Copyright</p>
</Layout>デフォルトと名前付きの組み合わせ
slot 属性のないコンテンツはデフォルトスロットを埋めます。名前付きコンテンツは、対応する名前付きスロットに入ります。
順序に依存しない
親コンポーネント内での順序は関係ありません。各スロットは名前で対応付けられます。
1つのスロットに複数の要素
複数の要素を slot 属性を持つ1つの親要素で囲むと、それらをすべて同じスロットに送れます。
条件付きヘッダー
親コンポーネントで {#if} を使用すると、名前付きスロットを任意で埋められます。
一般的なレイアウト
このパターンは、ヘッダー、サイドバー、メインコンテンツ、フッターを持つレイアウトに適しています。
フォームコンポーネント
フォームコンポーネントでは、プレフィックス、サフィックス、補足テキストなどのスロットを定義することがあります。
自己文書化
スロット名はコンポーネントの API を説明します。title や actions のように、説明的な名前を選んでください。
TypeScript ヘルパー
TypeScript の Svelte ファイルでは、特殊な $$Slots ジェネリックを使ってスロットに型を付けられます。
確認問題
名前付きスロットを指定するにはどうしますか？
復習
子コンポーネントに複数の <slot name="..."> を定義し、親要素の slot="..." でそれらを指定します。
よくある質問
「slot="name"による名前付きスロット」レッスンは無料ですか？
はい。「slot="name"による名前付きスロット」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「slot="name"による名前付きスロット」で何を学びますか？
名前付きスロットを使用して、コンポーネント内に複数の挿入位置を定義します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「slot="name"による名前付きスロット」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- コンテンツ投影のためのデフォルトスロット
- slot="name"による名前付きスロット
- スロットのフォールバックコンテンツ
- $$slotsによるスロットコンテンツの確認