Svelteのリアクティブステートメントの初回実行タイミング

はじめに

https://svelte.jp/tutorial/reactive-assignments
上記チュートリアルにあるように、SvelteにはDOMをアプリケーションの状態に同期させるためのリアクティビティシステムというものがあります。
そして、その一つにリアクティブステートメントがあります。
これの実行タイミングを理解していないと、状態管理で少し苦戦すると感じたので記事を書きました（実際に少し苦戦しました）。

前提

"svelte": "^4.0.5",
"@sveltejs/kit": "^1.20.4"

リアクティブステートメントとは

https://svelte.jp/tutorial/reactive-statements
リアクティブステートメントのチュートリアルでは、これの実行タイミングの説明として、以下のようなものがあります。

リアクティブな 値 を宣言するだけでなく、任意の ステートメント をリアクティブに実行することもできます。例えば、count の値が変化するたびにログを取ることができます。

例を見てみます。

以下はチュートリアルにあるコードです。
以下のように $: console.log の部分がリアクティブステートメントです。
以下のコードでは、countの値が変化するたびにログが出力されます（Svelteにおけるローカルの状態管理）。
このように、ある値の変化を検知して何かしらの処理を実行したいときに使うのがリアクティブステートメントです。

+layout.svelte

<script>
  let count = 0;
  function handleClick() {
    count += 1;
  }
	
  // リアクティブステートメント
  $: console.log('the count is ' + count);
</script>

<button on:click={handleClick}>
 Clicked {count}
</button>

リアクティブステートメントの初回実行タイミング

もう少し詳しく実行タイミングを見てます。今回は初回の実行タイミングにフォーカスします。
以下はログだけを仕込んだコードです。
少しわかりやすいように、他にもonMountやdomにもconsole.logを仕込んで実行タイミングを比較してみます。
onMountはコンポーネントがdomにマウントされると実行される関数です（参考）。

+layout.svelte

<script>
  import { onMount } from "svelte"
	
  $: console.log('リアクティブステートメント');
	
  console.log('リアクティブステートメントではないログ')

  onMount(() => console.log('onMount'))
</script>

{console.log('dom')}

結果は以下のようになります。これは、ログを仕込む場所の順番を変えても同様です。

1. リアクティブステートメントではないログ
2. リアクティブステートメント
3. dom
4. onMount

個人的にはこの結果が少し意外でした。
リアクティブステートメントの初回実行タイミングは、domがマウントされる前かつ、リアクティブステートメント以外の処理が実行された後という感じなのでしょうか。

Svelteのリアクティビティシステムについて理解が深まれば、この辺りの動きも理解できる思うので、もう少し触りながら理解を深めていきたいところです。

今回は以上です。