PricingLoginStart free
Sveltejs Academy · レッスン

snippetをpropsとして渡す

snippetの値をpropsとして受け取り、柔軟性の高いコンポーネントAPIを構築します。

レッスン 3/413 ステップ

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

Props としてのスニペット

スニペットは、他の値と同じように子コンポーネントへ渡せます。

定義して渡す

親コンポーネント内でインラインに定義し、名前で参照します。

{#snippet item(thing)}<li>{thing.name}</li>{/snippet}
<List itemSnippet={item} items={data} />

子で受け取る

スニペットを型付き prop として宣言します。

let { itemSnippet, items } = $props();
{#each items as thing}
  {@render itemSnippet(thing)}
{/each}

Render Props パターン

これは React 形式の render props を一般化したものです。子のレンダリング方法を親が制御します。

カスタマイズ

親コンポーネントごとに異なるスニペットを渡し、レイアウトを完全にカスタマイズできます。

型付きスニペット Props

TypeScript を使用する場合は、子コンポーネントで自動補完を利用できるように、スニペットのパラメーターに型を付けます。

let { itemSnippet }: { itemSnippet: Snippet<[Thing]> } = $props();

オプションのスニペット

スニペットの props はオプションにできます。渡された場合にだけレンダリングします。

{#if itemSnippet}
  {@render itemSnippet(thing)}
{/if}

Children スニペット

デフォルトスニペットは、$props() 内で children として公開されます。

let { children } = $props();
{@render children()}

構成の力

スニペットの props は、ヘッドレスで組み合わせ可能な UI ライブラリの基盤です。

TypeScript のインポート

適切に型付けするには、Snippet 型を svelte からインポートします。

import type { Snippet } from "svelte";

スロットとの比較

スニペットの props はスロットより柔軟です。パラメーターを受け取ることができ、条件付きでレンダリングできます。

クイックチェック

スニペットを prop としてどのように受け取りますか？

対話的なレッスンで答える

まとめ

スニペットを props として渡すことで制御を反転できます。親がレンダリングロジックを提供し、子が @render を通じて呼び出します。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
41
レッスン
163
無料で学習を始めるコース全体を表示

よくある質問

「snippetをpropsとして渡す」レッスンは無料ですか？

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

「snippetをpropsとして渡す」で何を学びますか？

snippetの値をpropsとして受け取り、柔軟性の高いコンポーネントAPIを構築します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「snippetをpropsとして渡す」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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