HTML、HTML中心の動的UIライブラリの紹介

最新のWebユーザーは、スムーズで動的なシングルページアプリケーション（SPA）エクスペリエンスを期待しています。ただし、スパを作成するには、多くの場合、ReactやAngularなどの複雑なフレームワークが必要であり、それらを学習して使用することは複雑です。 HTMXは、AJAXやCSS遷移などの機能をHTMLで直接活用することにより、動的なWebエクスペリエンスを構築するための新しい視点を提供するライブラリです。

このガイドでは、HTMXの機能、動的なWeb開発をどのように単純化するか、およびWeb開発プロセスを強化する可能性を活用する方法を調査します。

キーポイント

HTMXの基本：HTMXは、HTMLを活用して動的なWebエクスペリエンスを実現することにより、通常JavaScript集約型スパに関連付けられている複雑さを減らします。
簡単なインストール：HTMXはCDNを介してプロジェクトに簡単に統合できるため、複雑な設定なしで簡単に統合できます。
Ajaxの簡素化：このライブラリにより、特定のプロパティを使用してHTML要素から直接単純なAJAX要求を許可し、多くのJavaScriptコードを必要とせずにユーザーの相互作用を強化します。
動的コンテンツの読み込み：HTMXは、特定の要素のコンテンツ更新をサポートし、新しいコンテンツを挿入する複数の方法を提供し、Webページをよりインタラクティブにします。
ユーザーエクスペリエンスの強化：HTMXには、コンテンツを更新するときにスムーズな視覚効果を可能にするCSS遷移および実験ビュー遷移APIが組み込まれています。
フォーム処理と検証：HTMXはHTML5検証と統合され、フォームが予想どおりに実行されるようにし、使いやすさと機能を向上させます。

htmxとは何ですか？どのように機能しますか？

開発者は、インタラクティブなWebエクスペリエンスを構築する際に、それぞれ独自のトレードオフを備えた2つの主要なオプションを伝統的に持っています。一方では、ユーザーが対話するたびにページ全体を更新するマルチページアプリケーション（MPA）があります。このアプローチにより、サーバーがアプリケーションの状態を制御し、クライアントが忠実にそれを表現することを保証します。ただし、フルページのリロードにより、ゆっくりと不器用なユーザーエクスペリエンスが発生します。

一方、シングルページアプリケーション（SPA）は、アプリケーション状態を管理するためにブラウザで実行されているJavaScriptに依存しています。通常、JSON形式でデータを返すAPI呼び出しを使用してサーバーと通信します。 SPAはこのデータを使用して、ページの更新なしでユーザーインターフェイスを更新し、ネイティブデスクトップまたはモバイルアプリに多少似たスムーズなユーザーエクスペリエンスを提供します。ただし、このアプローチも完璧ではありません。通常、クライアントの処理が大きいため、計算時間が高くなります。最初のページを設定するには、最初に大規模なJavaScriptパッケージを解析する必要があります。

HTMXは、両方の極端な状況に妥協を提供します。 MPAのサーバー側のシンプルさを維持しながら、スパのユーザーエクスペリエンスの利点をフルページリロードなしで提供します。このモデルでは、サーバーはクライアントが解釈してレンダリングする必要があるデータを返すのではなく、

ですが、HTMLフラグメント

。次に、HTMXはこれらのスニペットを置き換えて、ユーザーインターフェイスを更新します。

このアプローチは、クライアントの複雑さとSPAが一般的に使用する多数のJavaScript依存関係を最小限に抑えることにより、開発プロセスを簡素化します。複雑なセットアップは必要なく、スムーズで応答性の高いユーザーエクスペリエンスを提供します。

インストールhtmx

プロジェクトにHTMXを含める方法は複数あります。プロジェクトのgithubページから直接ダウンロードできます。または、node.jsを使用している場合は、npmを介してhtmx.orgをインストールするコマンドを使用してインストールできます。

ただし、最も簡単な方法（このガイドで使用されるもの）は、コンテンツ配信ネットワーク（CDN）を介してそれを含めることです。これにより、セットアップまたはインストールプロセスなしでHTMXの使用を開始できます。 HTMLファイルに次のスクリプトタグを含めるだけです。

このスクリプトタグはバージョン1.9.4を指しますが、新しいバージョンが利用可能な場合は、「1.9.4」を最新バージョンに置き換えることができます。

<🎜>

HTMXは非常に軽量で、最小値とGZIPバージョンの重量は約14kbです。依存関係はなく、IE11を含むすべての主要なブラウザと互換性があります。

