今回はSvelteにおけるpropsの使い方を見ていきます。

まずはButton.svelteにButtonコンポーネントを定義します。

ボタンに表示される文字列とdisabled属性の真偽値をプロパティで渡せるコンポーネントです。

<script>
  export let label;
  export let disabled = true;  // 初期値は設定しなくてもよい
</script>

<button {disabled}>{label}</button>

App.svelteでButtonコンポーネントを使用したい場合、以下のように使用します。

<script>
  import Button from './Button.svelte';
</script>

<Button label="送信する" disabled={false} />

上記のコードはスプレッド属性の記法を使用して、以下のように書き換えることが可能です。

<script>
  import Button from './Button.svelte';
  let props = { label: '送信する', disabled: 'false' } ;
</script>

<Button {...props} />

$$props

Svelteにはスプレッド属性と対になる記法として、$$propsという定義済みの変数が存在します。

$$propsを使用すると、プロパティをexportせずに（つまりプロパティで何を受け取るかを定義せずに）プロパティの受け渡しが可能になります。プロパティは$propsにオブジェクト形式で格納されます。

例を見ていきましょう。

Alert.svelteというファイルを作成し、以下のように書いたとします。

<script>
  alert($$props);
</script>

これをApp.svelteで受け取り、使用します。

<script>
  import Alert from './Alert.svelte';
</script>

<Alert message="こんにちは" />

するとAlert.svelteでexport letを定義していないにもかかわらず、「こんにちは」とポップアップで表示されます。

便利なように見えますが、$$propsを使用する機会はあまりないそうです。$$propsが有効な事例としては、受け取ったプロパティをそのまま転送したい場合などが考えられます。

<script>
  import Button from './Button.svelte';
</script>

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

上記の例は、$$propsがオブジェクトであることを利用してスプレッド属性を使ってプロパティを転送しています。

$$restProps

また$$propsの亜種として$$restPropsという定義済みの変数も存在します。こちらはexport letで宣言したプロパティ以外のプロパティを格納します。

以下のように、受け取ったプロパティをコンソールに表示させるPrintコンポーネントを作ります。

<script>
  export let message1 = 'おはよう';
  console.log($$restProps);
</script>

そしてApp.svelteでPrintコンポーネントを以下のように呼び出します。

<script>
  import Print from './Print.svelte';
  let message2 = 'こんにちは';
</script>

<Print {message1} {message2} />

この結果はエラーになります。次は{message1}を削除し{message2}のみで試します。

<Print {message2} />

こちらは正常に動き、コンソールには{ message2: 'こんにちは'}と表示されます。

このように$$restPropsはexport letで宣言されたプロパティ以外を格納します。