Svelteの反応性入門

投稿日: 2022-04-20 2022-04-20

Svelte 3 を使い始めるための最初のステップに触れましたが、その最初の投稿では、Svelteのキラー機能の1つである反応性について詳しく説明することを意図的に省略しました。

現代のJavaScriptUIフレームワークでは、過去数年間、反応性が大流行しています。反応性とは、変更された値が自動的にDOMに反映されることを意味します。

AngularはRxJSとobservablesのおかげでリアクティブプログラミングを可能にし、Vue.jsは計算されたプロパティで値をリアクティブに再計算することを可能にします。 Svelteに関しては、あまり知られていないJavaScript機能 labels を利用して、リアクティブな宣言とリアクティブなステートメントを可能にします。これは、特定の他の値が変更されたときに、特定の値を自動的に再計算できることを意味します。これは本当に強力で、ご覧のとおり、Svelteを使用するとパイのように簡単にできます。 🥧

単語カウンターコンポーネント

簡単な文字/単語カウンターの例を作成して、Svelteの反応性がどのように見えるかを見てみましょう。

これが私たちの最低限のコンポーネントです：

WordCounter.js

<script>
    let text = '';
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

textの値とtextareaの値の間の双方向のデータバインディングを除いて、ここでは特別なことは何もありません。

リアクティブ宣言

次に、text変数の値が変更されたときに、単語と文字の数を自動的に計算するリアクティブ宣言を追加しましょう。

<script>
  let text = '';

  $: characters = text.length;
  $: words = text.split(' ').length;
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>

charactersとwordsの2つの新しい変数を宣言しました。これらは、text内の値に基づいて値を計算し、自動的に再計算されます。

$:の部分はラベルであり、完全に有効なJavaScriptです。これまでJavaScriptでラベルを使用したことがない可能性があります。ラベルは、ネストされたforループなどのエッジケースに使用されます。 Svelteは、これらのラベル付き宣言に特別な意味を与え、反応性の宣言を自動的に計測します。

反応性ステートメント

特別なラベル構文を使用したこの反応性は、新しい変数を宣言するために有効であるだけでなく、値が変更されたときに反応的にステートメントを実行するためにも使用できます。

textの値が変更されたら、コンソールに記録してみましょう。

<script>
  let text = "";

  $: characters = text.length;
  $: words = text.split(" ").length;

  $: console.log("your text:", text);
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>

これがアプリケーションのデバッグにどれほど便利か想像してみてください。

複数のステートメント

中括弧を使用して、ブロック内の複数のステートメントをグループ化できます。

$: {
  console.log("---");
  console.log("your text:", text);
}

条件文

また、ステートメントとして条件を使用することもできます。

$: if (text.toLowerCase().includes("see you later alligator")) {
  console.log("Not so soon baboon!");
  text = "";
}

これで、text変数に「seeyoulater alligator」という文字列が含まれるたびに、メッセージがコンソールに記録され、text変数の値がリセットされます。

🎩これで、Svelteアプリをリアクティブにすることができます！

getdocs

13036