実践 Svelte入門（技術評論社） [電子書籍]Ω

「Svelte(スベルト)」は，ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつです。Svelteには，ユーザインターフェイスで重要な役割を担う「状態管理」を特別な記法や関数を使うことなく記述できる，作成したコンポーネントをランタイムなしで実行可能な形に変換する（コンパイル）といった特徴があります。本書では，近年注目を集めているSvelteの基本について解説するとともに，SvelteをベースとしたWebフレームワーク「SvelteKit」によるWebアプリケーション開発についてもしっかり解説します。目次【Svelte編】第1章　はじめてのSvelte1.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公式のREPL2.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.3　フォームアクション―プログレッシブなWebアプリケーションを構築する仕組み5.3　ECアプリケーションの拡張5.3.1　①SvelteKitプロジェクトの作成5.3.2　②商品ページに対応するルートの作成5.3.3　③商品データとカートデータの取得5.3.4　④フォームアクションでのカートへの追加5.3.5　⑤「おすすめ商品」の表示第6章　SvelteKitリファレンス6.1　SvelteKitの主要な概念6.1.1　ページルート6.1.2　サーバールート6.1.3　フォームアクション6.1.4　ルーティング6.1.5　レイアウト6.1.6　SvelteKitの実行モデル6.2　ページルート6.2.1　+page.svelte6.2.2　+page.jsと+page.server.js6.3　フォームアクション6.3.1　フォームアクションの基礎6.3.2　プログレッシブなエンハンスメント6.4　サーバールート6.4.1　サーバールートとは6.5　ルーティング6.5.1　ルート6.5.2　ルートに配置できるファイル6.5.3　高度なルーティング6.6　レイアウト6.6.1　レイアウトの基礎6.6.2　レイアウトのネスト6.6.3　レイアウトのネストのリセット6.7　フック6.7.1　SvelteKitのフック6.7.2　handle6.7.3　handleFetch6.7.4　handleError6.8　ヘルパーモジュール6.8.1　$app/environment―実行環境に関する情報6.8.2　$app/forms―フォームアクションに関するヘルパー6.8.3　$app/navigation―ページ移動に関するヘルパー6.8.4　$app/paths―パスに関するへルパー6.8.5　$app/stores―アプリケーションレベルのストア6.8.6　@sveltejs/kit6.8.7　$env―環境変数へのアクセスを提供するモジュール6.9　ビルドとデプロイメント6.9.1　設定が不要なホスティングサービス―adapter-auto6.9.2　Nodeサーバーとしてのビルド―adapter-node6.9.3　静的サイトの生成とSPAモード―adapter-static第7章　MongoDBとVercelによる本番環境の構築7.1　SvelteKitアプリケーションと本番環境7.1.1　開発環境について／サンプルアプリケーションについて7.1.2　本番環境・ビルド・デプロイ7.2　MongoDBの導入7.2.1　データベースの役割7.2.2　MongoDB Atlasでデータベースを作成7.2.3　mongodbパッケージの導入と接続情報の管理7.2.4　カートをMongoDBで実装7.2.5　商品をMongoDBで実装7.3　Vercelへのデプロイ7.3.1　GitHubのセットアップ7.3.2　Vercelのセットアップ7.3.3　MongoDB Atlasのインテグレーションを導入7.3.4　環境変数の適用7.3.5　本番DBのシード7.3.6　動作確認第8章　Auth0によるパスワードレスログイン実装とセッション管理8.1　Auth0の準備8.1.1　パスワードレス認証とは8.1.2　Auth0のアカウント作成と初期設定8.2　ログインフローの実装8.2.1　ログイン処理の流れ8.2.2　ログインページの作成8.2.3　Auth0のAPIを呼び出す関数群8.2.4　コールバックURLの実装8.2.5　セッション情報をデータベースに保存8.2.6　ログインの動作確認8.3　ログインユーザーの判定と表示8.3.1　ログインユーザー情報の取得8.3.2　ログイン中のユーザーの表示8.3.3　ログアウト機能8.4　ユーザーごとのカート作成8.4.1　ユーザーIDごとにカートを作成8.5　Vercelへのデプロイ8.5.1　Auth0を使うための準備8.5.2　環境変数の設定第9章　ユーザー体験の改善―OGPタグとプリレンダリング9.1　OGPタグの追加9.1.1　OGPタグとJavaScriptアプリケーション9.1.2　商品ページにOGPタグを追加9.1.3　SSRの無効化9.1.4　CSRの無効化9.1.5　Vercelへのデプロイとカードの動作確認9.2　プリレンダリング9.2.1　商品ページのプリレンダリング9.2.2　カートページの準備9.2.3　カート情報のクライアントサイドでの読み込み9.2.4　「カートに入れる」ボタンの挙動を改善9.2.5　プリレンダリングの動作確認