型付きpropsのための$props()
$props()を使い、分割代入とTypeScriptの型によってコンポーネントのpropsを宣言します。
「型付きpropsのための$props()」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
新しい Props API
Svelte 5 では、コンポーネントの props を分割代入として宣言するための $props() が導入されました。
基本的な使い方
1 つの式で props を分割代入します。
let { name, count = 0 } = $props();デフォルト値
デフォルト値には、標準の分割代入におけるデフォルト値の構文を使用します。
let { theme = "dark" } = $props();必須 Props
デフォルト値のない props は必須です。型付きモードでは、TypeScript によってこれを強制できます。
型付き Props
TypeScript のジェネリックを追加すると、完全な型安全性を得られます。
let { name, count = 0 }: { name: string; count?: number } = $props();Rest Props
残りの props は rest 構文で取得します。
let { name, ...rest } = $props();Children とスニペット
children プロパティには、デフォルトスロットの内容がスニペットとして格納されます。
let { children } = $props();export let は不要
$props() は、Svelte 5 で従来の export let 構文に置き換わります。
リアクティブ
親が新しい値を渡すと、props はリアクティブに更新されます。
スプレッドによる転送
オブジェクトのスプレッド構文を使用して、rest props を内部の要素に転送します。
<input {...rest} />後方互換性
移行中は export let も引き続き使用できます。段階的に混在させてください。
クイックチェック
Svelte 5 では、どのように props を宣言しますか？
まとめ
$props() は Svelte 5 の新しい props API です。デフォルト値と型を指定して分割代入すると、簡潔で安全なコンポーネントを作成できます。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「型付きpropsのための$props()」レッスンは無料ですか？
はい。「型付きpropsのための$props()」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「型付きpropsのための$props()」で何を学びますか？
$props()を使い、分割代入とTypeScriptの型によってコンポーネントのpropsを宣言します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「型付きpropsのための$props()」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 型付きpropsのための$props()
- {#snippet}と{@render}
- snippetをpropsとして渡す
- デフォルトsnippetと名前付きsnippet