0Pricing
Sveltejs Academy · レッスン

export letによるPropsの宣言

exportキーワードを使用して、コンポーネントのプロパティを親コンポーネントに公開します。

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

Props は export で宣言する

prop を宣言するには、コンポーネントのスクリプトに export let name と記述します。export キーワードによって、親コンポーネントから利用できるようになります。

<script>
  export let name;
</script>

<p>Hello {name}!</p>

複数の Props

コンポーネントに必要な数だけ props を記述できます。

<script>
  export let title;
  export let count;
  export let onClick;
</script>

型付き Props

安全性とエディターのサポートのために、TypeScript で型を追加してください。

<script lang="ts">
  export let count: number;
  export let label: string;
</script>

export を使う理由

スクリプトコンテキストの export キーワードは ES modules から受け継いだものですが、Svelte では「親コンポーネントに公開する」という意味になります。

必須と省略可能

デフォルト値のない props は必須です。デフォルト値を指定すると省略可能になります。

export let title = "Untitled";

読み取り専用の慣例

props は読み取り専用の入力として扱ってください。技術的には変更できますが、一方向のデータフローが壊れてしまいます。

リアクティブな Props

props はリアクティブです。親コンポーネントが新しい値を渡すと、コンポーネントは自動的に再レンダリングされます。

関数のデフォルト値

デフォルト値には、関数や計算式を指定できます。

export let onClick = () => {};

Boolean Props

boolean 型の props では、値を指定せずに属性を記述すると true になります。

<MyComp disabled />

別名を付けた Props

prop 名が class のような予約語の場合は、内部で別の名前に変更できます。

let className;
export { className as class };

名前を変更した別名

別名のパターンを使うと、HTML で扱いやすい名前を受け取りながら、内部では JavaScript で有効な識別子を使用できます。

確認問題

prop はどのように宣言しますか？

復習

props は export let で宣言し、型やデフォルト値を指定できます。また、親コンポーネントが更新するとリアクティブに変化します。

よくある質問

「export letによるPropsの宣言」レッスンは無料ですか？

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

「export letによるPropsの宣言」で何を学びますか？

exportキーワードを使用して、コンポーネントのプロパティを親コンポーネントに公開します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「export letによるPropsの宣言」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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