0Pricing
Sveltejs Academy · レッスン

デフォルトsnippetと名前付きsnippet

フォールバック用のsnippetを用意し、コンポーネント内の複数のsnippetスロットに名前を付けます。

「デフォルトsnippetと名前付きsnippet」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

デフォルトスニペット

コンポーネントのタグ内に記述したコンテンツはデフォルトスニペットになり、children からアクセスできます。

<Card>
  <p>Inside the card</p>
</Card>

コンポーネント内で使う

children prop を使ってデフォルトコンテンツをレンダリングします。

let { children } = $props();
<div class="card">
  {@render children()}
</div>

名前付きスニペット

名前付き props として複数のスニペットを渡します。

<Card>
  {#snippet header()}<h2>Title</h2>{/snippet}
  {#snippet body()}<p>Text</p>{/snippet}
</Card>

名前付きスニペットを受け取る

それぞれの名前付きスニペットを prop として宣言します。

let { header, body } = $props();
{@render header()}
{@render body()}

フォールバック

通常の条件分岐を使って、デフォルトのフォールバックコンテンツを指定します。

{#if header}{@render header()}{:else}<h2>Default</h2>{/if}

型安全性

IDE のサポートを得るには、それぞれのスニペットのパラメーターに明示的に型を付けます。

名前付きスロットの置き換え

スニペットは Svelte 4 の名前付きスロットパターンを、より強力な形で置き換えます。

デフォルトコンテンツ

スニペットには組み込みのフォールバック機能がありません。その場合は {#if} を使用します。

構成パターン

デフォルトスニペットと名前付きスニペットを組み合わせて、ヘッドレスコンポーネントを設計します。

移行のヒント

移行時は、名前付きスロットをそれぞれ名前付きスニペット prop に変換します。

TS の推論

Svelte 5 は、コンポーネントの props から Snippet 型を自動的に生成します。

クイックチェック

Svelte 5 では、名前付きスロットの代わりに何を使いますか？

まとめ

デフォルトコンテンツには children スニペットを使用し、名前付きスニペットは明示的な props として @render でレンダリングします。

よくある質問

「デフォルトsnippetと名前付きsnippet」レッスンは無料ですか？

はい。「デフォルトsnippetと名前付きsnippet」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「デフォルトsnippetと名前付きsnippet」で何を学びますか？

フォールバック用のsnippetを用意し、コンポーネント内の複数のsnippetスロットに名前を付けます。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「デフォルトsnippetと名前付きsnippet」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 型付きpropsのための$props()
  2. {#snippet}と{@render}
  3. snippetをpropsとして渡す
  4. デフォルトsnippetと名前付きsnippet
← Sveltejs Academyに戻る