ハイパーメディアシステム──htmxとRESTによるシンプルで軽やかなウェブ開発

序文
訳者まえがき

■■第1部　ハイパーメディアのコンセプト

■序章　イントロダクション
●1　ハイパーメディアシステムとは何か？
●2　ハイパーメディア駆動型アプリケーション
●3　目標
●4　本書の構成
●5　ハイパーメディア：新世代

■第1章　ハイパーメディア：再入門
●1.1　ハイパーメディアとは何か？
●1.2　ハイパーメディアの簡単な歴史
現代における実装
●1.3　世界で最も成功したハイパーテキスト：HTML
ハイパーメディアとしてのHTMLの本質
アンカー要素
フォーム要素
Web 1.0アプリケーション
ハイパーメディアでないものとは？
シングルページアプリケーション
●1.4　なぜハイパーメディアを使うのか？
JavaScript疲れ
●1.5　ハイパーメディアの復活？
ハイパーメディア指向のJavaScriptライブラリ
ハイパーメディア駆動型アプリケーション
●1.6　いつハイパーメディアを使うべきか？
●1.7　ハイパーメディアを使うべきではないときは？
●1.8　ハイパーメディア：洗練されたモダンシステムアーキテクチャ

■第2章　ハイパーメディア システムの構成要素
●2.1　ハイパーメディアシステムの構成要素
ハイパーメディア
ハイパーメディアプロトコル
HTTPメソッド
HTTPレスポンスコード
HTTPレスポンスのキャッシュ
ハイパーメディアサーバ
ハイパーメディアクライアント
●2.2　REST
RESTの「制約」
クライアント／サーバ制約
ステートレス制約
キャッシュ制約
統一インタフェース制約
リソースの識別
表現によるリソース操作
自己記述的メッセージ
アプリケーション状態のエンジンとしてのハイパーメディア（HATEOAS）
HATEOASおよびAPIの変化
階層化システム制約
オプションの制約：コードオンデマンド
●2.3　まとめ

■第3章　Web 1.0アプリケーション
●3.1　「ウェブスタック」の選定
●3.2　Python
●3.3　Flaskの紹介：最初のルート
●3.4　Contact.appの機能
検索可能な連絡先リストの表示
リストと検索のテンプレート
新しい連絡先の追加
/contacts/newへのPOSTの処理
連絡先詳細の表示
連絡先詳細テンプレート
連絡先の編集と削除
/contacts/contact_id/editへのPOSTリクエストの処理
連絡先の削除
Contact.app……実装完了！

■■第2部　htmxによるハイパーメディア駆動アプリケーション

■第4章　HTMLのハイパーメディアとしての拡張
●4.1　ハイパーリンクに注目する
なぜアンカーとフォームだけなのか？
なぜクリックイベントと送信イベントだけなのか?
なぜGETとPOSTだけなのか？
なぜ画面全体を置き換えるしかないのか？
●4.2　htmxでHTMLをハイパーメディアとして拡張する
htmxのインストールと使用
JavaScriptは不要……
●4.3　HTTPリクエストのトリガ
すべてはただのHTML
htmx vs.「ただの」HTMLレスポンス
●4.4　他の要素をターゲットにする
●4.5　差し替え方式
●4.6　イベントの使用
●4.7　htmx：HTML eXtended
●4.8　リクエストパラメータの受け渡し
フォームで囲む
入力を含める
相対CSSセレクタ
インラインの値
●4.9　履歴のサポート
●4.10　まとめ

■第5章　htmxのパターン
●5.1　htmxのインストール
●5.2　アプリケーションのAjax化
ブーストされたリンク
ブーストされたフォーム
属性の継承
プログレッシブエンハンスメント
Contact.appに「hx-boost」を追加する
●5.3　次のステップ：HTTP DELETEで連絡先を削除する
サーバサイドコードの更新
レスポンスコードの落とし穴
適切な要素をターゲットにする
アドレスバーのURLを適切に更新する
One More Thing…
プログレッシブエンハンスメント？
●5.4　次のステップ：連絡先メールアドレスの検証
入力タイプの更新
インライン検証
サーバサイドでのメールアドレスの検証
ユーザー体験をさらに高める
検証リクエストのデバウンス
非変更キーを無視する
●5.5　アプリケーションの改善点：ページング
クリックして「もっと見る」
無限スクロール

■第6章　さらなるhtmxのパターン
●6.1　アクティブ検索
現在の検索UI
アクティブ検索の追加
正しい要素をターゲットにする
コンテンツを削ぎ落とす
htmxのHTTPリクエストヘッダ
テンプレートの分割
新しいテンプレートの使用
「hx-push-url」を使ったアドレスバーの更新
リクエストインジケータを表示する
●6.2　遅延読み込み
高コストなコードの切り離し
インジケータの追加
でも「遅延読み込み」じゃない！
●6.3　インライン削除
ターゲットの絞り込み
サーバサイドの更新
htmxの差し替えモデル
「htmx-swapping」を活用する
●6.4　一括削除
「選択した連絡先を削除」ボタン
「選択された連絡先を削除」のサーバサイド

