Context APIは、プロパティとしてデータや関数を渡したり、多数のイベントをディスパッチしたりすることなく、コンポーネント同士が「会話」するためのメカニズムを提供します。これは高度な機能ですが、便利な機能です。この演習では、ジェネラティブアートの先駆者の1人であるジョージ・ニースのSchotterをContext APIを使って再現します。

Canvas.svelte内には、キャンバスにアイテムを追加するaddItem関数があります。<Canvas>内の<Square>のようなコンポーネントで、setContextを使用して利用できるようにすることができます。

import { setContext } from 'svelte';
import { SvelteSet } from 'svelte/reactivity';

let { width = 100, height = 100, children } = $props();

let canvas;
let items = new SvelteSet();

setContext('canvas', { addItem });

function addItem(fn) {
	$effect(() => {
		items.add(fn);
		return () => items.delete(fn);
	});
}

子コンポーネント内では、getContextを使用してコンテキストを取得できます。

import { getContext } from 'svelte';

let { x, y, size, rotate } = $props();

getContext('canvas').addItem(draw);

今のところ、つまらないですね。グリッドに少しランダム性を追加しましょう。

<div class="container">
	<Canvas width={800} height={1200}>
		{#each Array(12) as _, c}
			{#each Array(22) as _, r}
				<Square
					x={180 + c * 40 + jitter(r * 2)}
					y={180 + r * 40 + jitter(r * 2)}
					size={40}
					rotate={jitter(r * 0.05)}
				/>
			{/each}
		{/each}
	</Canvas>
</div>

setContextとgetContextは、コンテキストが正しくバインドされるように、コンポーネントの初期化中に呼び出す必要があります。この場合のキーである'canvas'は、文字列でなくても構いません。これは、コンテキストにアクセスできるユーザーを制御するのに便利です。

コンテキストオブジェクトには、リアクティブな状態を含め、任意のものを入れることができます。これにより、時間の経過とともに変化する値を子コンポーネントに渡すことができます。

// in a parent component
import { setContext } from 'svelte';

let context = $state({...});
setContext('my-context', context);

// in a child component
import { getContext } from 'svelte';

const context = getContext('my-context');