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

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

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

  「Ｒｅａｃｔ疲れ」していませんか？効率的にモダンなインタラクションを記述できるｈｔｍｘ。

• 目次

  序文
  訳者まえがき
  
  ■■第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　モバイルハイパーメディア駆動型アプリケーション
  
  おわりに
  索引

• 内容紹介

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

• 著者について

  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大学でコンピュータ工学の学士号を取得しました（その間に『ハイパーメディアシステム』を執筆しました）。現在はウェブ開発の委託業務を行っています。トルコのサムスンで、両親、兄弟、猫、犬とともに暮らしています。
  
  嶌田 喬行 (シマダ タカユキ)
  嶌田喬行は、堅牢でアクセシブルなUIの設計および実装に強みを持つフロントエンドエンジニアです。現在はデザインエンジニアとして公共領域のデザインシステム開発に従事し、デザイン、実装、啓発活動まで幅広く手がけています。大学で情報学を修めたのち、およそ15年にわたって受託制作や事業会社での多様なプロジェクトに携わってきました。小学生の頃に初めて自作のウェブサイトを公開して以来、ウェブの可能性に惹かれ続けています。現在は埼玉県で妻と息子と猫と一緒に暮らしています。

ハイパーメディアシステム―htmxとRESTによるシンプルで軽やかなウェブ開発 の商品スペック