リアクティブステートメントって何だろう？

※誤った解釈の場合はご指摘いただけると幸いです。

参考書籍：実践Svelte入門（技術評論社）

svelteリアクティブステートメントって？

依存関係にある別の状態に応じて状態を更新することができる機能。

コードの先頭に「$:」をつける

簡単に言えばこんな感じらしい。
実際のコードで例にすると

let images = {
  [
    'image1.png',
    'image2.png',
    'image3.png',
  ],
}

let centerIndex = 0;
let leftIndex = images.length - 1;
let rightIndex = 1;

function moveLeft(){
  const length = images.length;
  centerIndex = (centerIndex - 1 + length) % length;
  leftIndex = (centerIndex -1 + length) % length;
  rightIndex = (centerIndex + 1) % length;
}
function moveRight(){
  const length = images.length; //3
  centerIndex = (centerIndex + 1 + length) % length;
  leftIndex = (centerIndex - 1 + length) % length;
  rightIndex = (centerIndex + 1) % length; 
}

leftIndexとrightIndexに注目するとこれはcenterIndexとimages.lengthから計算できる値だということがわかる。
この様な場合、下記の様にcenterIndex
とimages.lengthの値が更新されるたびに
一緒にleftIndexとrightIndexも更新させることができる。

修正後

let images = {
  [
    'image1.png',
    'image2.png',
    'image3.png',
  ],
}

  let centerIndex = 0;
  $: leftIndex = (centerIndex - 1 + images.length) % images.length;
  $: rightIndex = (centerIndex + 1) % images.length;

  function sliderMoveLeft(){
    centerIndex = (centerIndex - 1 + images.length) % images.length;
  }
  function sliderMoveRight(){
    centerIndex = (centerIndex + 1) % images.length;
  }
```js
svelteは変数が更新された際、自動的に変更を検知してくれる。
上記のように`leftIndex`と`rightIndex`の変数を定義する際に「$:（リアクティブステートメント」を文の初めにつける事で
`centerIndex`または`images.length`が更新された際に`leftIndex`と`rightIndex`も一緒に更新することができる。
（※逆を言うと変数が更新されても「$:」をつけないと変更されても検知してくれない）

上記で言うと
`sliderMoveLeft（関数）`が呼び出されたら　`centerIndex`の変数が更新される。
同時に$:を記載している`leftIndex`と`rightIndex`には`centerIndex`を使用しているため、`centerIndex`の変更を検知し、`leftIndex`と`rightIndex`の変数も更新される。
とのこと



### 試してみた
```svelte
<script>
  let name = "こんにちは、";
  $: secondname = name + "お元気ですか？";
  $: thirdname = secondname +"佐藤さん";

  function changelang(){
    name = 'こんばんは';
  }
</script>
<button on:click={ () => changelang()}/>
<div>{thirdname}</div>

当たり前かもしれないが念の為記載。

ちなみに、上記の様にボタンをクリックしたらnameの値が変わる。
ブラウザを読み込んだ初期時は

こんにちはお元気ですか？斉藤さん

と表示される。
リアクティブステートメントにより、ボタンをクリックすると
nameの変数が「こんばんは」に変更される。
それに伴いsecondnameの値も$:としているため同じく更新される
そしてそのsecondnameを使ったthirdnameも変更を検知してくれるためボタンを押した時は

こんばんはお元気ですか？斉藤さん

とちゃんと変更がかかってくれる

まとめ

リアクティブステートメント（＄:）は、Svelteの機能の一つで、依存関係にある別の状態に応じて状態を更新することができる機能です。リアクティブステートメントは、コードの先頭に「$:」をつけることで記述します。リアクティブステートメントを使用することで、変数の値が更新された際に、依存関係にある別の変数の値も自動的に更新されます。たとえば、ある変数が更新された場合、それに依存する別の変数の値も自動的に更新することができます。Svelteは、変数が更新された際に自動的に変更を検知してくれるため、リアクティブステートメントを使用することで、状態の管理を簡単に行うことができます。

Articles by Yusuke Nishikawa

リアクティブステートメント($:)って何？

awaitって何？

HTMLをマークダウン形式に変換「reverse_markdown」

binding.pryが効かない

ブログを開設しました！