HTMXが話題なので使ってみた。具体的な使い方やメリット・デメリットを紹介

HTMXが話題なので使ってみた。具体的な使い方やメリット・デメリットを紹介

公開: 更新:
だーだい
フリーランスWebライター兼Web製作者。Webライターとしてガジェットメディアやプログラミングに関する記事を執筆する傍ら、LP制作とWordPressの改修案件もこなしつつ、活動しています。 profile

HTMLだけでJavaScriptの処理を実行できる「HTMX」の需要が年々伸びているようです。[1]Googleトレンドで「HTMX」というキーワードを調べてみたところ、下記のように右肩上がりに伸びていることがわかりました。

htmxの特徴と使い方1

Googleトレンドより

また、今日のX(旧Twitter)でトレンド入りしていることから、日本での需要も高まることが考えられます。

この記事では、HTMXでどのようなことができるのか実際に使ってみました。



htmxとは

HTMXはJavaScriptを使わずHTMLだけで動的なWebページを作成できるライブラリです。HTMXの公式ページでは、HTML属性を利用してJavaScriptを操作する「intercooler.js」というライブラリの後継と記載されています。

HTMXを使うことでJavaScript関連の技術をこれまでよりシンプルなソースコードで実現できます。たとえば、JavaScriptを使わずAjaxリクエストを送信して非同期通信したり、リアルタイムで情報を受け取れる「WebSocket」という技術を活用したりできます。

HTMXによってシンプルかつ効率的にコーディングできることから、近年世界中で注目されています。

HTMXでできること

HTMXでできることは下記の通りです。

  • Ajax通信:Ajax通信を利用することで、ページの再読み込みを行わずにサーバとの通信を実行できます。
  • ページの置き換え:Webページの特定部分のみを更新できるため、再読み込みを行わずにページの一部を更新できます。
  • サーバーとの通信:AjaxやSSE、WebSocketを用いたサーバー通信が可能です。
  • トリガーハンドリング:トリガーハンドリングによってイベントが発生した際に特定の処理を実行できます。
  • バリデーション:バリデーションを利用することで入力された値の真偽をチェックできます。

HTMXを使うことで、これまでJavaScriptを活用して実行していた動的な処理をHTMLで実行できるのが特徴。HTML属性で実行内容を決めるので実現できないこともありますが、Webページに簡単な動的処理を実行する際に便利です。

Python基礎・実践(Django)

企業・法人向けのPython研修では、基礎から応用まで体系的に学べます。

Python研修の詳細

DX社員研修

企業・法人向けのDX研修では、実務に繋がるリスキリングでITレベルを向上させます。

DX研修の詳細

Javaエンジニア育成研修

企業・法人向けのJavaエンジニア育成研修では、Javaの基礎から応用まで確実に習得できます。

Java研修の詳細

新卒・新入社員向け研修

企業・法人に新入社員・新卒社員に向けたプログラミング研修を提供しています。

新入社員研修の詳細

コードキャンプのIT研修を全て見る

HTMXのメリット

HTMXのメリットは下記の通りです。

  • 簡単に動的処理を実現できる
  • 迅速に更新処理できる
  • データベースや言語に依存しない

HTMXはJavaScriptに精通していない開発者でも簡単に動的なWebページを作成できるのがメリットです。複雑なJavaScriptのコーディングを使わずにサーバから直接HTMLを受け取り、ページ上に動的に追加できます。

また、シングルページアプリケーション(SPA)フレームワークのようにスムーズな状態遷移によって、迅速に内容を更新できるのもメリットのひとつ。バックエンド技術に依存しないため、さまざまなデータベースサーバーサイドの言語と一緒に利用できます。

HTMXのデメリット

HTMXのデメリットは下記の通りです。

  • JavaScriptの全機能をカバーできない
  • 機能の制限
  • ブラウザの互換性

HTMXだけではJavaScriptで実現できる複雑な動作やインタラクションを全て実装できません。また、HTMXの機能はJavaScriptのライブラリに比べて限定されているのがデメリットです。