プロジェクトにHTMXを追加した後、適切に機能するかどうかを確認することができます。次の簡単な例でテストできます。

ボタンをクリックすると、HTMXが適切に動作する場合、Goke APIにGETリクエストを送信し、サーバーの応答に置き換えます。 タグの内容。

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

ajaxリクエスト：htmxメソッド

HTMXの主なセールスポイントの1つは、開発者が異なる属性セットを活用することにより、HTML要素からAJAX要求を直接送信できることです。各属性は、異なるHTTPリクエスト方法を表します：

hx-get：指定されたURLにget requestを作成します。

hx-post：指定されたURLへのリクエストを投稿します。

hx-put：指定されたURLにプットリクエストを公開します。

• HX-Patch：指定されたURLにパッチ要求を指定します。
• HX-DELETE：指定されたURLに削除要求を指定します。
これらの属性は、AJAXリクエストを送信するURLを受け入れます。デフォルトでは、AJAX要求は、HTML要素の「自然な」イベント（たとえば、ボタンの場合のクリックイベント、または入力フィールドの場合の変更イベント）によってトリガーされます。
以下を検討してください：

上記の例では、ボタン要素にHX-getプロパティが割り当てられています。ボタンをクリックした後、 /API /リソースURLにGETリクエストが行われます。

サーバーがデータを返した後はどうなりますか？デフォルトでは、HTMXはこの応答をスタートアップ要素に直接挿入します。例では、ボタンです。ただし、HTMXはこの動作に限定されず、ターゲット要素として応答データを指定する機能を提供します。次のセクションでは、この機能をさらに詳しく調べます。

htmx

<button hx-get="/api/resource">Load Data</button>

を使用したトリガーリクエスト

HTMXは、特定の要素で発生する特定のイベントに応じてAJAXリクエストを開始します。

• 入力、Textarea、および選択要素の場合、これは変更イベントです。
フォーム要素の場合、これは送信イベントです。
他のすべての要素については、これがクリックイベントです。

上記のジョーク例を拡張して、これを実証して、ユーザーが特定の単語を含むジョークを検索できるようにします。

検索をトリガーするには、変更イベントをトリガーする必要があります。

<🎜>

要素の場合、これは要素の値が変化し、焦点を失ったときに起こります。したがって、ボックスに何か（「バー」など）を入力し、ページの他の場所をクリックすると、ジョークが

要素に表示されます。これは良いことですが、通常、ユーザーは入力中に検索結果を更新したいと考えています。これを行うには、<input>要素にhtmxトリガー属性を追加できます：<div> <input>

結果はすぐに更新されます。これは良いことですが、新しい問題を導入します。すべてのキープレスでAPI呼び出しを使用しています。これを回避するために、修飾子を使用してトリガーの動作を変更できます。 HTMXは次のとおりです

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

1回：リクエストを1回だけ実行する場合は、この修飾子を使用します。

変更：この修飾子は、要素の値が変更された場合にのみリクエストが行われることを保証します。
遅延：
• ：この修飾子は、リクエストを行う前に待機時間（1秒）を設定します。この待機期間中にイベントが再びトリガーされた場合、カウントダウンはリセットされます。
• スロットル：：このモディファイアを使用すると、リクエストを行う前に待機時間（たとえば1秒）を設定することもできます。ただし、遅延とは異なり、設定された時間内に新しいイベントがトリガーされた場合、イベントは無視され、定義された期間後にのみリクエストがトリガーされるようにします。
• from：：この修飾子を使用すると、元の要素ではなく、さまざまな要素のイベントをリッスンできます。
• この場合、遅延が必要であるように見えます：

ボックスに何かを入力すると（「開発者」など、より長い単語を使用しようとしています）、要求は一時停止またはタイピングを終了した場合にのみトリガーされます。

<button hx-get="/api/resource">Load Data</button>

ご覧のとおり、クライアントコードをわずか数行でアクティブな検索ボックスパターンを実装できます。

リクエストインジケータ

Web開発では、特に完了するのに多くの時間がかかる可能性がある操作では、ユーザーのフィードバックが重要です（ネットワークリクエストの発行など）。このフィードバックを提供する一般的な方法は、リクエストインジケーターを使用することです。これは、操作が進行中であることを示す視覚的なプロンプトです。

HTMXは、リクエストインジケーターのサポートを統合し、ユーザーにこのフィードバックを提供できるようにします。 HX-Indicatorクラスを使用して、リクエストインジケーターとして使用される要素を指定します。このクラスの任意の要素の不透明度はデフォルトであり、目に見えないがDOMに存在する。

