HTMX #7 – hx-indicatorを使ったローダーの作成

By /

はじめに

「HTMXでSPAを構築する」シリーズの今回は、アプリケーションのユーザーエクスペリエンスを向上させるために、ローディングインジケーターの作成方法を学びます。HTMXには`hx-indicator`という強力な属性があり、非同期リクエストの処理中にローディングスピナーやメッセージを簡単に表示・非表示にできます。

YouTube上でこのビデオを視聴する

ロード時間のシミュレーション

このチュートリアルの作成者は、サーバーサイドのPOSTリクエストハンドラーに3秒間の遅延を追加しています。これは、APIコールやサーバーサイドの処理に時間がかかる現実的なシナリオをシミュレートするためです。この遅延中に、ユーザーにローディングインジケーターを表示することで、アプリケーションがリクエストを処理中であり、フリーズしたり、エラーが発生していないことを示すことができます。

このローディングインジケーター機能を実装するために、作成者は`hx-indicator` HTMXの属性を使用する予定です。この属性を使うと、HTMXリクエストの状態に基づいて、ページ上の特定の要素を表示・非表示にできます。

ローディングインジケーターの実装

最初のステップは、HTMLドキュメントの``タグに`hx-indicator`属性を適用することです。これにより、ページ全体がターゲットとなりますが、好みに応じて特定のコンテナー要素をターゲットにすることもできます。

<body hx-indicator=".loader">
  <!-- ページのコンテンツ -->
</body>

次に、作成者は新しい`loader.pug`パーシャルでローディングインジケーターのUIを定義します。これは単純な「Loading…」メッセージで、最初はCSSで非表示になっています。

<div class="loader" style="display: none;">
  読み込み中...
</div>

CSSは、ローダーを最初は非表示にし、HTMX によってリクエスト中に`hx-request`クラスが適用されたときに表示するように設定されています:

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
  border-radius: 5px;
  z-index: 9999;
}

.hx-request .loader {
  display: block;
}

ユーザーがページと対話してHTMXリクエストをトリガーすると、``タグに`hx-request`クラスが追加されます。これにより、ユーザーにローディングインジケーターが表示され、アプリケーションがリクエストを処理中であることを視覚的にフィードバックします。

サーバーサイドの処理が完了し、HTMX レスポンスを受信すると、`hx-request`クラスが削除され、ローディングインジケーターが非表示になります。

まとめ

このarticle では、HTMX の`hx-indicator`属性を使ってアプリケーションにローディングインジケーターを簡単に追加する方法を学びました。このような視覚的なフィードバックをユーザーに提供することで、全体的なユーザーエクスペリエンスを向上させ、アプリケーションをより反応性の高い洗練されたものにできます。

`hx-indicator`属性は、ロード時間のシミュレーションだけでなく、さまざまなシナリオで使用できる強力なツールです。フォーム入力の検証やサーバーからのデータフェッチなど、HTMX リクエストの状態に応じて要素を表示・非表示にする必要がある場合にも役立ちます。

ポイント:

  • HTMX の`hx-indicator`属性を使うと、非同期リクエスト中に表示・非表示にする要素をターゲットできる
  • チュートリアルの作成者は、ロード時間をシミュレートするためにサーバーサイドコードに3秒間の遅延を追加し、`hx-indicator`を使ってその間ローディングメッセージを表示する
  • ローディングインジケーターのUIは別の`loader.pug`パーシャルで定義され、最初はCSSで非表示になっている
  • HTMX リクエストが行われると、``タグに`hx-request`クラスが追加され、ローディングインジケーターが表示される
  • リクエストが完了すると、`hx-request`クラスが削除され、ローディングインジケーターが非表示になる
上部へスクロール