入門
Svelte 3入門
10

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

國仲 義則
國仲 義則 | フロントエンド・エンジニア

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

國仲 義則
國仲 義則 | フロントエンド・エンジニア

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

國仲 義則
國仲 義則 | フロントエンド・エンジニア

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

國仲 義則
國仲 義則 | フロントエンド・エンジニア

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

國仲 義則
國仲 義則 | フロントエンド・エンジニア

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

國仲 義則
國仲 義則 | フロントエンド・エンジニア

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

國仲 義則
國仲 義則 | フロントエンド・エンジニア

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

國仲 義則
國仲 義則 | フロントエンド・エンジニア

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

國仲 義則
國仲 義則 | フロントエンド・エンジニア

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

國仲 義則
國仲 義則 | フロントエンド・エンジニア