HTMXがAJAXリクエストを行うと、HTMX-Requestクラスをスタートアップ要素に適用します。 HTMX-Requestクラスは、要素（またはHTMX-Indicatorクラスの任意の子要素）を1の不透明度に移行させます。

たとえば、

リクエストインジケーターとしてロードスピナーを使用する要素を考えてみましょう。

<🎜>

hx-get属性を持つボタンがクリックされ、リクエストが開始されると、ボタンはHTMX-Requestクラスを受信します。これにより、リクエストが完了してクラスが削除されるまで画像が表示されます。

HTMX-Indicatorプロパティを使用して、どの要素がHTMX-Requestクラスを受信するかを示すこともできます。

ジョークAPIの例でこれを実証しましょう：

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

注：CSSローダーとスピナーからスピナーのCSSスタイルを入手できます。 1回のクリックでHTMLとCSSを受信することがたくさんあります。

これにより、リクエストが進行中のときにロードスピナーが表示されます。

ネットワークが高速な場合、スピナーはリクエストが行われたときにのみ簡単に点滅します。それが存在することを確認したい場合は、ブラウザの開発ツールを使用して、ネットワーク接続速度を制限できます。

または、ただの楽しみのために（つまり、実際のアプリケーションでこれを行わないでください）、HTMXを構成して、ネットワークの遅延をシミュレートするように設定できます。

これは、HTMXのイベントシステムを活用します。これは、その動作を変更および強化するために使用できます。ここでは、ajax Onloadが完了した後に発火するHTMX：AfterOnloadイベントを使用します。また、SitePointの記事から同じトピックについて睡眠機能を使用しました。

<button hx-get="/api/resource">Load Data</button>

これは完成したデモです。ボックスに何かを入力し（「JavaScript」など）、リクエストを開始した後にロードインジケーターを観察します。

ご覧のとおり、クライアントコードをわずか数行でアクティブな検索ボックスパターンを実装できます。

ターゲット要素とコンテンツ交換

場合によっては、リクエストを開始する要素とは異なる要素を更新することがあります。 HTMXを使用すると、HXターゲット属性を使用して、AJAX応答の特定の要素を見つけることができます。このプロパティは、HTMXが更新する要素を見つけるために使用するCSSセレクターを取得できます。たとえば、ブログに新しいコメントを投稿するフォームがある場合、フォーム自体を更新する代わりに、新しいコメントをコメントリストに添付することをお勧めします。

最初の例で実際にこれを見ました：

ボタンは独自のコンテンツを置き換えるものではありませんが、HXターゲットプロパティは、応答が要素のコンテンツをID「JokeContainer」に置き換える必要があることを宣言しています。

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

拡張CSSセレクター

HTMXは、コンテンツをロードする要素を選択するためのより高度なメソッドも提供します。これらには、これ、最も近い、次の、以前の検索が含まれます。

このキーワードは、HXターゲット属性を持つ要素が実際のターゲットであることを指定します。

最も近いキーワードは、指定されたCSSセレクターに一致するソース要素の最も近い祖先を見つけます。
次のキーワードと以前のキーワードは、指定されたCSSセレクターに一致するDOMの後続または前文要素を探します。
キーワードを検索すると、指定されたCSSセレクターに一致する最初の子要素を見つけます。
• 前の例を参照すると、IDの指定を避けるために、hx-target = "next p"を記述することもできます。

コンテンツ交換

デフォルトでは、HTMXはターゲット要素の内容をAJAX応答に置き換えます。しかし、新しいコンテンツを交換する代わりに添付したい場合はどうなりますか？これは、HX-SWAP属性が登場する場所です。このプロパティを使用すると、新しいコンテンツがターゲット要素に挿入される方法を指定できます。考えられる値は、outerhtml、innerhtml、befgegin、afterbegin、beforeend、およびafterendです。たとえば、hx-swap = "beforeend"を使用すると、ターゲット要素の最後に新しいコンテンツが追加されます。これは、新しいコメントシナリオに最適です。

HTMX

での

CSS遷移

CSS遷移により、要素のスタイルをJavaScriptを使用せずにある状態から別の状態にスムーズに変更できます。これらの遷移は、色が変化するのと同じくらい単純なものであるか、完全な3D変換と同じくらい複雑です。

HTMXにより、コードでCSSを簡単に使用できます。HTTPリクエストで一貫した要素IDを維持する必要があります。

このHTMLコンテンツを考慮してください：

<🎜>

