実践 Svelte入門

（概要）

「Svelte（スベルト）」は、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつです。Svelteには、ユーザインターフェイスで重要な役割を担う「状態管理」を特別な記法や関数を使うことなく記述できる、作成したコンポーネントをランタイムなしで実行可能な形に変換する（コンパイル）といった特徴があります。本書では、近年注目を集めているSvelteの基本について解説するとともに、SvelteをベースとしたWebフレームワーク「SvelteKit」によるWebアプリケーション開発についてもしっかり解説します。


（こんな方におすすめ）

・Svelteによるユーザインターフェイス開発に興味がある人

・SvelteKitによるWebアプリケーション開発に興味がある人


（目次）

【Svelte編】

第1章 はじめてのSvelte

　1.1 Svelteの誕生と特徴

　 1.1.1 Svelteの特徴

　 1.1.2 Svelteにおける「コンパイル」

　 1.1.3 仮想DOMを使わない

　1.2 Svelteチュートリアル：ECサイトの商品ページ作成

　 1.2.1 プロジェクトの準備

　 1.2.2 HTML/CSSによる画面構成要素の作成

　 1.2.3 変数とイベントハンドラによる「カートに入れる」ボタンの挙動作成

　 1.2.4 配列と{#each}構文による関連商品の表示

　 1.2.5 コンポーネントの分割

第2章 Svelteの基本

　2.1 環境構築

　 2.1.1 Svelte公式のREPL

　 2.1.2 Viteによる開発環境の構築

　2.2 コンポーネント

　 2.2.1 .svelteファイルの構造

　 2.2.2 テンプレートの基本的な記法

　 2.2.3 スタイル

　 2.2.4 ブロック

　 2.2.5 コンポーネントの使用

　 2.2.6 プロパティ

　 2.2.7 スロット

　 2.2.8 イベント

　 2.2.9 ライフサイクル

第3章 Svelteのリアクティビティ

　3.1 コンポーネントのリアクティビティ

　 3.1.1 変数代入

　 3.1.2 $:プレフィックス

　 3.1.3 配列とオブジェクトの更新

　 3.1.4 入力のバインディング

　 3.1.5 メディア要素のバインディング

　 3.1.6 コンポーネントバインディング

　 3.1.7 thisバインディング

　3.2 ストア

　 3.2.1 writableストア

　 3.2.2 $による自動購読

　 3.2.3 $による代入

　 3.2.4 readableストア

　 3.2.5 derivedストア

　 3.2.6 カスタムストア

　 3.2.7 ストアのバインディング

第4章 Svelteの高度な機能

　4.1 高度なテンプレート記法

　 4.1.1 キー付きの{#each}ブロック

　 4.1.2 {#key}ブロック

　 4.1.3 {@...}タグ

　 4.1.4 タグ

　4.2 モジュールコンテキスト

　 4.2.1 各インスタンス間での状態の共有

　 4.2.2 コンポーネント以外のエクスポート

　4.3 モーション・トランジション・アニメーション

　 4.3.1 モーション

　 4.3.2 トランジション

　 4.3.3 アニメーション

　4.4 コンテキスト

　 4.4.1 コンテキストAPIの使い方

　 4.4.2 コンテキストの特徴とストアとの比較

　4.5 アクション

　 4.5.1 アクションの基本的な使い方

　 4.5.2 アクションの例：DOM要素のリサイズ検出

【SvelteKit編】

第5章 SvelteKitによる複数ページアプリケーションの開発

　5.1 SvelteKitの基本と導入

　 5.1.1 SvelteKitとは

　 5.1.2 プロジェクトの作成

　 5.1.3 SvelteKitプロジェクトのファイル構造

　5.2 デモアプリケーションの実装を読み解く

　 5.2.1 ページを表す.svelteファイル

　 5.2.2 レイアウト―複数のページに共通の要素を配置

　 5.2