Svelte 勉強会
基本
code:js
<script>
let hello = 'hello'
</script>
<!-- html -->
- コンポーネント
- on:click
- リアクティビティ
- ストア
- props
- イベント (emit)
- lifecycle hook
- ロジック (if & for each)
ケーススタディ
キーポイント
ポイント 1: key block
リレンダーさせる key block もあります。
key block
https://gyazo.com/3e66516e9a7ca1aeca45454b9b67c328
key block を使わずのリアクティブレンダリング
https://gyazo.com/d07d0bd984b5945070db0a3f40eddd9d
- つまり必要ない時は使わない方がいい
ポイント 2: on:click
on:click の関数に引数を渡すと、その関数はページがロードされるときに叩かれます。(引数なしは大丈夫)
これは vue と違います!
on:click の括弧内で関数がすぐ実行されないようにどう書けばいいでしょうか?
code:js
<div on:click={ ? ? ? } />
答え:
code:js
<div on:click={ () => hoge(piyo) } />
一部のフレームワークでは以上の書き方はパフォーマンス的にあまり良くないですが、svelte の公式チュートリアルによるとsvelteでこう書くのは大丈夫です! ポイント 3: ストアのリアクティビティ
$ をストア値に付けばリアクティブになるが、コードの部分だとそれは十分ではありません。
例えば、
code:js
let myBurger = $goodBurger
以上の goodBurger が変更されても、myBurger が変わりません。
なので、以下のように書かないとだめです。
code:js
$: myBurger = $goodBurger
(働いている職人の数を計算するときに出くわした問題)
ストアの値をメソッドを介さないとリアクティブになりません。
なので、メソッドを使うのは必須です。
(メイン画面のボタンを手に入ったresourceによって表示するかどうかを実装した時出くわした問題)
ポイント 3.5: svelte のリアクティビティはアサインメントで行う
以上の例を使えば、
code: js
ramenList.push(‘Veggie Ramen’);
ストアの時と同じ、これはリアクティブではありません(ストアではないの値が変更されても、アサインメントがないと何も発生しません)。
なので、以下のようにすれば大丈夫です。
ポイント4:$ の順番
リアクティブのステートメントは必ず普通のステートメントの後で実行されます。
これはエラーになります。beautifulPlaces.push が先に実行されるので、それはつまり存在していない (undefined) の値に push しようとしています。
もし $: beautifulPlaces の値に push したいなら、その push の部分も $ を使わなければなりません。
code:js
$: beautifulPlaces.push("Central Park");
ポイント5: ストア cloneDeep できない
以上のポイントと比べてそれほど重要ではないですが、svelte motion の tweened は cloneDeep できません。
(expedition mode の魔物を tweened object に cloneDeep で作ろうとしたが、だめでした)
まとめ
svelte はとても使いやすいです!
個人的に vue 3 より好きです。
みなさん時間があればぜひ試してください。