🐌

Svelteわけわからん

2024/10/28に公開

小一時間LEARN.SVELTE.DEV.Part1やったがわけわからん。多分なんもわかっていない。

概要

.svelteファイルという、<script>, <html系のタグ>, <style>を含むコンポーネントファイルがあり、

それは単一のjsファイルにコンパイルされる。

get started

https://svelte.jp/

のチュートリアルを進めていく。

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