35ページ目 | 長期運用に強い国産CMS

htmx の基本と事例

ウェブ開発の世界は日々進化しており、新しい技術やツールが次々と登場しています。その中でも、最近注目を集めているのが htmx です。htmx は、HTML を拡張してインタラクティブなウェブアプリケーションを簡単に作成できる JavaScript ライブラリです。

本記事では、htmx の基本的な概要から、その利点、使い方、具体的な活用例までを詳しく解説します。ウェブ開発者の皆さんにとって、htmx を理解し活用することは、より効率的で魅力的なユーザー体験を提供するための重要なステップとなるでしょう。

htmx とは何か？

htmx は、HTML を拡張して、よりインタラクティブで動的なウェブアプリケーションを構築するための軽量なライブラリです。従来の JavaScript を多用した開発とは異なり、htmx を使用することで、HTML属性を通じて直接サーバーとの通信を行い、ページの一部を更新することが可能になります。

このライブラリの主な目的は、開発者がクライアントサイドの複雑な JavaScript コードを書くことなく、簡単に動的な機能を実装できるようにすることです。例えば、ボタンをクリックした際に部分的にページを更新したり、フォームを送信してその結果を即座に表示したりすることが、htmx を用いることで非常に簡単になります。

htmx は、HTML属性を通じて Ajaxリクエストを送信し、その結果を DOM に反映させることができるため、開発者は HTML の記述に集中しながら、必要な動的機能を実装することができます。このアプローチは、コードの可読性を高め、保守性を向上させると同時に、開発速度を大幅に向上させることができます。

さらに、htmx は他のフレームワークやライブラリと組み合わせて使用することができるため、既存のプロジェクトに簡単に統合することが可能です。このように、htmx は現代のウェブ開発において、シンプルでありながら強力なツールとして注目されています。この文章は、htmx の基本的な概念とその目的を明確に説明し、読者にその利便性を伝えることを意図しています。

htmx の利点

htmx は、ウェブ開発において多くの利点を提供するライブラリです。以下にその主な利点を挙げてみましょう。

1. シンプルな実装: htmx を使用することで、複雑な JavaScript コードを書くことなく、インタラクティブな機能を HTML 属性を通じて簡単に実装できます。これにより、開発者は HTML の記述に集中しながら、動的なユーザー体験を提供することが可能です。
2. コードの可読性と保守性の向上: htmx は HTML 内に直接機能を記述するため、コードがシンプルで読みやすくなります。これにより、プロジェクトの保守性が向上し、新しい開発者がプロジェクトに参加する際にも理解しやすくなります。
3. パフォーマンスの向上: htmx は部分的なページ更新を可能にするため、ページ全体を再読み込みする必要がありません。これにより、ユーザー体験が向上し、サーバーへの負荷も軽減されます。
4. 他のフレームワークとの互換性: htmx は他の JavaScriptフレームワークやライブラリと組み合わせて使用することができます。これにより、既存のプロジェクトに容易に統合でき、新しい機能を追加する際にも柔軟に対応できます。
5. 開発速度の向上: htmx の直感的な API とシンプルな構造により、開発者は迅速にプロトタイプを作成し、フィードバックを得ることができます。これにより、開発サイクルが短縮され、迅速な開発が可能になります。

これらの利点により、htmx は特に中小規模のプロジェクトや、迅速なプロトタイピングが求められるプロジェクトにおいて、非常に有用なツールとなっています。開発者は、htmx を活用することで、効率的かつ効果的にウェブアプリケーションを構築することができるでしょう。この文章は、htmx の利点を具体的に説明し、読者にその有用性を理解してもらうことを目的としています。

htmx の基本的な使い方

htmx を使い始めるのは非常に簡単です。ここでは、基本的な使い方をステップバイステップで解説します。htmx を利用することで、HTML の属性を使ってサーバーとの通信を行い、ページの一部を動的に更新することができます。

htmx の導入

まず、htmx をプロジェクトに導入する必要があります。CDN を利用して、簡単に HTMLファイルに追加できます。

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

このスクリプトタグを HTML の <head> に追加することで、htmx を使用する準備が整います。

基本的な属性の使用

htmx は、特定の HTML属性を使用してサーバーとの通信を制御します。最も基本的な属性は hx-get です。これは、指定した URL からデータを取得し、指定した要素にその結果を挿入します。

<button hx-get="/some-endpoint" hx-target="#result">
  データを取得
</button>

<div id="result">
  <!-- ここにサーバーからのデータが表示されます -->
</div>

