Svelteわけわからん
小一時間LEARN.SVELTE.DEV.Part1やったがわけわからん。多分なんもわかっていない。
概要
.svelteファイルという、<script>, <html系のタグ>, <style>を含むコンポーネントファイルがあり、
それは単一のjsファイルにコンパイルされる。
get started
のチュートリアルを進めていく。
reactivity システム
let a = 1;
$: a_plus_one = a + 1;
これで変数を自動更新できる。
逆に更新したくないときはconstを使う。
props
とくになし。
Logic
if, each, await
awaitがあるのがJavaScriptっぽいと思う。
Events
オリジナルのコンポーネントについて、オリジナルのイベント作れるのが面白い。
<script>
import { createEventDispatcher } from 'svelte';
</script>
...
<button on:originalevent />
Bindings
子から親の変数を書き換えるために、script内の変数と、コンポーネントをバインドする
具体的にはbind:をつけるだけだが、だんだん何が起こっているのか頭で把握しきれなくなってきた。
Lifecycle
基本的にメモリリークを防ぐために、onDestroyで何を書けばいいか学習しておきましょう。という感じ。
onMount(fstart, fend)
beforeUpdate(() => {})
afterUpdate(() => {})
await tick();
tickだけは例外で、イベント発動タイミングをちょっとずらすというよくわからない動作をする。
バグっているときawait tickすれば治る。(???)
Stores
「subscribeメソッドを正しく実装しているオブジェクト」
というわけわからん概念。
readableは何らかの値を生成して返すクラスに見える。
subscribeすると値が変化したときにイベントみたいなものが飛ぶ。
writableはもっとよくわからん。set(value), update(lambda)というメソッドを追加で持っている。
subscribeは$でも書ける。これをauto-subscribeという。
どゆこと
一旦終わり
これで基本を学習したので、次はSvelteの高度なテクニックを学ぶ時間です。
まずはmotionから始めましょう。
いやいや、こりゃあと3周しないとなんもわからんな・・・
Discussion