AIGPAIGP
Prompt LibraryAllProgrammingImage GenerationStable DiffusionVideo GenerationMusic GenerationDesign
Toolsサイト診断WebP ConverterImage ResizeFavicon Generator
Start with AIGeminiChatGPTClaudeDeepSeekCursorAntiGravity

Svelte 5 Runes: Interactive Reactive Counter Dashboard Prompt

プログラミング
DeepSeek

CODE PREVIEW

エディタを読み込み中…
P

Prompt

Create an interactive dashboard using Svelte 5 Runes ($state, $derived, $effect) that demonstrates reactive programming with multiple interconnected counters, derived values, and visual feedback.

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

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

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

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

ダッシュボードの特徴：

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

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

Prompt Overview

This prompt challenges an AI coding assistant to build a fully interactive counter dashboard using Svelte 5's new Runes API, specifically the $state, $derived, and $effect primitives. It is an excellent starting point for developers who want to explore Svelte 5's reactivity model through a hands-on, visual example — multiple counters interact with one another, derived values update automatically, and side effects respond in real time to state changes.

The generated output is ideal for learning how Runes replace the older reactive declarations in Svelte 4, making reactivity more explicit and composable. Frontend developers migrating existing projects, educators building workshop demos, or engineers evaluating Svelte 5 for production use will all find this prompt highly practical. To get the best results, use a model with strong JavaScript and Svelte knowledge, such as GPT-4o or Claude 3.5 Sonnet. Variations worth trying include adding reset controls, persisting state to localStorage via $effect, or extending the dashboard with chart visualizations.

Was this prompt helpful?

Comments

Comments appear after moderation

この記事が役に立ったら投げ銭で応援

Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済

開発者が選ぶ最強ツール集

運営者が毎日使っているツール・ガジェット 6選

見る
Homeヘルプ