0Pricing
Sveltejs Academy · レッスン

$$propsと$$restPropsによるPropsの転送

すべてのPropsまたは残りのPropsを、内部の要素やコンポーネントに引き渡します。

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

Props を転送する理由

ラッパーコンポーネントでは、受け取ったすべての props を内部の要素に渡すことがよくあります。転送を使えば、すべての属性を列挙せずに済みます。

$$props オブジェクト

コンポーネント内部の $$props は、コンポーネントに渡されたすべての prop を含むオブジェクトです。

<script>
  // $$props is auto-injected
</script>

<input {...$$props} />

未知の Props も含まれる

export let でコンポーネントに宣言していない props も、$$props に含まれます。

$$restProps オブジェクト

$$restProps には、export let で明示的に宣言した props は含まれません。追加の props だけを渡す場合に便利です。

<script>
  export let label;
</script>

<input {...$$restProps} />

一般的なパターン

必要な props を宣言し、残りをラップした要素に転送します。

<script>
  export let label;
  export let helpText;
</script>

<label>{label}</label>
<input {...$$restProps} />

落とし穴：順序が重要

まずスプレッドし、必要に応じて特定の属性で上書きします。

<input {...$$restProps} type="email" />

class の転送

テーマを柔軟に変更できるよう、$$restProps を介して class 属性を転送します。

style の転送

style 属性や data-* 属性も、同じように自然に引き継がれます。

イベントハンドラー

親コンポーネントから渡されたイベントリスナーは、関数として $$props に格納されます。スプレッドによって、これらも転送されます。

リアクティブ性に関する制限

$$props と $$restProps は、宣言された props より少し効率が劣ります。Svelte がこれらを静的に追跡できないためです。

TypeScript の注意点

どちらのオブジェクトも、デフォルトでは型が大まかにしか指定されません。型安全な転送を行うには、TS でキャストするか型を追加してください。

確認問題

$$restProps とは何ですか？

復習

内部の要素でスプレッドを使い、$$props（すべての props）または $$restProps（追加分のみ）で props を転送します。

よくある質問

「$$propsと$$restPropsによるPropsの転送」レッスンは無料ですか？

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

「$$propsと$$restPropsによるPropsの転送」で何を学びますか？

すべてのPropsまたは残りのPropsを、内部の要素やコンポーネントに引き渡します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「$$propsと$$restPropsによるPropsの転送」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. export letによるPropsの宣言
  2. 親からPropsを渡す
  3. Propsのデフォルト値
  4. $$propsと$$restPropsによるPropsの転送
← Sveltejs Academyに戻る