htmx ajaxリクエスト /new-contentを作成した後、サーバーは次のものを返します。
コンテンツは変更されていますが、

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

は同じIDを維持します。ただし、Fadeinクラスは新しいコンテンツに追加されました。これで、初期状態から新しい状態にスムーズに移行するCSS遷移を作成できます。

<div>HTMXが新しいコンテンツをロードすると、CSS遷移がトリガーされ、更新された状態へのスムーズな視覚的進行が生じます。

<button hx-get="/api/resource">Load Data</button>

ビュー遷移api

を使用します

新しいView Transition APIは、DOM要素の異なる状態間でアニメーション化する方法を提供します。要素のCSSプロパティの変更を伴うCSS遷移とは異なり、ビュー遷移は要素のコンテンツのアニメーションに関するものです。
View Transition APIは、現在アクティブな開発中の新しい実験機能です。執筆時点では、このAPIはChrome 111に実装されており、より多くのブラウザが将来サポートを追加することが期待されています（Caniuseでサポートを確認できます）。 HTMXは、APIをサポートしていないブラウザーの非遷移メカニズムにビュートランジションAPIとフォールバックを使用するためのインターフェイスを提供します。
htmxでは、ビュートランジションAPIを使用する2つの方法があります：

htmx.config.globalViewTransitions構成変数をtrueに設定します。これにより、すべての交換に移行が使用されます。

Transition：True OptionをHX-SWAPプロパティで使用します。
• ビュー遷移は、CSSを使用して定義および構成できます。これは、古いコンテンツが跳ね返り、新しいコンテンツが跳ね返る「バウンス」移行の例です。
htmxコードでは、HX-swapプロパティの遷移：真のオプションを使用し、アニメーション化したいものにBounce-itクラスを適用します。

この例では、

のコンテンツが更新されると、古いコンテンツが跳ね返り、新しいコンテンツが跳ね返り、心地よく魅力的な視覚効果が生まれます。

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

現時点では、このデモはクロムベースのブラウザでのみ利用できることを忘れないでください。

フォーム検証

HTMXは、HTML5検証APIとうまく統合され、ユーザー入力検証が失敗した場合にフォームリクエストが送信されないようにします。

たとえば、ユーザーが[送信]をクリックすると、入力フィールドが有効な電子メールアドレスが含まれている場合にのみ、 /連絡先に投稿リクエストが送信されます。
さらに一歩進めたい場合は、サーバー側の検証を追加して、gmail.comのみが受け入れられることを確認できます。

<🎜>

ここでは、リクエストの受信者（このキーワードを使用）として自分自身を宣言し、outerHTML Exchangeポリシーを使用する親要素（Div＃ラッパー）を追加します。これは、実際にリクエストをトリガーする要素ではない場合でも、

全体がサーバーの応答に置き換えられることを意味します。また、入力フィールドにhx-post = "/contact/email"を追加しました。つまり、このフィールドがぼやけたときはいつでも、/contact/emailエンドポイントにpostリクエストを送信します。このリクエストには、私たちのフィールドの価値が含まれます。

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

サーバー側（ /連絡先 /電子メール）では、PHPを使用して次のことを確認できます。

<div>ご覧のとおり、HTMXはサーバーがHTML（

not

JSON）を返すことを期待し、ページの指定された場所に挿入することを期待しています。

上記のコードを実行する場合、gmail.com以外のアドレスを入力に入力してから入力を失うようにすると、「gmailアドレスのみが受け入れられます！」

<button hx-get="/api/resource">Load Data</button>

注：コンテンツをDOMに動的に挿入する場合、画面リーダーがこのコンテンツをどのように解釈するかを検討する必要があります。上記の例では、エラーメッセージはタグ内にあるため、スクリーンリーダーは次にフォーカスを取得するときにフィールドを読み取ります。エラーメッセージが他の場所に挿入されている場合は、ARIAと説明されたプロパティを使用して、正しいフィールドに関連付ける必要があります。

また、htmxが検証プロセス中に一連のイベントをトリガーすることも注目に値します。これは、独自の検証ロジックとエラー処理方法を追加するために使用できます。たとえば、JavaScriptコードに電子メールチェックを実装したい場合は、これを行うことができます。
ここでは、HTMX：検証：HTMXのイベントの検証を使用します。

ここで、gmail.com以外のアドレスでフォームを送信しようとすると、同じエラーメッセージが表示されます。

HTMXは他に何ができますか？
HTMXは、多用途で軽量で使いやすいツールです。 HTMLのシンプルさと、複雑なJavaScriptライブラリに関連するしばしば関連する動的機能を組み合わせて、インタラクティブなWebアプリケーションを作成するための説得力のある代替手段を提供します。

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

