HTMXでAJAXプログラミングを快適にする：インジケータと代替手段の徹底解説

HTMXのhx-indicator属性は、要素にAJAXリクエスト実行中のインジケーターを表示するために使用されます。例えば、ローディングスピナーやプログレスバーを表示することで、ユーザーにリクエスト処理中のことを伝えることができます。

基本的な使い方

hx-indicator属性は、AJAXリクエストを実行する要素にCSSセレクターを指定します。このセレクターが一致する要素が、リクエスト実行中にhtmx-requestクラスを持ち、インジケーターとして表示されます。

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

<div id="spinner">
  </div>

上記の例では、ボタンをクリックすると/dataへのGETリクエストが実行され、#spinner要素がインジケーターとして表示されます。

詳細

デフォルトでは、リクエスト実行中の要素自身がインジケーターとして使用されます。
インジケーター要素は、リクエストが完了するとhtmx-requestクラスが自動的に削除されます。
親要素も含めて、セレクターが一致する任意の要素がインジケーターとして選択されます。
複数の要素をインジケーターとして指定できます。
hx-indicator属性は、要素だけでなく、テンプレートリファレンスも指定できます。

JavaScriptを使用して、インジケーターの表示/非表示を制御できます。
インジケーター要素のスタイルをカスタマイズして、独自のインジケーターを作成できます。
ボタン要素だけでなく、フォーム要素やリンク要素にもhx-indicator属性を使用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMX hx-indicator 例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button hx-get="/data" hx-indicator="#spinner">データを取得</button>

  <div id="spinner" class="spinner">
    <div class="spinner-inner"></div>
  </div>

  <script src="https://unpkg.com/[email protected]/dist/htmx.min.js"></script>
</body>
</html>

CSSスタイル (style.css)

.spinner {
  width: 20px;
  height: 20px;
  display: inline-block;
  animation: spin 2s linear infinite;
}

.spinner-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top: #007bff transparent;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

説明

htmx.min.jsスクリプトは、HTMXライブラリをロードします。
#spinner要素は、ローディングスピナーを表示するCSSスタイルで装飾されています。
hx-indicator="#spinner"属性は、リクエスト実行中に#spinner要素をインジケーターとして表示することを示します。
hx-get="/data"属性は、ボタンをクリックすると/dataへのGETリクエストを実行することを示します。
ボタン要素には、hx-get="/data"属性とhx-indicator="#spinner"属性が設定されています。

応用例

以下の例は、hx-indicator属性の応用例です。

JavaScriptを使用して、インジケーターの表示/非表示を制御します。
テンプレートリファレンスを使用して、インジケーター要素を動的に指定します。
複数の要素をインジケーターとして指定します。
リンク要素にhx-indicator属性を使用して、読み込み中にインジケーターを表示します。
フォーム要素にhx-indicator属性を使用して、送信中にインジケーターを表示します。

HTMXのhx-indicator属性は、AJAXリクエスト実行中のインジケーターを表示するために便利な機能ですが、状況によっては代替手段の方が適切な場合もあります。以下に、いくつかの代替方法をご紹介します。

CSSのみでインジケーターを作成する

シンプルなインジケーターであれば、CSSのみで作成することも可能です。例えば、以下のようにローディングスピナーを表現できます。

<div class="spinner">
  <div class="spinner-inner"></div>
</div>

.spinner {
  width: 20px;
  height: 20px;
  display: inline-block;
  animation: spin 2s linear infinite;
}

.spinner-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top: #007bff transparent;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

この方法の利点は、JavaScriptを使用する必要がないことです。一方、複雑なインジケーターを作成したり、インジケーターの表示/非表示を動的に制御したりするには、JavaScriptが必要になります。

JavaScriptライブラリを使用する

hx-indicatorの代替として、様々なJavaScriptライブラリを使用することができます。以下に、いくつかの人気ライブラリをご紹介します。

これらのライブラリは、hx-indicatorよりも多くの機能とオプションを提供している場合が多く、複雑なインジケーターを作成したり、高度なアニメーションを実装したりするのに役立ちます。

カスタムインジケーターを実装する

最も柔軟な方法は、独自のインジケーターをJavaScriptで実装することです。これにより、ニーズに完全に合致したインジケーターを作成することができます。

インジケーターをまったく使用しない

場合によっては、インジケーターを使用する必要がないこともあります。例えば、リクエストが非常に短い場合や、ユーザーにリクエスト処理中のことを明示的に知らせる必要がない場合は、インジケーターを省略しても問題ありません。

選択の指針

どの代替方法を選択するかは、状況によって異なります。以下の点を考慮して選択してください。

開発者のスキルと経験
JavaScriptライブラリの利用可能性
アニメーションの必要性
インジケーターの複雑性