最新のWebユーザーは、スムーズで動的なシングルページアプリケーション（SPA）エクスペリエンスを期待しています。ただし、スパを作成するには、多くの場合、ReactやAngularなどの複雑なフレームワークが必要であり、それらを学習して使用することは複雑です。 HTMXは、AJAXやCSS遷移などの機能をHTMLで直接活用することにより、動的なWebエクスペリエンスを構築するための新しい視点を提供するライブラリです。
このガイドでは、HTMXの機能、動的なWeb開発をどのように単純化するか、およびWeb開発プロセスを強化する可能性を活用する方法を調査します。キーポイント
一方、シングルページアプリケーション（SPA）は、アプリケーション状態を管理するためにブラウザで実行されているJavaScriptに依存しています。通常、JSON形式でデータを返すAPI呼び出しを使用してサーバーと通信します。 SPAはこのデータを使用して、ページの更新なしでユーザーインターフェイスを更新し、ネイティブデスクトップまたはモバイルアプリに多少似たスムーズなユーザーエクスペリエンスを提供します。ただし、このアプローチも完璧ではありません。通常、クライアントの処理が大きいため、計算時間が高くなります。最初のページを設定するには、最初に大規模なJavaScriptパッケージを解析する必要があります。
HTMXは、両方の極端な状況に妥協を提供します。 MPAのサーバー側のシンプルさを維持しながら、スパのユーザーエクスペリエンスの利点をフルページリロードなしで提供します。このモデルでは、サーバーはクライアントが解釈してレンダリングする必要があるデータを返すのではなく、
ですが、HTMLフラグメント。次に、HTMXはこれらのスニペットを置き換えて、ユーザーインターフェイスを更新します。 このアプローチは、クライアントの複雑さとSPAが一般的に使用する多数のJavaScript依存関係を最小限に抑えることにより、開発プロセスを簡素化します。複雑なセットアップは必要なく、スムーズで応答性の高いユーザーエクスペリエンスを提供します。 プロジェクトにHTMXを含める方法は複数あります。プロジェクトのgithubページから直接ダウンロードできます。または、node.jsを使用している場合は、npmを介してhtmx.orgをインストールするコマンドを使用してインストールできます。
このスクリプトタグはバージョン1.9.4を指しますが、新しいバージョンが利用可能な場合は、「1.9.4」を最新バージョンに置き換えることができます。
HTMXは、特定の要素で発生する特定のイベントに応じてAJAXリクエストを開始します。
要素に表示されます。これは良いことですが、通常、ユーザーは入力中に検索結果を更新したいと考えています。これを行うには、 1回：リクエストを1回だけ実行する場合は、この修飾子を使用します。 ボックスに何かを入力すると（「開発者」など、より長い単語を使用しようとしています）、要求は一時停止またはタイピングを終了した場合にのみトリガーされます。
たとえば、 リクエストインジケーターとしてロードスピナーを使用する要素を考えてみましょう。
注：CSSローダーとスピナーからスピナーのCSSスタイルを入手できます。 1回のクリックでHTMLとCSSを受信することがたくさんあります。
これは完成したデモです。ボックスに何かを入力し（「JavaScript」など）、リクエストを開始した後にロードインジケーターを観察します。 ご覧のとおり、クライアントコードをわずか数行でアクティブな検索ボックスパターンを実装できます。 ターゲット要素とコンテンツ交換 最初の例で実際にこれを見ました：
拡張CSSセレクター
このキーワードは、HXターゲット属性を持つ要素が実際のターゲットであることを指定します。 デフォルトでは、HTMXはターゲット要素の内容をAJAX応答に置き換えます。しかし、新しいコンテンツを交換する代わりに添付したい場合はどうなりますか？これは、HX-SWAP属性が登場する場所です。このプロパティを使用すると、新しいコンテンツがターゲット要素に挿入される方法を指定できます。考えられる値は、outerhtml、innerhtml、befgegin、afterbegin、beforeend、およびafterendです。たとえば、hx-swap = "beforeend"を使用すると、ターゲット要素の最後に新しいコンテンツが追加されます。これは、新しいコメントシナリオに最適です。 CSS遷移により、要素のスタイルをJavaScriptを使用せずにある状態から別の状態にスムーズに変更できます。これらの遷移は、色が変化するのと同じくらい単純なものであるか、完全な3D変換と同じくらい複雑です。 HTMXにより、コードでCSSを簡単に使用できます。HTTPリクエストで一貫した要素IDを維持する必要があります。
を使用します
htmx.config.globalViewTransitions構成変数をtrueに設定します。これにより、すべての交換に移行が使用されます。
この例では、 現時点では、このデモはクロムベースのブラウザでのみ利用できることを忘れないでください。 HTMXは、HTML5検証APIとうまく統合され、ユーザー入力検証が失敗した場合にフォームリクエストが送信されないようにします。
ここでは、リクエストの受信者（このキーワードを使用）として自分自身を宣言し、outerHTML Exchangeポリシーを使用する親要素（Div＃ラッパー）を追加します。これは、実際にリクエストをトリガーする要素ではない場合でも、
JSON）を返すことを期待し、ページの指定された場所に挿入することを期待しています。 注：コンテンツをDOMに動的に挿入する場合、画面リーダーがこのコンテンツをどのように解釈するかを検討する必要があります。上記の例では、エラーメッセージはタグ内にあるため、スクリーンリーダーは次にフォーカスを取得するときにフィールドを読み取ります。エラーメッセージが他の場所に挿入されている場合は、ARIAと説明されたプロパティを使用して、正しいフィールドに関連付ける必要があります。
ここで、gmail.com以外のアドレスでフォームを送信しようとすると、同じエラーメッセージが表示されます。
しかし、それは普遍的な解決策ではありません。より複雑なアプリケーションには、JavaScriptフレームワークが必要になる場合があります。しかし、あなたの目標が、あまりにも複雑さを加えずに高速でインタラクティブでユーザーフレンドリーなWebアプリケーションを作成することである場合、HTMXは間違いなく検討する価値があります。 Web開発が進化し続けるにつれて、HTMXなどのツールは、より良いユーザーエクスペリエンスを構築するためのエキサイティングな新しい方法を提供します。将来のプロジェクトで試してみて、HTMXがあなたのために何ができるか見てみませんか？
HTMXはオープンソースプロジェクトであり、活気に満ちた開発者コミュニティを使用して使用し、貢献しています。 HTMX Webサイト、GitHub、およびさまざまなオンラインフォーラムでヘルプとアドバイスを見つけることができます。 オープンソースプロジェクトとして、HTMXはコミュニティの貢献を歓迎します。バグの報告や新しい機能の提案から、コードの作成やドキュメントの改善まで、さまざまな方法で貢献できます。 HTMX Githubページをチェックして、参加方法を学びます。 インストール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>
hx-post：指定されたURLへのリクエストを投稿します。
上記の例では、ボタン要素にHX-getプロパティが割り当てられています。ボタンをクリックした後、 /API /リソースURLにGETリクエストが行われます。 <button hx-get="/api/resource">Load Data</button>
上記のジョーク例を拡張して、これを実証して、ユーザーが特定の単語を含むジョークを検索できるようにします。
<🎜>
<input>要素にhtmxトリガー属性を追加できます：<div>
<input>
<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>
HTMXは、リクエストインジケーターのサポートを統合し、ユーザーにこのフィードバックを提供できるようにします。 HX-Indicatorクラスを使用して、リクエストインジケーターとして使用される要素を指定します。このクラスの任意の要素の不透明度はデフォルトであり、目に見えないがDOMに存在する。 <🎜>
<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>
場合によっては、リクエストを開始する要素とは異なる要素を更新することがあります。 HTMXを使用すると、HXターゲット属性を使用して、AJAX応答の特定の要素を見つけることができます。このプロパティは、HTMXが更新する要素を見つけるために使用するCSSセレクターを取得できます。たとえば、ブログに新しいコメントを投稿するフォームがある場合、フォーム自体を更新する代わりに、新しいコメントをコメントリストに添付することをお勧めします。
<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は、コンテンツをロードする要素を選択するためのより高度なメソッドも提供します。これらには、これ、最も近い、次の、以前の検索が含まれます。
最も近いキーワードは、指定されたCSSセレクターに一致するソース要素の最も近い祖先を見つけます。
コンテンツ交換
での
CSS遷移
<🎜>
<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><div>HTMXが新しいコンテンツをロードすると、CSS遷移がトリガーされ、更新された状態へのスムーズな視覚的進行が生じます。 <button hx-get="/api/resource">Load Data</button>
View Transition APIは、現在アクティブな開発中の新しい実験機能です。執筆時点では、このAPIはChrome 111に実装されており、より多くのブラウザが将来サポートを追加することが期待されています（Caniuseでサポートを確認できます）。 HTMXは、APIをサポートしていないブラウザーの非遷移メカニズムにビュートランジションAPIとフォールバックを使用するためのインターフェイスを提供します。 Transition：True OptionをHX-SWAPプロパティで使用します。
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>フォーム検証
<🎜>
<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><div>ご覧のとおり、HTMXはサーバーがHTML（<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>に関するFAQ
HTMXとは何ですか？他のUI設計ツールとどう違うのですか？
HTMXは、AJAX、CSS遷移、WebSocket、およびサーバー送信イベントの最新の軽量HTML拡張機能です。 JavaScriptまたはJQueryなしでHTMLから直接最新のブラウザ機能にアクセスできます。これにより、他のUI設計ツールとは異なります。これは、JavaScriptに大きく依存することがよくあります。 HTMXは任意のバックエンドと簡単に統合でき、既存のコードを書き換える必要はありません。これは、コードをシンプルでメンテナンスしやすいままにしながら、ユーザーインターフェイスを強化するための強力なツールです。
HTMXを始めるのは非常に簡単です。 HTMLスクリプトをHTMLファイルに含めるだけです。これを実行したら、HTMLタグのHTMXプロパティの使用を開始して、AJAX、WebSocket、その他の機能を有効にすることができます。 HTMX Webサイトは、包括的なガイドと例を提供して、開始するための例を提供します。
はい、HTMXの主な利点の1つは、バックエンドに依存しない機能です。サーバー側の言語またはフレームワークで使用できます。これにより、さまざまな環境で作業する開発者にとって普遍的なツールになります。
HTMXは、JavaScriptに依存せずにユーザーインターフェイスを強化するさまざまなシナリオで使用できます。これには、フォームの提出、リアルタイム検索、無制限のスクロール、リアルタイムの更新などが含まれます。これは、動的でインタラクティブなWebアプリケーションを作成するための強力なツールです。
HTMXには、CSS遷移のサポートが組み込まれています。 「HX-SWAP」属性を使用して、リクエストが作成されたときに要素を交換する方法を指定できます。これにより、JavaScriptを作成せずに滑らかで視覚的に魅力的なトランジションを作成できます。
HTMXは、すべての最新のブラウザと互換性があるように設計されています。ただし、いくつかの新しいブラウザ機能を使用するため、古いブラウザまたはそれ以下の一般的なブラウザでは完全に機能しない場合があります。ユーザーが使用できるブラウザでアプリケーションをテストすることを常にお勧めします。
HTMXは、HTMLから直接最新のブラウザー機能にアクセスできるようにすることで、書く必要があるJavaScriptの量を大幅に削減できます。これにより、特にモバイルデバイスでは、モバイルデバイスではJavaScriptが特に遅くなる可能性のあるモバイルデバイスでは、ロード時間が短縮され、パフォーマンスが高くなります。
はい、HTMLは既存のHTMLおよびCSSと連携するように設計されています。 HTMXを始めるためにコードを書き換えたり、新しい言語を学んだりする必要はありません。これにより、既存のアプリケーションを強化するための優れた選択肢になります。
HTMXはどのようなサポートを提供していますか？
HTMXプロジェクトに貢献する方法は？
以上がHTML、HTML中心の動的UIライブラリの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