ほかにも、HTMXは異なるブラウザでの動作が一貫しない可能性があります。このようなデメリットがあるのは、HTMXがシンプルさと使いやすさに重点を置いていることが考えられます。

htmxの使い方

HTMXの使い方について、インストール方法と実際の使い方に分けてわかりやすく解説します。

おすすめのPython研修一覧

Python研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Python研修の一覧を見る

おすすめのDX研修一覧

DX研修を提供しているおすすめの企業・法人を一覧で掲載しております。

DX研修の一覧を見る

おすすめのJava研修一覧

Java研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Java研修の一覧を見る

おすすめのJavaScript研修一覧

JavaScript研修を提供しているおすすめの企業・法人を一覧で掲載しております。

JavaScript研修の一覧を見る

HTMXのインストール方法

HTMXのインストール方法は複数あるようですが、今回は公式サイト[1]にも公開されているCDNを使う方法で解説を進めます。

HTMXのCDN

<script src="https://unpkg.com/htmx.org@1.9.10"></script>

上記のCDNをheadタグ内に記載することでHTMXを利用できます。

HTMXで動的な処理を実行する方法

HTMXの具体的な使い方について、下記のサンプルコードを例に解説します。

HTMXのサンプルコード

<div id="content">
<p>元のコンテンツ</p>
<button hx-get="/new-content.html" hx-swap="outerHTML">更新</button>
</div>

上記の「hx-get」クラスは指定したファイルやURLにGETリクエストを送る処理です。

「hx-swap」はコンテンツをどのように入れ替えるのか制御する役割があり、指定されている「outerHTML」はHTMLの中身を取得するプロパティです。

サンプルコードでは、hx-getクラスに指定された「new-content.html」ファイルにAjaxリクエストを送り、「hx-swap="outerHTML"」によってリクエスト先のHTMLと情報を書き換える処理を実現しています。

HTMXの属性を使って実際に動的な処理を実装してみます。サンプルコードは下記の通りです。

index.htmlのサンプルコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<script src="https://unpkg.com/htmx.org@1.9.3"></script>
</head>

<body>
<div id="content">
<p>元のコンテンツ</p>
<button hx-get="/new-content.html" hx-swap="outerHTML">更新</button>
</div>
</body>
</html>

new-content.htmlのサンプルコード

<p>更新済みだよ</p>
    

ユーザーが利用する画面を「index.html」、書き換えるHTMLの内容を「new-content.html」内に記載しています。

上記のコードを実行した結果がこちらです。

「更新」ボタンを押して実行

HTMXの使い方1

実行後

htmxの使い方2

上記のようにHTMLだけでAjaxリクエストを送信し、動的な処理を実行できるのがHTMXの魅力です。

HTMXを使ってJSON形式でパラメータをエンコードできる

HTMXには通常のURL形式ではなく、JSON形式でパラメータをエンコードする「json-enc」拡張機能を備えています。[2]

<script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>

上記のコードを記載することでjson-enc拡張機能を利用できます。具体的な使い方について公式サイトで公開されていたので、共有しつつ内容について解説します。

json-enc拡張機能のサンプルコード

<div hx-post='/test' hx-ext='json-enc'>click me</div>

「hx-post='/test'」はdiv要素がクリックされた際、「test」というURLに対してPOSTリクエストを送信することを示しています。

「hx-ext='json-enc'」はこの要素のリクエストに、json-enc拡張機能を適用するのが特徴です。その結果、通常のURL形式ではなくJSON形式でリクエストのパラメータがエンコードされます。

References

  1. ^ HTMX. https://htmx.org/, (参照 2024-01-25).
  2. ^ HTMX. 「The json-enc Extension」. https://htmx.org/extensions/json-enc/, (参照 2024-01-25).
ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア 中途採用者向けのIT・プログラミング研修 - IT・プログラミングを知って学べるコネクトメディア

新着記事

対象者別で探す

子供(小学生・中学生・高校生)向け
プログラミング教室検索する

子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供(小学生・中学生・高校生)
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する