htmx初心者向け勉強会

ここでは htmx を体験と簡単なハンズオンで学ぶためのものです。前半は静的な HTML ファイルを相手に Ajax 体験をしつつ、後半は CMS のデータを扱い、より実践的なものになります。

このブログテーマ自身も htmx 化したテーマとなっておりますので、最終的にはテーマの作りも SFTP でテーマファイル自身にアクセスして参考にご覧ください。

login

CMS にログインするには、https://d9hqioo2.ablogcms.io/login にアクセスします。 id や パスワード は設定済ですので、ログインボタンをクリックするだけで大丈夫です。

SFTP

テンプレートのカスタマイズの際には SFTP でアクセスください。 id とパスワードは ablogcms.io の登録の際にメールでご案内しています。

hands-on

ある程度は、login する事で記事の中に書かれたコードを変更して htmx を体験できるような作りにしてあります。

（変更ボタン）をクリックしてコンテンツの更新フォームに切り替え「自由入力」となっている部分が実際に HTML として動いている部分になります。このコードを修正して htmx の体験ください。

動作については、以下のような demo のクリックなどで動作させられます。

htmx とは

htmx は、HTML を拡張してインタラクティブなウェブアプリケーションを構築するためのシンプルで強力なフレームワークです。JavaScript のコードを書くことなく、HTML 属性を使用してサーバーとの非同期通信（ Ajax ）を実現し、動的なコンテンツの更新や、部分的なページのリロードが可能です。これにより、クライアントサイドの複雑なロジックを避け、バックエンドのロジックを直接活用できるため開発効率が向上します。

2023 JavaScript Rising Stars では、 Front-end Frameworks で 2位 となっていることから、海外では注目されているフロントエンドフレームワークということのようです。

難しい JavaScript を書くことなく、HTML にいくつかの属性を追記するだけで動作させることができます。

更に詳しいことについては、2024年01月23日に書かれた以下のページがオススメです。

あとは 公式サイト の ドキュメント ・ リファレンス などもご活用ください。

<a href="/sample/demo.html" hx-get="/sample/demo.html">demo</a>

demo.html のコードを確認する

<h3>demo</h3>
<p>This file was loaded via Ajax using htmx technology. This file was loaded via Ajax using htmx technology. This file was loaded via Ajax using htmx technology.</p>

読み込まれるコンテンツに リンク が残り、demo の文字列だけが置き換わったことが確認できます。