技術情報htmx中津川篤司Monacaアプリを作る際に欠かせないのがサーバーとの通信でしょう。この時にはいわゆるAjaxと呼ばれる手法を利用して、サーバーへリクエストを行い、返ってきたレスポンスに応じて画面を書き換えます。した処理を書くのはとても面倒で、複雑になりやすいものです。そこで使ってみたいのがhtmxになります。htmxはJavaScriptを書かずにサーバーとの通信処理を実現できるライブラリになります。本記事ではhtmxの使い方を簡単なコードを交えつつ紹介します。htmxとはhtmxは前述の通り、JavaScriptを書かずにネットワーク通信や高度なUXを実現できるライブラリになります。htmxは、HTMLタグの属性を使用してHTML内で直接AJAX、CSSトランジション、WebSockets、およびサーバー送信イベントにアクセスできるようにします。htmxを使うことで、面倒な(かつ毎回同じような)JavaScriptを書かずに済み、エラーハンドリングなどを含めてhtmxがすべてハンドリングしてくれるようになります。htmxのインストールhtmxのインストールは幾つか用意されています。手軽なのはCDNを利用した方法でしょう。crossorigin="anonymous"></script>次にCDN配信されているJavaScriptファイルをダウンロードして、アプリで読み込む方法です。src="js/htmx.min.js"></script>htmxの例htmxでAjaxを書く処理を想定します。通常ですと、以下のように書きます。今回は単純化していますが、実際にはリクエスト内容を作ったり、認証があったりともっと複雑でしょう。次のコードは、デモサーバーとしてサービス"JSONPlaceholder"を利用しています。GET、POST、PUT、PATCH、DELETEの操作を実行でき、テストやプロトタイピングに利用することができます。}</script>この処理をhtmxで書くと次のようになります。JavaScriptは一切書かず、HTMLタグの要素で指定するだけです。id="result">Loading...</div>htmxでできることhtmxには以下のような機能があります。Ajaxサーバーとの通信です。GET/POST/PUT/PATCH/DELETEメソッドをサポートしています。タグの内容を書き換えます。Messages</div>ページの置き換えhtmxを利用すると、全体のHTMLを再読み込みすることなく、bodyタグ内の内容だけを書き換えることが可能です。Railsを活用したHotwireと似た機能を持っています。この機能により、一般的なWebサイトがシングルページアプリケーション(SPA)のようなインタラクティブ性を持つ形に進化させることができます。このプロセスを効率的に行うためには、hx-push-url="true"を指定することを推奨します。APIを利用することが可能となり、URLの動的な書き換えやブラウザのバックボタンの使用などが可能になります。Events)やWebSocketも選択肢となります。チャットのようなメッセージ受信機能を実装する場合、以下のようなコードが用いられます。メッセージ送信のための情報を設定しています。SSEを利用することで、サーバーからの一方通行のメッセージを受け取ることも可能です。これはWebSocketとは違い、サーバーからのみメッセージが送られます。以下のように記述します。hx-get="/news"></div></body>これらのコードは、ページのロードなしに動的なコンテンツ更新を行っています。トリガーハンドリングhtmxでは、いくつかのデフォルトイベントトリガーが設定されています。それらは以下のとおりです。属性を使用して指定します。Mouse!]</div>このコードは、マウスが特定の要素に入ったとき(mouseenterイベントが発生したとき)に、"/mouse_entered"へのPOSTリクエストを送信します。これにより、Webページはユーザーの操作によりダイナミックに反応することができ、より良いユーザーエクスペリエンスを提供することが可能となります。APIを利用することが推奨されていますが、カスタマイズしたバリデーションを実装したいこともあるでしょう。その場合にはちょと複雑ですがJavaScript風に記述した入力値の検証が可能です。></form>コンテンツの書き換え方htmxではコンテンツの書き換え方も指定可能で、デフォルトではinnerHTMLが用いられます。この書き換え方はhx-swapで指定します。以下にいくつかのオプションを示します。レスポンスからコンテンツを追加しない(帯域外のスワップやレスポンスヘッダーは処理されます)書き方は以下のようになります。Me!</button>htmxの機能拡張htmxには機能拡張という仕組みがあります。いう要素を使って、独自の拡張を作成できます。様々な拡張が紹介されています。以下は機能拡張の作り方です。JavaScriptで機能拡張を定義します。デザインパターンここまででhtmxの基本的な使い方は分かったと思いますが、実際にどのような場合に使えるのかを考えてみます。多くの場合において、サーバー側にほとんどのデータがあり、クライアント側でステータスを管理しない場合に有効そうです。シンプルなAjaxの活用htmxは複雑なAjax処理の実行には必ずしも適していません。それよりは、フォームからの情報送信と、その結果をユーザーインターフェース(UI)に反映する、というようなシンプルなタスクに最適です。クライアントサイドでリクエストやレスポンスの処理を行うのではなく、サーバーサイドで処理し、結果を表示するだけのアプリケーションに向いています。既存のWebサイトをSPA(シングルページアプリケーション)に変換htmxのブースト機能を活用すると、現在表示しているHTMLのbody部分を全体的に更新することが可能です。これにより、JavaScriptやCSSの読み込み回数を削減し、Webアプリケーションのようなユーザーエクスペリエンスを効率的に実現できます。これはサーバーサイドがほとんどのコンテンツを保持し、クライアント側が表示するだけの場合に最適です。チャット機能の実装htmxはWebSocketをサポートしているため、簡単なチャットアプリケーションの実現も可能です。これは特に、チャットが主要機能ではないがチャット機能が含まれているアプリケーションに適しています。以上の例からもわかるように、htmxはその独特の特性を活かすことで、Web開発の多様なシーンで役立つツールとなり得ます。これらのシナリオは、htmxの効率的な利用法を理解し、それを自身のプロジェクトにどのように適用するかを考えるうえでの一助となるでしょう。まとめ今回はhtmxというライブラリの概要を紹介しました。JavaScriptを欠かずにAjaxが実現できるので、プログラミングに不得手という方でもダイナミックな動きをするMonacaアプリが実現できるでしょう。htmxを使いこなして、優れたUI/UXを実現してください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。見やすい、メンテナンスしやすいJavaScriptのために。