ホームページ >ウェブフロントエンド >jsチュートリアル >HTML、HTML中心の動的UIライブラリの紹介
HTML、HTML中心の動的UIライブラリの紹介
- 尊渡假赌尊渡假赌尊渡假赌オリジナル
- 2025-02-08 11:52:13167ブラウズ
最新の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検証と統合され、フォームが予想どおりに実行されるようにし、使いやすさと機能を向上させます。
開発者は、インタラクティブなWebエクスペリエンスを構築する際に、それぞれ独自のトレードオフを備えた2つの主要なオプションを伝統的に持っています。一方では、ユーザーが対話するたびにページ全体を更新するマルチページアプリケーション（MPA）があります。このアプローチにより、サーバーがアプリケーションの状態を制御し、クライアントが忠実にそれを表現することを保証します。ただし、フルページのリロードにより、ゆっくりと不器用なユーザーエクスペリエンスが発生します。
一方、シングルページアプリケーション（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
<code class="language-html"></code>
HTMXは非常に軽量で、最小値とGZIPバージョンの重量は約14kbです。依存関係はなく、IE11を含むすべての主要なブラウザと互換性があります。 <code class="language-html"><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></code>
hx-post：指定されたURLへのリクエストを投稿します。
上記の例では、ボタン要素にHX-getプロパティが割り当てられています。ボタンをクリックした後、 /API /リソースURLにGETリクエストが行われます。 <code class="language-html"><button hx-get="/api/resource">Load Data</button></code>
を使用したトリガーリクエスト
上記のジョーク例を拡張して、これを実証して、ユーザーが特定の単語を含むジョークを検索できるようにします。
<code class="language-html"></code>
要素の場合、これは要素の値が変化し、焦点を失ったときに起こります。したがって、ボックスに何か（「バー」など）を入力し、ページの他の場所をクリックすると、ジョークが<input>要素にhtmxトリガー属性を追加できます：<input>
結果はすぐに更新されます。これは良いことですが、新しい問題を導入します。すべてのキープレスでAPI呼び出しを使用しています。これを回避するために、修飾子を使用してトリガーの動作を変更できます。 HTMXは次のとおりです
<code class="language-html"><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></code>
変更：この修飾子は、要素の値が変更された場合にのみリクエストが行われることを保証します。
<code class="language-html"><button hx-get="/api/resource">Load Data</button></code>
ご覧のとおり、クライアントコードをわずか数行でアクティブな検索ボックスパターンを実装できます。
HTMXは、リクエストインジケーターのサポートを統合し、ユーザーにこのフィードバックを提供できるようにします。 HX-Indicatorクラスを使用して、リクエストインジケーターとして使用される要素を指定します。このクラスの任意の要素の不透明度はデフォルトであり、目に見えないがDOMに存在する。 <code class="language-html"></code>
hx-get属性を持つボタンがクリックされ、リクエストが開始されると、ボタンはHTMX-Requestクラスを受信します。これにより、リクエストが完了してクラスが削除されるまで画像が表示されます。 <code class="language-html"><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></code>
<code class="language-html"><button hx-get="/api/resource">Load Data</button></code>
場合によっては、リクエストを開始する要素とは異なる要素を更新することがあります。 HTMXを使用すると、HXターゲット属性を使用して、AJAX応答の特定の要素を見つけることができます。このプロパティは、HTMXが更新する要素を見つけるために使用するCSSセレクターを取得できます。たとえば、ブログに新しいコメントを投稿するフォームがある場合、フォーム自体を更新する代わりに、新しいコメントをコメントリストに添付することをお勧めします。
<code class="language-html"><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></code>
HTMXは、コンテンツをロードする要素を選択するためのより高度なメソッドも提供します。これらには、これ、最も近い、次の、以前の検索が含まれます。
最も近いキーワードは、指定されたCSSセレクターに一致するソース要素の最も近い祖先を見つけます。
コンテンツ交換
での
CSS遷移
<code class="language-html"></code>
htmx ajaxリクエスト /new-contentを作成した後、サーバーは次のものを返します。
<code class="language-html"><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></code>
は同じIDを維持します。ただし、Fadeinクラスは新しいコンテンツに追加されました。これで、初期状態から新しい状態にスムーズに移行するCSS遷移を作成できます。
<div>HTMXが新しいコンテンツをロードすると、CSS遷移がトリガーされ、更新された状態へのスムーズな視覚的進行が生じます。
<pre class="brush:php;toolbar:false"><code class="language-html"><button hx-get="/api/resource">Load Data</button></code></pre>ビュー遷移api<p>を使用します
</p>新しいView Transition APIは、DOM要素の異なる状態間でアニメーション化する方法を提供します。要素のCSSプロパティの変更を伴うCSS遷移とは異なり、ビュー遷移は要素のコンテンツのアニメーションに関するものです。 <h3>
</h3>View Transition APIは、現在アクティブな開発中の新しい実験機能です。執筆時点では、このAPIはChrome 111に実装されており、より多くのブラウザが将来サポートを追加することが期待されています（Caniuseでサポートを確認できます）。 HTMXは、APIをサポートしていないブラウザーの非遷移メカニズムにビュートランジションAPIとフォールバックを使用するためのインターフェイスを提供します。 <p>
</p> htmxでは、ビュートランジションAPIを使用する2つの方法があります：<p>
</p>
<p>htmx.config.globalViewTransitions構成変数をtrueに設定します。これにより、すべての交換に移行が使用されます。 </p>
<ul> Transition：True OptionをHX-SWAPプロパティで使用します。 <li>
</li>
<li>ビュー遷移は、CSSを使用して定義および構成できます。これは、古いコンテンツが跳ね返り、新しいコンテンツが跳ね返る「バウンス」移行の例です。
</li>
</ul> htmxコードでは、HX-swapプロパティの遷移：真のオプションを使用し、アニメーション化したいものにBounce-itクラスを適用します。
<p>
この例では、</p>のコンテンツが更新されると、古いコンテンツが跳ね返り、新しいコンテンツが跳ね返り、心地よく魅力的な視覚効果が生まれます。 <pre class="brush:php;toolbar:false"><code class="language-html"><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></code></pre>
<p>現時点では、このデモはクロムベースのブラウザでのみ利用できることを忘れないでください。 </p>
<h2>フォーム検証</h2>
<p>HTMXは、HTML5検証APIとうまく統合され、ユーザー入力検証が失敗した場合にフォームリクエストが送信されないようにします。 </p>
たとえば、ユーザーが[送信]をクリックすると、入力フィールドが有効な電子メールアドレスが含まれている場合にのみ、 /連絡先に投稿リクエストが送信されます。
<p>
</p>さらに一歩進めたい場合は、サーバー側の検証を追加して、gmail.comのみが受け入れられることを確認できます。
<pre class="brush:php;toolbar:false"><code class="language-html"></code></pre>
<p>ここでは、リクエストの受信者（このキーワードを使用）として自分自身を宣言し、outerHTML Exchangeポリシーを使用する親要素（Div＃ラッパー）を追加します。これは、実際にリクエストをトリガーする要素ではない場合でも、</p>全体がサーバーの応答に置き換えられることを意味します。また、入力フィールドにhx-post = "/contact/email"を追加しました。つまり、このフィールドがぼやけたときはいつでも、/contact/emailエンドポイントにpostリクエストを送信します。このリクエストには、私たちのフィールドの価値が含まれます。 <pre class="brush:php;toolbar:false"><code class="language-html"><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></code></pre>
サーバー側（ /連絡先 /電子メール）では、PHPを使用して次のことを確認できます。
<p>
<code><div>ご覧のとおり、HTMXはサーバーがHTML（not<p>JSON）を返すことを期待し、ページの指定された場所に挿入することを期待しています。 </p>
上記のコードを実行する場合、gmail.com以外のアドレスを入力に入力してから入力を失うようにすると、「gmailアドレスのみが受け入れられます！」<pre class="brush:php;toolbar:false"><code class="language-html"><button hx-get="/api/resource">Load Data</button></code></pre>
<p><em>注：コンテンツをDOMに動的に挿入する場合、画面リーダーがこのコンテンツをどのように解釈するかを検討する必要があります。上記の例では、エラーメッセージはタグ内にあるため、スクリーンリーダーは次にフォーカスを取得するときにフィールドを読み取ります。エラーメッセージが他の場所に挿入されている場合は、ARIAと説明されたプロパティを使用して、正しいフィールドに関連付ける必要があります。 </em></p>
また、htmxが検証プロセス中に一連のイベントをトリガーすることも注目に値します。これは、独自の検証ロジックとエラー処理方法を追加するために使用できます。たとえば、JavaScriptコードに電子メールチェックを実装したい場合は、これを行うことができます。
<p>
</p>ここでは、HTMX：検証：HTMXのイベントの検証を使用します。 <p>
<em>ここで、gmail.com以外のアドレスでフォームを送信しようとすると、同じエラーメッセージが表示されます。 </em>
</p> HTMXは他に何ができますか？ <p>
</p>HTMXは、多用途で軽量で使いやすいツールです。 HTMLのシンプルさと、複雑なJavaScriptライブラリに関連するしばしば関連する動的機能を組み合わせて、インタラクティブなWebアプリケーションを作成するための説得力のある代替手段を提供します。 <pre class="brush:php;toolbar:false"><code class="language-html"><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></code></pre>
<p>しかし、それは普遍的な解決策ではありません。より複雑なアプリケーションには、JavaScriptフレームワークが必要になる場合があります。しかし、あなたの目標が、あまりにも複雑さを加えずに高速でインタラクティブでユーザーフレンドリーなWebアプリケーションを作成することである場合、HTMXは間違いなく検討する価値があります。 </p>
<p>Web開発が進化し続けるにつれて、HTMXなどのツールは、より良いユーザーエクスペリエンスを構築するためのエキサイティングな新しい方法を提供します。将来のプロジェクトで試してみて、HTMXがあなたのために何ができるか見てみませんか？ </p>
HTMX（FAQ）<h2>に関するFAQ
</h2>HTMXとは何ですか？他のUI設計ツールとどう違うのですか？ <h3>
</h3>HTMXは、AJAX、CSS遷移、WebSocket、およびサーバー送信イベントの最新の軽量HTML拡張機能です。 JavaScriptまたはJQueryなしでHTMLから直接最新のブラウザ機能にアクセスできます。これにより、他のUI設計ツールとは異なります。これは、JavaScriptに大きく依存することがよくあります。 HTMXは任意のバックエンドと簡単に統合でき、既存のコードを書き換える必要はありません。これは、コードをシンプルでメンテナンスしやすいままにしながら、ユーザーインターフェイスを強化するための強力なツールです。 <p>
</p> HTMXを始める方法は？ <h3>
</h3>HTMXを始めるのは非常に簡単です。 HTMLスクリプトをHTMLファイルに含めるだけです。これを実行したら、HTMLタグのHTMXプロパティの使用を開始して、AJAX、WebSocket、その他の機能を有効にすることができます。 HTMX Webサイトは、包括的なガイドと例を提供して、開始するための例を提供します。 <p>
</p>htmxは任意のバックエンドで使用できますか？ <h3>
</h3>はい、HTMXの主な利点の1つは、バックエンドに依存しない機能です。サーバー側の言語またはフレームワークで使用できます。これにより、さまざまな環境で作業する開発者にとって普遍的なツールになります。 <p>
</p>HTMXの一般的なユースケースは何ですか？ <h3>
</h3>HTMXは、JavaScriptに依存せずにユーザーインターフェイスを強化するさまざまなシナリオで使用できます。これには、フォームの提出、リアルタイム検索、無制限のスクロール、リアルタイムの更新などが含まれます。これは、動的でインタラクティブなWebアプリケーションを作成するための強力なツールです。 <p>
</p>HTMXはCSSの遷移をどのように処理しますか？ <h3>
</h3>HTMXには、CSS遷移のサポートが組み込まれています。 「HX-SWAP」属性を使用して、リクエストが作成されたときに要素を交換する方法を指定できます。これにより、JavaScriptを作成せずに滑らかで視覚的に魅力的なトランジションを作成できます。 <p>
</p>HTMXはすべてのブラウザと互換性がありますか？ <h3>
</h3>HTMXは、すべての最新のブラウザと互換性があるように設計されています。ただし、いくつかの新しいブラウザ機能を使用するため、古いブラウザまたはそれ以下の一般的なブラウザでは完全に機能しない場合があります。ユーザーが使用できるブラウザでアプリケーションをテストすることを常にお勧めします。 <p>
</p> HTMXはWebアプリケーションのパフォーマンスをどのように改善しますか？ <h3>
</h3> HTMXは、HTMLから直接最新のブラウザー機能にアクセスできるようにすることで、書く必要があるJavaScriptの量を大幅に削減できます。これにより、特にモバイルデバイスでは、モバイルデバイスではJavaScriptが特に遅くなる可能性のあるモバイルデバイスでは、ロード時間が短縮され、パフォーマンスが高くなります。 <p>
</p>既存のHTMLとCSSでHTMLとCSSを使用できますか？ <h3>
</h3>はい、HTMLは既存のHTMLおよびCSSと連携するように設計されています。 HTMXを始めるためにコードを書き換えたり、新しい言語を学んだりする必要はありません。これにより、既存のアプリケーションを強化するための優れた選択肢になります。 <p></p>
<h3> HTMXはどのようなサポートを提供していますか？ </h3>
<p>HTMXはオープンソースプロジェクトであり、活気に満ちた開発者コミュニティを使用して使用し、貢献しています。 HTMX Webサイト、GitHub、およびさまざまなオンラインフォーラムでヘルプとアドバイスを見つけることができます。 </p>
<h3> HTMXプロジェクトに貢献する方法は？ </h3>
<p>オープンソースプロジェクトとして、HTMXはコミュニティの貢献を歓迎します。バグの報告や新しい機能の提案から、コードの作成やドキュメントの改善まで、さまざまな方法で貢献できます。 HTMX Githubページをチェックして、参加方法を学びます。 </p>
</div>
以上がHTML、HTML中心の動的UIライブラリの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。