Svelte 5 Runesでリアクティブダッシュボードを作るプロンプト作例

このインタラクティブなダッシュボードは、Svelte 5の新しいRunesシステムの力を実演しています。Runesは、リアクティビティをより明示的で柔軟に扱う方法を導入しています。使用されている3つの主要なRunesは次の通りです：

$state: リアクティブな状態変数を作成します。これらの値が変更されると、それに依存するコンポーネントの部分が自動的に更新されます。ダッシュボードでは、count、multiplier、historyがすべて状態変数です。

$derived: 依存関係が変更されたときに自動的に更新される計算値を生成します。doubled、multiplied、totalの値は状態変数から派生しており、手動での再計算なしにリアクティブに更新されます。

$effect: 依存関係が変更されたときに副作用を実行します。このエフェクトは5回ごとの増加を追跡し、履歴配列に追加します。状態変化に応じてアクションを実行する方法を示しています。

ダッシュボードの特徴：

• 増加/減少ボタン付きインタラクティブカウンター
• 派生値に影響を与えるリアルタイム乗数スライダー
• エフェクトを使用した自動履歴追跡
• アニメーショントランジションによる視覚的フィードバック
• モダンなUI要素を備えたグラスモーフィズムデザイン

この例は、Svelte 5 Runesが状態、派生値、副作用の明確な分離により、リアクティブプログラミングをより直感的で強力にする方法を示しています。