この例では、ボタンをクリックすると、/some-endpoint からデータを取得し、その結果が <div id="result"> に表示されます。

フォームの送信

htmx を使用すると、フォームの送信も簡単に行えます。hx-post 属性を使用して、フォームデータを指定した URL に送信します。

<form hx-post="/submit-form" hx-target="#response">
  <input type="text" name="username" placeholder="ユーザー名">
  <button type="submit">送信</button>
</form>

<div id="response">
  <!-- ここにサーバーからの応答が表示されます -->
</div>

このフォームを送信すると、/submit-form にデータが送信され、その応答が <div id="response"> に表示されます。

イベントとトリガー

htmx では、特定のイベントをトリガーとしてサーバー通信を行うことも可能です。例えば、hx-trigger を使って、マウスオーバーやスクロールなどのイベントでデータを取得することができます。

<div hx-get="/hover-endpoint" hx-trigger="mouseover" hx-target="#hover-result">
  ホバーしてデータを取得
</div>

<div id="hover-result">
  <!-- ホバー時にサーバーからのデータが表示されます -->
</div>

このように、htmx はシンプルな HTML属性を利用して、インタラクティブな機能を簡単に実装することができます。これにより、開発者は効率的に動的なウェブアプリケーションを構築することが可能です。この文章は、htmx の基本的な使い方を具体的なコード例とともに説明し、読者が実際に試してみることができるように構成されています。

htmx を使ったプロジェクトの実例

htmx は、そのシンプルさと柔軟性から、さまざまなプロジェクトで効果的に活用されています。ここでは、弊社で htmx を利用した具体的なプロジェクトの実例をいくつか紹介します。

現在ご覧のコンテンツ自身

このページ自身も htmx を活用して表示させています。

Case 01 / Ajax 経由で記事を表示: モーダルウィンドウを表示させ、Ajax を利用してコンテンツを読み込んでいます。この際、ブラウザの History API を活用して履歴とタイトルタグを同時に更新することで、各ページを閲覧した記録がブラウザの履歴に残るようにしています。
Case 02 / サイト内検索とさらに読み込むボタン: こちらでは、事例紹介のコンテンツを検索する機能に htmx を活用し、Ajax による動的な検索結果の更新を実現しています。検索ボタンを押す必要がなく、文字入力のたびに結果が更新されるようにトリガーが設定されています。また、「さらに読み込む」ボタンも htmx を利用した代表的な実装例です。
よくある質問: 質問のタイトルを「Q」、回答を「A」として、1ページのコンテンツをタイトル一覧のみ表示する実装を行っています。本文はタイトルをクリックした際に読み込まれるようになっています。

10万件データのサンプルサイト

月額330円の共用レンタルサーバーに、a-blog cms と htmx を組み合わせて構築した、10万件の記事が入ったウェブサイトのパフォーマンスをチェックできるデモサイトです。最初のアクセス時には、CMS がページ全体を組み立てて表示しますが、サイト内の遷移は htmx を利用して部分的に更新しています。htmx は、変更が必要な部分だけを更新することで、より高速な表示を実現している事例です。

https://appleple.lolipop.jp/

htmx@blog テーマ

a-blog cms の標準的なブログテーマをベースに htmx を利用し、初回アクセスのみ a-blog cms がページを生成し、ブログ内の遷移は htmx で Ajax で更新をしています。分かりやすくするために、右上に a-blog cms か htmx どちらでページを更新したかを見える化しています。

htmxを学ぶためのリソースと次のステップ

htmxの基本を理解したら、さらに深く学んでプロジェクトに活用するためのリソースと次のステップを考えてみましょう。以下に、学習を進めるための有用なリソースと実践的なアプローチを紹介します。

1. 公式ドキュメント

htmxの公式ドキュメントは、ライブラリの機能や使い方を詳細に説明しており、学習の出発点として最適です。公式サイトには、基本的なチュートリアルや高度な機能の解説が含まれています。

htmx 公式サイト

2. コミュニティフォーラムやディスカッション

htmxのコミュニティフォーラムやディスカッションボードに参加することで、他の開発者と交流し、質問やアイデアを共有することができます。Stack Overflowやdiscord の関連スレッドも参考になります。

htmx discord 日本語のチャンネルも1つあります
Stack Overflowでhtmxを検索英語

3. ブログ記事

a-blog cms：開発ブログ

アップルップル：スタッフブログ

その他、外部のオススメ

4. 実際に触ってみましょう

弊社では、htmx のハンズオン勉強会を東京・大阪・名古屋・福岡・高松とリアル開催してきています。その中で利用したハンズオンのサイトを誰でも30日間利用できるようなサービスとして提供しています。（所属・お名前・メールアドレスの登録が必要です）

