12周年記念パーティ開催! 2024/5/10(金) 19:00

Svelte 3入門

全10回

ReactやVue.jeとも違う、シンプルで新しいアプローチの開発ツール、Svelteを紹介します。

最終回 Store:Storeの発展

既存のStoreを利用して新たにreadableなStoreを作り出す、derivedという機能を紹介します。また、Svelteが用意しているwritableやreadableを利用してカスタムStoreを作成する方法も見てみましょう。

第9回 Store:Storeの基本

Svelteに用意されているStoreを解説します。まずは、Storeを利用する側からその状態を変更可能な「書込み可能なStore」と、外部から値を書き換えることが不可能な「読み取り専用のStore」を見てみましょう。

第8回 ディレクティブ:その他

前回までで解説した、on:とbind:以外のディレクティブについて紹介します。クラス名のつけ外しによるスタイル変更や要素が作成されたときに実行される関数の指定、遷移アニメーションなどを見てみましょう。

第7回 ディレクティブ:変数への紐付け

UIと結びつく値をスクリプトで操作する際に便利な、bind:ディレクティブを解説します。bind:thisとbind:property、bind:groupの3つを見てみましょう。

第6回 ディレクティブ:イベント処理

要素の動作をコントロールするためのディレクティブを紹介します。今回は使用頻度が高い、on: ディレクティブについて解説します。

第5回 コンポーネントのスタイル指定

コンポーネントのスタイル指定は<style>で行いますが、複数のコンポーネントが存在する場合やスコープが問題になる場合など、いくつか注意点があります。詳しく見てみましょう。

第4回 Promise処理/HTML文字列/デバッグ構文

引き続き、Svelteコンポーネントに備わった独自のマークアップ構文を解説します。今回はPromise処理、HTML文字列、デバッグ構文です。

第3回 コンポーネントタグ/条件分岐と繰り返し処理

Svelteコンポーネントに備わった独自のマークアップ構文を解説します。コンポーネントのマークアップ部分に使われる、変数展開、条件分岐、繰り返し処理を見てみましょう。

第2回 コンポーネントのpropsとリアクティブステートメント

Svelteでアプリケーションを作る上で欠かすことのできない要素である、コンポーネントについて解説します。

第1回 Svelteの特徴

ReactやVue.jeとも違う、シンプルで新しいアプローチの開発ツール、Svelteを紹介します。まずはテンプレートを試してみましょう。