出版書誌データベース

近年急速に注目を集めるフロントエンドライブラリ「htmx」について、その作者自身らが執筆した解説書です。
htmxの魅力はそのシンプルさにあります。そのシンプルさは、30年にわたりウェブを支えてきたハイパーメディアの力を再発見し、HTMLそのものを拡張するという発想から生まれました。
本書の第1部では、ハイパーメディアの歴史としくみを紐とき、ウェブの根幹でありながら現代では誤解されがちなRESTの本来の概念を丁寧に解説します。そして、Web 1.0スタイルのアプリケーションを作成しながら、ハイパーメディアの中核的なコンセプトをおさらいします。
第2部では、ハイパーメディアの力を最大限に引き出すhtmxのしくみと使い方を紹介します。「あらゆる要素からHTTPリクエストを発行できる」「任意のイベントでリクエストをトリガできる」といったhtmxの基本概念を、実際にウェブアプリケーションを作成しながら学びます。
第3部では、モバイル版のhtmxともいえる「Hyperview」を紹介します。モバイルアプリにもハイパーメディアの概念を取り入れることで、htmxと同様の強力さとシンプルさを兼ね備えたモバイルアプリケーションを作成できることを示します。
複雑化した現代のフロントエンド開発に疲れてしまった方は、本書を手にぜひ一度、htmxにチャレンジし、ハイパーメディアシステムとしてのウェブの本来の力を再発見してください。こんなにシンプルで軽やかなウェブ開発の方法があったのかと、きっと驚かれるはずです。

序文
訳者まえがき

■■第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　モバイルハイパーメディア駆動型アプリケーション

おわりに
索引

著：Carson Gross
Carson Grossは、htmx、hyperscript、その他のオープンソースソフトウェアプロジェクトの作者です。モンタナ州立大学でコンピュータサイエンスを教えており、ハイパーメディアやプログラミング言語コンパイラに関する授業も担当しています。また、ソフトウェアコンサルティング会社Big Sky Softwareの経営者でもあります。モンタナ州ボーズマンで家族と暮らしています。

著：Adam Stepinski
Adam Stepinskiは、Instaworkのエンジニアリング・ディレクターです。スタートアップからGoogleに至るまで、さまざまな企業の技術プラットフォームの構築およびスケーリングにおいて15年以上の経験があります。彼は、モバイルアプリのリリースと保守にかかる労力と時間が過大であるという共通の問題を解決するためにHyperviewを開発しました。ライス大学でコンピュータサイエンスの理学士号（BS）と数学の文学士号（BA）を取得しました。現在は妻と2人の娘とともにサンフランシスコに住んでいます。

著：Deniz Aksimsek
Deniz Aksimsekは、htmxと_hyperscriptのコントリビューターであり、UIツールキットMissing.cssの作者です。彼はTED大学でコンピュータ工学の学士号を取得しました（その間に『ハイパーメディアシステム』を執筆しました）。現在はウェブ開発の委託業務を行っています。トルコのサムスンで、両親、兄弟、猫、犬とともに暮らしています。