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

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

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

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

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

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

<??>

<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>

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

<??>

<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>

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

<??>

<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>

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

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

コンテンツ交換

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

HTMX

での

CSS遷移

CSS遷移により、要素のスタイルをJavaScriptを使用せずにある狀態(tài)から別の狀態(tài)にスムーズに変更できます。これらの遷移は、色が変化するのと同じくらい単純なものであるか、完全な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クラスは新しいコンテンツに追加されました。これで、初期狀態(tài)から新しい狀態(tài)にスムーズに移行するCSS遷移を作成できます。

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

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

ビュー遷移api

を使用します

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

htmx.config.globalViewTransitions構(gòu)成変數(shù)をtrueに設定します。これにより、すべての交換に移行が使用されます。

Transition：True OptionをHX-SWAPプロパティで使用します。
• ビュー遷移は、CSSを使用して定義および構(gòu)成できます。これは、古いコンテンツが跳ね返り、新しいコンテンツが跳ね返る「バウンス」移行の例です。
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>

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

フォーム検証

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

たとえば、ユーザーが[送信]をクリックすると、入力フィールドが有効な電子メールアドレスが含まれている場合にのみ、 /連絡先に投稿リクエストが送信されます。
さらに一歩進めたい場合は、サーバー側(cè)の検証を追加して、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>

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

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

not

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

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

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

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

また、htmxが検証プロセス中に一連のイベントをトリガーすることも注目に値します。これは、獨自の検証ロジックとエラー処理方法を追加するために使用できます。たとえば、JavaScriptコードに電子メールチェックを?qū)g裝したい場合は、これを行うことができます。
ここでは、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などのツールは、より良いユーザーエクスペリエンスを構(gòu)築するためのエキサイティングな新しい方法を提供します。將來のプロジェクトで試してみて、HTMXがあなたのために何ができるか見てみませんか？

HTMX（FAQ）

に関するFAQ

HTMXとは何ですか？他のUI設計ツールとどう違うのですか？
HTMXは、AJAX、CSS遷移、WebSocket、およびサーバー送信イベントの最新の軽量HTML拡張機能です。 JavaScriptまたはJQueryなしでHTMLから直接最新のブラウザ機能にアクセスできます。これにより、他のUI設計ツールとは異なります。これは、JavaScriptに大きく依存することがよくあります。 HTMXは任意のバックエンドと簡単に統(tǒng)合でき、既存のコードを書き換える必要はありません。これは、コードをシンプルでメンテナンスしやすいままにしながら、ユーザーインターフェイスを強化するための強力なツールです。
HTMXを始める方法は？
HTMXを始めるのは非常に簡単です。 HTMLスクリプトをHTMLファイルに含めるだけです。これを?qū)g行したら、HTMLタグのHTMXプロパティの使用を開始して、AJAX、WebSocket、その他の機能を有効にすることができます。 HTMX Webサイトは、包括的なガイドと例を提供して、開始するための例を提供します。
htmxは任意のバックエンドで使用できますか？
はい、HTMXの主な利點の1つは、バックエンドに依存しない機能です。サーバー側(cè)の言語またはフレームワークで使用できます。これにより、さまざまな環(huán)境で作業(yè)する開発者にとって普遍的なツールになります。
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を始めるためにコードを書き換えたり、新しい言語を?qū)Wんだりする必要はありません。これにより、既存のアプリケーションを強化するための優(yōu)れた選択肢になります。

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

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

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

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

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