エクスクリエ
htmxでウェブ開発をシンプルに
目次
こんにちは！ 今回の記事担当の TERA です。
JavaScript の記述をせずに、HTML をそのまま使ってモダンな開発ができるようになるライブラリの紹介です。
htmx とは
htmx が提供する様々な属性を HTML に記述することでシンプルなコードでサーバーサイドとの非同期的な通信が可能になります。
使い方
CDN から読み込むだけで簡単に使えるようになります
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
コード例
/users のエンドポイントからユーザーの一覧を返すようになっているとします
JavaScript を使ってユーザー一覧を取得し、HTMLに表示する例です。
<body>
<h1>ユーザー一覧</h1>
<button id="fetchUsers">ユーザーを取得</button>
<ul id="user-list"></ul>
<script>
const fetchUsersButton = document.getElementById("fetchUsers");
const userList = document.getElementById("user-list");
fetchUsersButton.addEventListener("click", () => {
fetch("users")
.then((response) => response.json())
.then((data) => {
const usersHTML = data.map((user) => `
<li><b>${user.name}</b> (${user.email})</li>
`).join("");
userList.innerHTML = usersHTML;
})
.catch((error) => {
console.error("ユーザーの取得に失敗しました。", error);
});
});
</script>
</body>
これを htmx で置き換えるとこうなります
<!DOCTYPE html>
<html>
<head>
<title>ユーザー一覧</title>
<!-- htmxライブラリの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/htmx.org@1.6.0/dist/htmx.js"></script>
</head>
<body>
<h1>ユーザー一覧</h1>
<button hx-get="/users" hx-trigger="click" hx-target="#user-list">
ユーザーを取得
</button>
<ul id="user-list"></ul>
</body>
</html>
HTML のタグ要素に記述するだけで同じことが実現できます
まとめ
Ajax の例だけでなく他にも色々な使い方ができるので気になった方は公式サイトを参考にして試してみてください
私たちは積極的に採用活動をしております。
https://www.excrie.co.jp/recruit/