デザイナー、Web制作者もできるSvelte入門

■第２話：Svelteの基本操作

（最終更新日：2023.05.18）

「SPAを簡単に構築できる」

前回はSvelteの特徴と、そのフレームワークSvelteKitのインストール方法について触れた。 それに加え、CSSフレームワークであるBulmaの導入方法も紹介した。 今回はその環境を利用して、Svelteの基本的な使い方について紹介する。 具体的には、リアクティブな動作、子コンポーネントへの引数（propsと同等）の受け渡し、そして状態管理について説明する。 この節ではReactとの比較を通じてSvelteの機能を説明しているので、Reactの初歩的な部分について知識があると、より理解しやすくなるだろう。

１.Svelteのstateとリアクティブ

はじめに、Svelteのstateとリアクティブについて解説する。 Svelteで状態を管理する時、ReactのuseStateのようなHooksは使わない。 単にletで監視したい変数（ここでは例としてcount）を定義するだけだ。 これがそのままstateになる。さらに、Reactの再レンダリングという概念がSvelteには存在しない。 再読み込みをさせたい場合は、再読み込みを行いたい処理の先頭に「$:」を付けて監視する。 これをリアクティブと呼ぶ。そして、リアクティブの処理にif条件を付ければ、その条件に当てはまる時だけ再読み込みが行われる。 例として、以下のケースでは数字をカウントアップし、3の倍数の時だけアラートでアホな顔(*´Д｀)を表示するようにしている。

監視したい値に対する処理に印（$:）を付けて、SPAを構築する。 分割代入も必要なく、「このような変化に対してはこの処理をします」と指示するだけなので、Reactと比べると手続きが簡単だ。

２.子コンポーネントへの変数の受け渡し

次に、親から子コンポーネントへ変数を渡す方法について説明する。 SPAを構築する際にコンポーネントを分割すると、変数の受け渡しが必要になる。 Reactではこの時点でpropsが使用されるが、Svelteも同様の機能を提供する。

以下のコードでは、ボタンをクリックすると発動するincrement関数を用いた。 increment関数は1で書いたものと同じで、左側のメインのコードに書かれていると思ってほしい。（下記では省略している。） 親コンポーネントでPrimary buttonをクリックすると、countの数値が1ずつ増える。 そして、増加したcount変数がNestedコンポーネントのanswerに渡され、「The answer is 〇〇」の値が1ずつ増加する。 変数を受け取るためにexportを使用するのは少々特殊な表現かもしれないが、使い方自体は簡単だ。

３.グローバルな状態管理

SvelteはReactなどとは異なり、初めからグローバルな状態管理機能が備わっている。 それがStoreだ。Storeを利用するためには、初めにwritableをインポートする必要がある。 writableの引数に初期値を設定し、状態管理する変数を定義する。 その後、updateメソッドを使って値を更新すると、その値は別のコンポーネントから呼び出された時も更新された値として取り出される。

この機能のおかげで、コンポーネントの階層が深くなった時でも、「親→子→孫」のようにコンポーネント間で変数をバケツリレーすることなく状態を管理できる。 これは様々なコンポーネント間で値を共有したい場合に非常に便利な、SPAにおける必須の技術だ。

ただし、Storeを使用する際には一つ注意が必要だ。SvelteでStoreの変数を呼び出した場合、その変数を最後に破棄しないと、変数がメモリを占有し続けてしまう。 つまり、破棄せずに何度もそのStoreを持つコンポーネントを呼び出し、その後削除するという処理を繰り返すと大量のメモリを消費し、 コンピュータをフリーズさせる可能性がある。

そのため、必ず最後にonDestroyで変数を破棄することが必要だ。 方法としては、onDestroyをインポートし、その引数に変数を入れる。 呼び出す際には、subscribeを使用するが、その結果をunsubscribeに格納し、それをonDestroyの引数に入れる。 ただし、この方法を使わなくても簡略化した方法で変数を破棄できる。次の項で説明する。

中身の細かい部分は分かりにくいが、最後にこのお作法で破棄するとだけ覚えておこう。

４.subscribedとunsubscribedを使わない方法

上記の方法でも状態管理は行えるが、いささか面倒である。 そこで、subscribedとunsubscribedの処理を内部で勝手にやってくれる方法がある。 それがドル（$）マークを付ける方法だ。 $で始まる変数はストア値を参照していると見なされ、ストア値の読み書きを簡単にできるようにしてくれる。 つまり$countを用いて、参照、書きこみを行えば良い。簡単である。 リアクティブの（$:）と似ているので、そこだけ間違えないようにしよう。

５.まとめ

今回はSvelteのstateとリアクティブ、コンポーネント間の変数の受け渡し、そしてグローバルな状態管理について説明した。 ReactやVueと同様のSPAの機能が、より少ないコードで書けることを理解できたと思う。 コードの記述自体も直感的なので、他のフロントエンドフレームワークを使ったことがある人はもちろん、初めての人でも気軽に試してみてほしい。 きっと、その良さを実感できるはずだ。

▼参考図書、サイト

   Svelte公式日本語サイト　Svelte.jp
   【Svelte.js入門】ReactやVueに挫折した人でも大丈夫！Svelteとfirebaseでシンプルアプリ開発　Udemy
  Svelte学習帖　fkuMnk