私のウェブサイトにこのフレームワークに関する記事が多いのは、私がSvelteとSvelteKitをどれだけ愛しているかの証拠です。インターネット上でSvelteが他のフレームワークと比較されるとき、ReactやAngularのような他の確立されたフレームワークと比較して、それは-正当に-コミュニティサポートが不足していると言われます。

したがって、この素晴らしいフレームワークに私の義務を果たすために、そのコミュニティを拡大し、数え切れないほどの試行錯誤で得た知識を初心者と共有することを義務と考えています。

この記事では、Svelteのリアクティビティについて説明します。

変数の変更がDOMの変更を引き起こさない場合や、Svelteがどのようにリアクティブになるかについては、いくつかの曖昧さがあります。それでは掘り下げてみましょう。

Svelteのリアクティビティ

以下の設定があると想像してください。ユーザー名は以下のように反映される必要があります：

Svelteでは、これをバインディングで簡単に実現できます。

Binding (バインディング)

以下のように、入力の値をname変数にバインドすることで、DOM要素が常に入力値と同期することが保証されます。

<script>
let name = 'Kepler';
</script>

<input bind:value={name} />
<h1>Welcome {name}</h1>

それが期待どおりに機能するかどうかを見てみましょう：

そうです！これはSvelteでリアクティビティを実現する最も優雅な方法ですが、トピックの完全な理解を得るために他のオプションを探ってみましょう。

これを達成する別の方法は値の割り当てです。

Value Assignment (値の割り当て)

変数がscriptセクションで値に割り当てられると、それはリアクティブになります。バインディング効果は、値の割り当てを介して達成できますが、エレガントではありません。

<script>
let name = 'Copernicus';
</script>

<input on:change={(e) => (name = e.currentTarget.value)} value={name}/>
<h1>Welcome {name}</h1>

上記のコードは次のように動作します：入力値が変更されると、変更イベントがトリガーされます。イベントがトリガーされると、name変数がその入力値に割り当てられます。 nameをスクリプトセクションで宣言したので、それはリアクティブです。したがって、その変数の変更は関連するDOM要素の再レンダリングをトリガーします。期待どおりに機能するかどうかを見てみましょう：

入力を完全に入力すると、リアクティビティが発生することに注意してください。入力中にリアクティビティが表示されません。これには、changeイベントをinputイベントに変更する必要があります：

<script>
let name = 'Newton';
</script>

<input on:input={(e) => (name = e.currentTarget.value)} value={name}/>
<h1>Welcome {name}</h1>

上記のコードで、タイピング中のリアクティビティが実現できます：

リアクティビティが壊れるのはどこですか？

これまでに、scriptタグ内で変数が宣言されると、それがリアクティブになり、その値の変更がDOMに反映されることを学びました。

ただし、ルールには常に例外があります。

変数が他の変数からの派生として宣言される場合、それはスクリプトタグ内で宣言されていても、それが派生した値もリアクティブであっても、リアクティブになりません。これを以下で確認しましょう：

<script>
let name = 'Einstein';
let welcomeMessage = `Hello ${name}`;
</script>

<input bind:value={name} />
<h1>{wolcomeMessage}</h1>

上記のコードでは、name変数は通常通りリアクティブです。 ただし、そのwelcomeMessageと呼ばれる新しい変数をそれから派生させています。

これが機能するかどうかを見てみましょう：

上記のように、ここではリアクティビティが機能せず、welcomeMessage は入力を変更しても常に "Welcome Einstein" にとどまります。これは、scriptタグの間の領域がコンポーネントがレンダリングされるときに一度だけ実行されるためです。したがって、welcomeMessageは "Welcome Einstein" として初期化され、初期レンダリング後は変数nameへのすべての関連付けを放棄します。

複雑なアプリケーションでは、派生変数が必ずしもリアクティブであることが保証されています。それでは、これらの変数をリアクティブにするにはどうすればよいでしょうか？

派生変数をリアクティブにする：1. $マーク

派生変数の前に$（ドル）記号を追加することで、それをリアクティブにすることができます。これにより、Svelteはこの変数を追跡し、変更があるたびに変更がDOMに反映されます。

これは以下のように実現されます：

<script>
let name = 'Stephen';
$: welcomeMessage = `Hello ${name}`;
</script>

<input bind:value={name} />
<h1>{wolcomeMessage}</h1>

それが機能するかどうかを見てみましょう：

機能します！したがって、他の変数から派生した変数がある場合は、それをリアクティブにするために$（ドル）記号を使用することを確認してください。この構文が気に入らない場合は、リアクティビティを達成する別の方法があります。

派生変数をリアクティブにする：2. Key 関数

リアクティブにしたいセクションをkeyタグ内に追加することで、$（ドル）記号なしでリアクティビティを実現できます。構文は以下のようになります。

<script>
let name = 'Carl';
let welcomeMessage = `Hello ${name}`;
</script>

<input bind:value={name} />
{#key name}
<h1>{wolcomeMessage}</h1>
{/key}

keyの隣に書かれた変数は、Svelteに追跡してほしい変数です。この場合、name変数を追跡するように指示しています。ただし、welcomeMessageを追跡するようにも指示できます。

結論

この記事では、Svelteのリアクティビティを探求しました。カバーされた主なトピックは次のとおりです：

• スクリプトで変数を宣言する
• 2方向バインディング
• イベントバインディング

さらに、Svelteでは派生変数が追跡されず、それらに対する変更がDOMに反映されません。これらの変数をリアクティブにするための2つの方法を探りました：

• $（ドル）マーク
• キー関数

Svelteは最高のフロントエンドフレームワークであり、その即座のリアクティビティは、なぜ素晴らしいフレームワークであるかの主要な理由の1つです。この投稿でSvelteのリアクティビティについての理解を深めることができたと思います。

質問がある場合はお知らせください。

楽しいハッキングを！