Svelte3のストアを触ってみる
自分が書いたタイミングがv3リリース後すぐだったので今のSvelteと差異があるかも。
つくったやつリポジトリ
つくったやつ
ushironoko-svelte-sample.netlify.com
つくったってほどでもないけど一応netlifyに投げた。
消えるフレームワークことSvelteが少し前にv3になったということで、少し前に触っていた。中でもstore周りが面白かったのでメモがてらに書き起こしてみる。
Svelteとは
Write less code、No VDOM、Truly reactiveを掲げる新し目のWebアプリケーションフレームワークで、ビルドするとランタイムが消える。つまりプレーンなjsアプリケーションとして動かすことができる。いつの間にかランタイム実装周りがTS化してた。
面白いのはSvelte本体がstoreを内包しているところで、実装自体も200行弱ととてもシンプル。
Svelteでは.svelte
ファイルの中にscriptとhtmlの双方を書くことができる。例えばカウントの値をstoreに管理させるコードはこうなる。
<script> import { count } from '../store/stores.js' export let incrementalButtonText export let decrementalButtonText export let resetButtonText </script> <p>count: {$count}</p> <button on:click={count.increment}>{incrementalButtonText}</button> <button on:click={count.decrement}>{decrementalButtonText}</button> <button on:click={count.reset}>{resetButtonText}</button>
こんな風にscript
内にロジックを記述して、外にJSXライクなマークアップを書く。これはボタンコンポーネントとしての実装だとして、ルートコンポーネントで使うときはこう。
<script> import Buttons from './components/Button.svelte' let incrementalButtonText = ' + ' let decrementalButtonText = ' - ' let resetButtonText = ' 0 ' </script> <Buttons {incrementalButtonText} {decrementalButtonText} {resetButtonText} />
子でexportした変数を親からpropsで渡す。結構独特な記述。
肝心のstoreはこうなっている。
import { writable } from 'svelte/store'; function createCount() { const { subscribe, set, update } = writable(0); return { subscribe, increment: () => update(s => s + 1), decrement: () => update(s => s - 1), reset: () => set(0) }; } export const count = createCount();
svelte/store
から必要なAPIをimportする。例えばwritable
は初期値を渡すとsubscribe
、set
、 update
の3つを吐き、それぞれリアクティブに動作する関数を定義することができる。
ユニークな点としてreadable
という読み取り専用ストアとderived
というストアを派生させるAPIが用意されている。派生させたストアは依存関係が更新されると引数にとったコールバックが実行される。
https://svelte.dev/docs#derived
TSで再実装されているのでTSで書けばストア周りの型が効くはず。
所感
シンプルかつ高速で型も効いて良さげ。store周りはコンポーネントごとに状態管理を持つ感じで、最近流行ってるやつだとは思う。
バケツリレー時のemitの記述量が少なくなるようなアプローチをとっている点もユニークで面白い。またアニメーション、モーション、トランジション等のサポートもコアに含まれているので、Vue飽きたなって人はこっちでそういうのやってみても面白いかもしれない。
すぐに試してみたい時は公式チュートリアルがあってブラウザ上で色々学べる。a tour of go的な。
あとは公式REPLがあってこれもブラウザで試せる。
ちなみに読み方はスヴェルテっぽい。フランス語でシュッとした的な意味らしい。