🤓
Svelte(スベルト)のチュートリアルをやってみた！
はじめに
チュートリアルを進めながら自分なりに噛み砕いてメモったものになります。
今回やったSvelte(スベルト)のチュートリアルは >> こちら
1. Introduction
- 普通に他のweb系と同様に
{}で値を埋め込める
2. Reactivity
- 関数などを実行した際内部で値を書き換えると対象の値が画面上でもreloadされる。
- ただしalertの方が処理順は早かった。
- リアクティブ宣言というものが存在し、代入をトリガーに動く特殊な文が書ける。これはオブジェクトの更新では動作しない。
3. Props
- 基本的にはReactとかと使い方は変わんなそう。
- ただし
$$propsという特殊な書き方ができる。
4. Logic
- 基本的には他のテンプレートエンジンと使い方の大枠は同じ。
-
#が開始、:が継続、/が終了である。 - eachの使い方が多少特殊だったり、eachブロック内でのオブジェクトの更新は注意が必要である。
5. Events
- dispatchの使い方はよくある感じ。
- modifiersなるものがあって
on:click|onceのように記述できる。
6. Bindings
- よくある感じではあるが結構複雑なことが出来そう。
- 上記やりすぎると可読性を落とすのが明白なので程々にかな。
7. Lifecycle
- 基本的にはreactやvueとそんなに変わらんイメージ。
- tickは恐らく独自でわりかし使えそうかも。
8. Stores
- よくある状態管理のやつと大差なく、あまり特殊性を感じなかった。
9. Motion
- かなり特殊でanimationを制御できるような機能。他で見たことないかも。
10. Transitions
- 今まではCSS等で指定して複雑に設定していたものを比較的簡単に設定でき要素に動きを付けられる！
- ただし懸念としては当然今までは動きや見た目の部分はCSSで制御すると割っていた部分だがこれを使ってしまうとJSでの役割が複雑になる可能性はあるかなと思う。
- 個人的にkey blockのチュートリアルがとても好き。
11. Animations
- こちらもJS側でCSSがよりコントロールできる要素である。
12. Actions
- 他のFW等にもあるactionと同じかなと思う。普通にmethodと言い換えて問題ない気がする。
13. Advanced styling
- 動的にcssの値を変更出来たりclassを変えれたりと便利ではある。
- 同様の属性が定義されていてもstyleディレクティブの方が優先される。
- 他と同様ショートハンドが使える。
14. Component composition
- コンポーネントの配下の要素の位置をslotで固定したり、nameで特定の要素をコンポーネント呼び出し側から指定して挿入できる。また要素が空のケースのデフォルトも定義できる。
-
$$slotsで要素が渡ってきているか判定できる。 - 親コンポーネントにデータを渡したい時、slotにプロパティを定義出来て親コンポーネントからはletディレクティブで指定できる。
15. Context API
-
setContext()で値や関数をセットすることができ、セットした後は各コンポーネント内で設定したもののgetter(getContext())を実行できる。 - 上記でセットする際のキーはなんでも良いが
const key = Symbol()で完全に一意な文字列を取得できる。 - context apiはコンポーネントとその子孫のみでのやりとりになる。これはprotectedのイメージ。複数インスタンスを管理する際にお互いの状態に干渉しないようにできる。
- 上記の件例えばstoresだとアプリ上どこでも参照できるので干渉してしまう。global
16. Special elements
- コンポーネントや要素をより扱い易くし、分岐の数を減らすような工夫ができる。
17. Module context
- インスタンス化されたタイミングでの実行ではなくモジュールが評価されたタイミングで一度だけ実行されるように
<script>を定義できる。 -
context="module"のブロックからexportするとモジュールからエクスポートされたことになる。当然こいつをインポートすることができる。
18. Debugging
-
{@debug ...}はdevtoolsを開くと実行を一時停止させられる。
19. Next steps
さいごに
- 今回やってみて長いけどやっぱり公式が出してるチュートリアルなので扱いに関してはよくわかった気がしています。
- この後はSvelteKitのドキュメントを読み進める予定です！！
- Twitterフォローして頂けたらと思います！仲良くしましょう！！
Discussion