ablogcms.io htmx勉強会用

htmx と a-blog cms の相性が良さそうな理由

htmx のことを調べてここに辿り着いた方は、a-blog cms を知らないかもしれませんので、少しだけ説明をしておきます。

a-blog cms とは

a-blog cms は、PHP + MySQL で動作する国産のローコードCMSです。基本的にはHTMLファイルとしてテンプレートを作成し、PHP や JavaScript などの難しいことを書かずにウェブサイトを作成できるCMS（コンテンツ・マネージメント・システム）です。

a-blog cms には htmx に似た Ajax 機能が標準搭載

a-blog cms には「post include」機能という名称で、10年以上前から htmx のような Ajax 機能が用意されています。よく利用される記述を以下にサンプルコードとして紹介します。

<form action="" method="POST" class="js-post_include" target="#result">
  <input type="text" name="keyword" value="%{KEYWORD}">
  <input type="hidden" name="tpl" value="/include/search-result.html">
  <input type="submit" name="ACMS_POST_2GET_Ajax" value="検索">
</form>
<div id="result">検索結果を表示</div>

post include 機能は、form タグに class="js-post_include" を設定することで、ページ遷移をせずに Ajax でページを更新します。form のボタンがクリックされると、target="#result" で指定されたエリアに、指定したテンプレート（/include/search-result.html）を用いて情報を表示します。

読み込まれる /include/search-result.htm のコード

<!-- BEGIN_MODULE Entry_List id="search-result" -->
  <ul>
    <!-- BEGIN entry:loop -->
      <li><a href="{url}">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
<!-- END_MODULE Entry_List -->

読み込みたい HTML だけを記述したテンプレートファイルを用意することで必要な HTML を部分的に読み込むことが可能です。その際には、特に PHP や SQL といったバックエンド側の事は何も書く必要がありません。

post include を htmx に置き換えてみる

作業は簡単で <form> タグ部分の属性を書き換えます。class の指定を hx-post に、target を hx-target に変更します。

<form action="" method="POST" hx-post="" hx-target="#result">
  <input type="text" name="keyword" value="%{KEYWORD}">
  <input type="hidden" name="tpl" value="/include/search-result.html">
  <input type="submit" name="ACMS_POST_2GET_Ajax" value="検索">
</form>
<div id="result">検索結果を表示</div>

ほとんど実装部分は同じで大丈夫なことが分かります。あとは <head> に htmx のライブラリの読み込みをするだけです。

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

post include ではなく htmx にするメリット

同じことができるだけであれば、そのまま標準的な post include 機能を利用すればいいことになりますが、htmx を利用するメリットを紹介しておきます。

POST だけでなく GET も利用可能

post include という名前の通り a-blog cms の標準機能では POST（ <form>タグの中）での利用ということになり、使える場所の制限があります。 htmx を利用することにより GET での利用が可能になります。

<a href="sample.html" hx-get="sample.html" hx-target="#result">クリック</a>

History API を利用可能

Ajax でコンテンツを更新する際に、そのコンテンツ自身の URL がある場合、その URL に書き換える History API に対応しています。このコンテンツを Ajax で読み込んで表示してご覧になっているのであれば URL を確認してみてください。

設定としては hx-push-url="true" を追加するだけです。

<a href="sample.html" hx-get="sample.html" hx-target="#result" hx-push-url="true">クリック</a>

合わせて、タイトルタグの変更も変更することができますので、ブラウザの履歴を確認すると URL とタイトルが記録されていることも確認できるのではないでしょうか。

複数 target の更新可能

hx-target="#result" を更新するのが標準的な機能ではありますが、読み込む HTML 側に id="result" で表示する以外のコンテンツも追加で記述をすることで、他のエリアも更新が可能です。

htmx を手軽に学ぶ手段はありますか？

a-blog cms をお試しするための環境 ablogcms.io に htmxハンズオン勉強会の資料をそのまま公開しています。

前半は、htmx の基礎から始まり、後半は a-blog cms への実装について体験できるコンテンツと、実際に管理画面上のフォームからコードを書き換えて実行できるようなハンズオンコンテンツとなっております。

また、利用申請時のメールアドレス宛に、htmx を活用して作られたブログテーマのテンプレートを確認するための SFTP のアカウントが届きますので、ハンズオンが終了後に、そのハンズオンサイトのテーマがどのように実装されているかも合わせてご確認ください。

htmx を学んでみる

ブランドサイト