しかし、それは普遍的な解決策ではありません。より複雑なアプリケーションには、JavaScriptフレームワークが必要になる場合があります。しかし、あなたの目標が、あまりにも複雑さを加えずに高速でインタラクティブでユーザーフレンドリーなWebアプリケーションを作成することである場合、HTMXは間違いなく検討する価値があります。

Web開発が進化し続けるにつれて、HTMXなどのツールは、より良いユーザーエクスペリエンスを構築するためのエキサイティングな新しい方法を提供します。将来のプロジェクトで試してみて、HTMXがあなたのために何ができるか見てみませんか？

HTMX（FAQ）

に関するFAQ

HTMXとは何ですか？他のUI設計ツールとどう違うのですか？
HTMXは、AJAX、CSS遷移、WebSocket、およびサーバー送信イベントの最新の軽量HTML拡張機能です。 JavaScriptまたはJQueryなしでHTMLから直接最新のブラウザ機能にアクセスできます。これにより、他のUI設計ツールとは異なります。これは、JavaScriptに大きく依存することがよくあります。 HTMXは任意のバックエンドと簡単に統合でき、既存のコードを書き換える必要はありません。これは、コードをシンプルでメンテナンスしやすいままにしながら、ユーザーインターフェイスを強化するための強力なツールです。
HTMXを始める方法は？
HTMXを始めるのは非常に簡単です。 HTMLスクリプトをHTMLファイルに含めるだけです。これを実行したら、HTMLタグのHTMXプロパティの使用を開始して、AJAX、WebSocket、その他の機能を有効にすることができます。 HTMX Webサイトは、包括的なガイドと例を提供して、開始するための例を提供します。
htmxは任意のバックエンドで使用できますか？
はい、HTMXの主な利点の1つは、バックエンドに依存しない機能です。サーバー側の言語またはフレームワークで使用できます。これにより、さまざまな環境で作業する開発者にとって普遍的なツールになります。
HTMXの一般的なユースケースは何ですか？
HTMXは、JavaScriptに依存せずにユーザーインターフェイスを強化するさまざまなシナリオで使用できます。これには、フォームの提出、リアルタイム検索、無制限のスクロール、リアルタイムの更新などが含まれます。これは、動的でインタラクティブなWebアプリケーションを作成するための強力なツールです。
HTMXはCSSの遷移をどのように処理しますか？
HTMXには、CSS遷移のサポートが組み込まれています。 「HX-SWAP」属性を使用して、リクエストが作成されたときに要素を交換する方法を指定できます。これにより、JavaScriptを作成せずに滑らかで視覚的に魅力的なトランジションを作成できます。
HTMXはすべてのブラウザと互換性がありますか？
HTMXは、すべての最新のブラウザと互換性があるように設計されています。ただし、いくつかの新しいブラウザ機能を使用するため、古いブラウザまたはそれ以下の一般的なブラウザでは完全に機能しない場合があります。ユーザーが使用できるブラウザでアプリケーションをテストすることを常にお勧めします。
HTMXはWebアプリケーションのパフォーマンスをどのように改善しますか？
HTMXは、HTMLから直接最新のブラウザー機能にアクセスできるようにすることで、書く必要があるJavaScriptの量を大幅に削減できます。これにより、特にモバイルデバイスでは、モバイルデバイスではJavaScriptが特に遅くなる可能性のあるモバイルデバイスでは、ロード時間が短縮され、パフォーマンスが高くなります。
既存のHTMLとCSSでHTMLとCSSを使用できますか？
はい、HTMLは既存のHTMLおよびCSSと連携するように設計されています。 HTMXを始めるためにコードを書き換えたり、新しい言語を学んだりする必要はありません。これにより、既存のアプリケーションを強化するための優れた選択肢になります。

HTMXはどのようなサポートを提供していますか？

HTMXはオープンソースプロジェクトであり、活気に満ちた開発者コミュニティを使用して使用し、貢献しています。 HTMX Webサイト、GitHub、およびさまざまなオンラインフォーラムでヘルプとアドバイスを見つけることができます。

HTMXプロジェクトに貢献する方法は？

オープンソースプロジェクトとして、HTMXはコミュニティの貢献を歓迎します。バグの報告や新しい機能の提案から、コードの作成やドキュメントの改善まで、さまざまな方法で貢献できます。 HTMX Githubページをチェックして、参加方法を学びます。

以上がHTML、HTML中心の動的UIライブラリの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。