HTNCodeをサポート

お好きな金額でサポートしていただけると嬉しいです！

(50円〜10,000円[税込]まで)

HTMXを簡単にまとめた

作成日時：2024年1月21日 00:22

更新日時：2024年1月21日 00:22

HTMX

JavaScript

HTML

はじめに

2023 JavaScript Rising Starsのフロントエンド・フレームワーク部門において、2位となったHTMXというライブラリ（全体では10位）について。

日本ではあまり人気が出ていないようで、海外の方が断然盛り上がっているみたいです。
記述方法はドキュメントをご確認いただければわかりますので、ざっと要点だけまとめてみます。

■</> htmx | 公式サイト
https://htmx.org/

HTMXとは

HTMXは、JavaScript を使用せずに、HTMLから直接モダンなブラウザ機能にアクセスできるライブラリです。
非常に軽量かつ高速で、Ajax通信やDOMの更新などを既存のHTML要素を拡張するだけで扱うことができます。
例えばボタンクリックによってHTTP POSTリクエストを発行、DOM内の特定の要素をレスポンスの内容で置き換えるといったようなことができます。
また、サーバーサイドでも、基本的にはJSONではなくHTMLで応答します。
さらに、WebSocketやSSEにも対応しており、リアルタイム性が求められるアプリケーションと相性が良さそうです。

※WebSocketって？
WebSocketは、ウェブブラウザとサーバー間でのリアルタイム通信を可能にする技術で、このプロトコルにより、HTTPの制約を超えた双方向通信が可能です。
一度接続が確立されると、クライアントとサーバーは互いにデータを送受信できるようになり、オンラインの状態を維持します。
ネットワークの遅延を最小限に抑え、より効率的なデータ交換が可能で、チャットアプリなどでよく使用されています。

※SSEって？
SSE（Server-Sent Events）は、サーバーからクライアント（主にウェブブラウザ）へリアルタイムでデータを送信するための技術。
このプロトコルを使用すると、サーバーは新しい情報が利用可能になった際に、その情報をクライアントにプッシュすることができます。
WebSocketは双方向通信であるのに対し、SSEはサーバーからクライアントへの一方向の通信のみをサポートする非同期通信です。
接続が途切れた場合は、クライアントは自動的にサーバーに再接続を試みます。
WebSocketに比べて軽量でシンプルなプロトコルであり、ブラウザとサーバー間でのオーバーヘッドが少ないために、
ニュースフィード、株価のリアルタイム更新など、サーバーからクライアントへ継続的・リアルタイムにデータを連携することが必要なアプリや、リソースが限られている環境での利用に向いています。

インストール

インストール方法は以下の４種類です。

■CDN経由：

最も手軽なのはCDN経由でheadタグに以下を追加する方法です。本番環境では一般的に非推奨です。
※理由はこちら：https://blog.wesleyac.com/posts/why-not-javascript-cdn

<script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>

■ダウンロード：

htmxを以下からプロジェクトのhtmx.min.jsファイルに直接コピーして利用します。
https://unpkg.com/htmx.org/dist/htmx.min.js
　

ディレクトリに配置してscriptタグで読み込みます。

<script src="/path/to/htmx.min.js"></script>

■npm：

以下のnpmコマンドでインストールします。

npm install htmx.org

■Webpack：

Webpack を使用して JavaScript を管理している場合に、npmやyarn経由でインストールします。
index.jsなどのエントリーファイルに以下記述を追加して、インポートして使用します。

import 'htmx.org';

グローバル変数を使用する場合は、カスタムしたJSファイルを作成し、そのファイルをindex.jsなどのエントリーファイルにインポートして使用します。

import 'path/to/my_custom.js';

そして、カスタムしたJSファイルに以下記述を追加して、バンドルを再構築（リビルド）するようにします。

window.htmx = require('htmx.org');

サーバー側の統合例

GitHubリポジトリが公式ドキュメントにリスト化されて載っています。
JavaScriptやPython、Javaなどのサーバーサイド言語やプラットフォームとの統合例はここから確認できます。
https://htmx.org/server-examples/

おわりに

まだまだ日本では人気が出ていないこともあって、実際に使うとしても先の話になりそうですね。
また新しい情報が出てくれば、調べてみようと思います。

それではまた。

　
HTNCode