【初心者向け】HTMXで簡単操作を実現！インタラクティブWeb開発の教科書

htmxにおける「hx-indicator」属性の解説

hx-indicator 属性は、HTMXリクエストの実行中にロードインジケーターを表示するために使用するものです。これは、ユーザーにリクエストが進行中であることを示し、応答を待つように促すのに役立ちます。

属性の動作

hx-indicator 属性には、CSSセレクターを指定します。このセレクターは、リクエストの実行中に htmx-request クラスが追加される要素を識別します。htmx-request クラスは、ローディングインジケーターのスタイリングに使用できます。

例

以下の例では、#spinner 要素がロードインジケーターとして使用されます。

<button hx-get="/data.json" hx-indicator="#spinner">データを取得</button>

<div id="spinner" style="display: none;">
  <img src="/loading.gif" alt="Loading...">
</div>

上記の例では、ボタンをクリックすると /data.json への GET リクエストが送信されます。リクエストの実行中に、#spinner 要素に htmx-request クラスが追加され、ローディングGIFが表示されます。リクエストが完了すると、htmx-request クラスが削除され、ローディングGIFが非表示になります。

補足

• hx-indicator 属性は、hx-target 属性と組み合わせて使用できます。
• ロードインジケーターとして任意の要素を使用できます。
• htmx-request クラスを使用して、ロードインジケーターの外観をカスタマイズできます。

この説明が、hx-indicator 属性の理解に役立つことを願っています。ご不明な点がございましたら、お気軽にお尋ねください。

HTMX のサンプルコード集

ここでは、HTMX の基本的な機能を説明するサンプルコードをいくつか紹介します。

ボタンクリックでデータを取得

この例では、ボタンをクリックすると /data.json から JSON データを取得し、それを #output 要素に表示します。

<button hx-get="/data.json" hx-target="#output">データを取得</button>

<div id="output"></div>

フォーム送信でデータを更新

この例では、フォームを送信すると /update に POST リクエストを送信し、レスポンスを #message 要素に表示します。

<form hx-post="/update">
  <input type="text" name="name">
  <button type="submit">送信</button>
</form>

<div id="message"></div>

入力値に応じてコンテンツを更新

この例では、#search 入力値が変更されるたびに、/search?q=${search} に GET リクエストを送信し、結果を #results 要素に表示します。

<input type="text" id="search" hx-get="/search?q=${search}" hx-target="#results">

<div id="results"></div>

要素の hover でコンテンツを更新

この例では、#target 要素にマウスカーソルを合わせると、/details/${id} に GET リクエストを送信し、結果を #details 要素に表示します。

<div id="target" hx-get="/details/${id}" hx-target="#details"></div>

<div id="details"></div>

カスタムイベントでアクションを実行

この例では、#custom-event 要素から custom-event イベントがトリガーされると、/action に POST リクエストを送信します。

<button id="custom-event" hx-post="/action">アクションを実行</button>

<script>
  const element = document.getElementById('custom-event');
  element.addEventListener('custom-event', () => {
    element.dispatchEvent(new Event('hx-post'));
  });
</script>

これらのサンプルコードはほんの一例です。HTMX を使用して、さまざまなインタラクティブな Web アプリケーションを作成することができます。

HTMX を使って、創造的な Web アプリケーションを構築してください！

HTMX の代替となるライブラリ

HTMX を選択する理由

• 軽量で、シンプルな構文
• 学習と使用が簡単
• Ajax リクエストを簡単に実行できる
• Vanilla JavaScript で記述されている
• 主要な Web ブラウザで動作

HTMX を選択しない理由

• コンポーネントベースのアーキテクチャが必要な場合
• サーバーサイドレンダリングが必要な場合
• 大規模なアプリケーションを構築する必要がある場合
• 複雑なデータバインディングが必要な場合

HTMX は、Ajax を簡単に行うための優れたライブラリですが、プロジェクトのニーズに最適なライブラリを選択することが重要です。上記のライブラリを比較検討し、それぞれの長所と短所を理解した上で、適切なライブラリを選択してください。