実践Svelte入門(エンジニア選書) [単行本]

実践Svelte入門(エンジニア選書) [単行本] の 商品概要

• 要旨（「BOOK」データベースより）

  Ｓｖｅｌｔｅ（スベルト）は、ユーザーインターフェイスを構築するためのＪａｖａＳｃｒｉｐｔフレームワークのひとつです。本書の前半では、Ｓｖｅｌｔｅの基本に加え、開発環境の構築、複雑なＵＩを構築するための各種機能を解説します。本書の後半では、ＳｖｅｌｔｅをベースにしたＷｅｂアプリケーションフレームワーク「ＳｖｅｌｔｅＫｉｔ」について、サーバーサイドの記述も含め丁寧に解説しています。

• 目次

  【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　svelte:...タグ
  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.svelte
  - 6.2.2　+page.jsと+page.server.js
  6.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　handle
  - 6.7.3　handleFetch
  - 6.7.4　handleError
  6.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/kit
  - 6.8.7　$env―環境変数へのアクセスを提供するモジュール
  6.9　ビルドとデプロイメント
  - 6.9.1　設定が不要なホスティングサービス―adapter-auto
  - 6.9.2　Nodeサーバーとしてのビルド―adapter-node
  - 6.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　プリレンダリングの動作確認

• 内容紹介

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

• 著者紹介（「BOOK著者紹介情報」より）（本データはこの書籍が刊行された当時に掲載されていたものです）

  Kyohei Hamaguchi(KYOHEI HAMAGUCHI)
  １９９０年三重県生まれ。筑波大学情報科学類でコンピュータサイエンスを学び、以降１５年にわたり起業家兼ソフトウェアエンジニアとして活動。現在は米国・ドイツの企業を対象にエンジニアリングとコンサルティングに従事する傍ら、パーソナルデータの保護を推進する非営利団体Ｃｏｎｓｃｉｏｕｓ　Ｄｉｇｉｔａｌに参画し、国内法への対応を支援している。登録情報セキュリティスペシャリスト
  
  小関 泰裕(コセキ ヤスヒロ)
  １９９０年山形県生まれ。筑波大学情報学群卒。現在は主にＷｅｂアプリケーション分野のソフトウェアエンジニアとして活動中。学部生時代にシステムプログラミングの授業で作った自作のＨＴＴＰサーバーがブラウザと通信できることに感動し、以降Ｗｅｂの面白さに取りつかれる。フロントエンド開発ではＲｅａｃｔ、Ｖｕｅと渡り歩き、Ｓｖｅｌｔｅが良いらしいと聞いて使い始め、今では実案件でも個人開発でもＳｖｅｌｔｅを使うようになった。近年は、専攻していた分散ソフトウェア分野とＷｅｂ分野の交差点にあたるＷｅｂＲＴＣ技術に注目し、本書共著者とともにＷｅｂＲＴＣを用いたビデオチャットＳＤＫを開発している

• 著者について

  Kyohei Hamaguchi (tnzk) (キョウヘイ ハマグチ)
  Kyohei Hamaguchi (tnzk)
  1990年三重県生まれ。筑波大学情報科学類でコンピュータサイエンスを学び、以降15年にわたり起業家兼ソフトウェアエンジニアとして活動。現在は米国・ドイツの企業を対象にエンジニアリングとコンサルティングに従事する傍ら、パーソナルデータの保護を推進する非営利団体Conscious Digitalに参画し、国内法への対応を支援している。登録情報セキュリティスペシャリスト。
  
  小関 泰裕 (コセキ ヤスヒロ)
  小関泰裕
  1990年山形県生まれ。筑波大学情報学群卒。現在は主にWebアプリケーション分野のソフトウェアエンジニアとして活動中。学部生時代にシステムプログラミングの授業で作った自作のHTTPサーバーがブラウザと通信できることに感動し、以降Webの面白さに取りつかれる。フロントエンド開発ではReact, Vueと渡り歩き、Svelteが良いらしいと聞いて使い始め、今では実案件でも個人開発でもSvelteを使うようになった。近年は、専攻していた分散ソフトウェア分野とWeb分野の交差点にあたるWebRTC技術に注目し、本書共著者とともにWebRTCを用いたビデオチャットSDKを開発している。

実践Svelte入門(エンジニア選書) [単行本] の商品スペック