■第7章　動的アーカイブUI
●7.1　UIの要件
●7.2　実装の開始
●7.3　アーカイブエンドポイントの追加
●7.4　条件付きで進捗状況のUIを表示する
●7.5　ポーリング
アーカイブUIを更新するためのポーリング
プログレスバーUIの追加
結果をダウンロードする
完成したアーカイブのダウンロード
●7.6　htmxのアニメーション
htmxにおける「確定」処理
スムーズ化の方法
●7.7　ダウンロードUIの消去
●7.8　代替のUX：自動ダウンロード
●7.9　動的アーカイブUI：完成

■第8章　htmxの達人技
●8.1　htmxの属性
hx-swap
hx-trigger
トリガフィルタ
非標準イベント
その他の属性
●8.2　イベント
htmxが生成するイベント
htmx:configRequestイベントを使う
htmx:abortを使用してリクエストをキャンセルする
サーバ生成イベント
●8.3　HTTPリクエストとレスポンス
HTTPレスポンスコード
●8.4　他のコンテンツの更新
選択範囲を広げる
Out Of Band差し替え
イベント
実用主義
●8.5　デバッグ
htmxイベントのロギング
Chromeでのイベント監視
●8.6　セキュリティの考慮事項
コンテンツセキュリティポリシーとhtmx
●8.7　設定

■第9章　クライアントサイドスクリプト
●9.1　スクリプトは許可されているか？
●9.2　ハイパーメディアのスクリプト
●9.3　ウェブのためのスクリプトツール
●9.4　バニラJavaScript
シンプルなカウンタ
インラインによる実装
スクリプトを分離する
振る舞いの局所性
カウンタをどうするか？
RSJS
実践バニラJS：オーバーフローメニュー
●9.5　Alpine.js
「x-on:click」対「onclick」
リアクティブ性とテンプレート
実践Alpine.js：一括操作ツールバー
操作を実装する
●9.6　_hyperscript
実践_hyperscript：キーボードショートカット
なぜ新しいプログラミング言語なのか？
●9.7　既製コンポーネントを使う
統合のための選択肢
コールバックによる統合
イベントによる統合
●9.8　実用性重視でスクリプトを書く

■第10章　JSONデータAPI
●10.1　ハイパーメディアAPIとJSONデータAPI
ハイパーメディアAPIとデータAPIの違い
●10.2　Contact.appにJSONデータAPIを追加する
APIのroot URLの決定
最初のJSONエンドポイント：全連絡先の一覧
連絡先の追加
連絡先詳細の表示
連絡先の更新および削除
さらなるデータAPIの考慮事項
ウェブアプリケーションにおける認証
2つのAPIの「かたち」
モデル・ビュー・コントローラ（MVC）パラダイム

■■第3部　ハイパーメディアのモバイルへの適用

■第11章　Hyperview：モバイルハイパーメディア
●11.1　モバイルアプリ開発の現在地
●11.2　モバイルアプリのためのハイパーメディア
WebView
Hyperview
形式
クライアント
拡張性
どちらのハイパーメディアアーキテクチャを選ぶべきか？
●11.3　HXML入門
Hello World!
UI要素
リスト
画像
入力
スタイリング
カスタム要素
ビヘイビア
アクション
トリガ
複数のビヘイビアを使う
本章のまとめ
●11.4　モバイル向けのハイパーメディア

■第12章　Hyperviewを使用した連絡先アプリの構築
●12.1　モバイルアプリの作成
●12.2　検索可能な連絡先の一覧
連絡先の検索
無限スクロール
プル・トゥ・リフレッシュ
連絡先詳細の表示
●12.3　連絡先の編集
連絡先リストの更新
●12.4　連絡先の削除
●12.5　新しい連絡先の追加
●12.6　アプリのデプロイ
●12.7　1つのバックエンド、複数のハイパーメディア形式
コンテントネゴシエーションとは？
アプローチ1：テンプレート切り替え
アプローチ2：リダイレクト分岐
●12.8　HyperviewによるContact.app

■第13章　Hyperviewクライアントの拡張
●13.1　電話とメール機能を追加する
●13.2　メッセージを追加する
●13.3　連絡先上のスワイプジェスチャ
コンポーネントの設計
コンポーネントの実装
コンポーネントの使用
●13.4　モバイルハイパーメディア駆動型アプリケーション

おわりに
索引