HTMX入門
scripting
HTMXはWebアプリケーションを構築するための宣言的なハイパーメディアアプローチを奨励しています。 ですが、HTMXはクライアントスクリプト(javascript)のための多くのオプションを提供します。 しかし、WebアプリケーションでJavascriptを書くときは、実行可能な限りハイパーメディアに優しいアプローチをお勧めします。
HTMXでJavascriptを書くときは、以下のようなことを心構えてください。
- イベントを使用してコンポーネント間で通信します
- Javascriptと非ハイパーメディアコンポーネントは可能な限り分離してください。
- インラインスクリプトを検討してください
HTMXとスクリプトソリューションの間の主要なコラボレーションポイントは、HTMXが送信するイベントです。 良い例として、サードパーティのjavascriptセクションのsortablejsがあります。JavaScriptライブラリをイベントを介してHTMXと統合します。
HTMXとうまく組み合わせるスクリプトソリューションは次のとおりです。
Vanilla.js-イベントハンドラーにフックするためにJavaScriptの組み込み能力を使用するだけで HTMXエミットのイベントへの応答は、スクリプトに非常にうまく機能する可能性があります。これは非常に軽量で、ますます軽量です 人気のあるアプローチ。Alpine.js-alpine.jsは、洗練されたフロントエンドスクリプトを作成するための豊富なツールセットを提供します。 非常に軽量なままでありながら、リアクティブプログラミングサポートを含みます。アルパインは「インラインスクリプト」を奨励しています 私たちがHTMXとよく組み合わせると感じるアプローチ。jQuery-一部のサークルでの年齢と評判にもかかわらず、jQueryはHTMXと非常によくペアを組んでいます すでに多くのjQueryを持っている古いコードベースで。Hyperscript- ハイパースクリプトは、同様に作成された実験的なフロントエンドスクリプト言語です。 HTMLによく埋め込まれ、イベントに応答して作成するように設計されております。
「クライアントサイドスクリプト」というタイトルの章全体があります ScriptingをHTMXベースのアプリケーションに統合する方法を調べる本。
HX-on 属性
すでにHTMLは、ワンベントプロパティを介してインラインスクリプトの埋め込みを許可します。 (onclickなど)
<button onclick="alert('You clicked me!')"> Click Me! </button>
この機能により、スクリプトロジックは、ロジックが適用するHTML要素と同じ場所に記述することができ、 局所的なJavascriptの動作を保証してくれます。
同様の要素を、HTMXは用意しています。
例えば、hx-on属性を使用してクリックイベントに応答したい場合は、以下のように書いてください。
<button hx-on:click="alert('You clicked me!')"> Click Me! </button>
このようにHTMXのインラインスクリプトは、文字列hx-onに続いて、コロン（またはダッシュ）が続き、次にイベントの名前を書く形式で対応可能です。
クリックイベントには、標準のOnClick属性を使用することをお勧めします。
しかし、htmx:config-request イベントを使用して、リクエストにパラメーターを追加したい場合はHTMXのhx-onを使用せざるを得ません。
<button hx-post="/example" hx-on:htmx:config-request="event.detail.parameters.example = 'Hello Scripting!'"> Post Me! </button>
ここでは、POSTリクエストが発行される前に、「Hello Scripting！」の値をexampleパラメーターに追加することができます。
＃サードパーティJavaScript
HTMXは、サードパーティライブラリとかなりよく統合されています。図書館がDOMでイベントを発射した場合、それらのイベントを使用することができます HTMXからのリクエストをトリガーします。
これの良い例は、sortablejsデモです：
<form class="sortable" hx-post="/items" hx-trigger="end">
<div class="htmx-indicator">Updating...</div>
<div><input type='hidden' name='item' value='1'/>Item 1</div>
<div><input type='hidden' name='item' value='2'/>Item 2</div>
<div><input type='hidden' name='item' value='2'/>Item 3</div>
</form>
ソート可能な場合、ほとんどのJavaScriptライブラリと同様に、ある時点でコンテンツを初期化する必要があります。
jqueryでは、そうするかもしれません：
$(document).ready(function() {
var sortables = document.body.querySelectorAll(".sortable");
for (var i = 0; i < sortables.length; i++) {
var sortable = sortables[i];
new Sortable(sortable, {
animation: 150,
ghostClass: 'blue-background-class'
});
}
});
HTMXでは、代わりにhtmx.onload関数を使用し、新しくロードされたコンテンツからのみ選択します。 ドキュメント全体ではなく：
htmx.onLoad(function(content) {
var sortables = content.querySelectorAll(".sortable");
for (var i = 0; i < sortables.length; i++) {
var sortable = sortables[i];
new Sortable(sortable, {
animation: 150,
ghostClass: 'blue-background-class'
});
}
})
これにより、HTMXによって新しいコンテンツがDOMに追加されると、ソート可能な要素が適切に初期化されます。
JavaScriptがHTMX属性を持っているDOMにコンテンツを追加する場合、このコンテンツを確認する必要があります htmx.process（）関数で初期化されます。
たとえば、いくつかのデータを取得して、Fetch APIを使用してDivに配置する場合、およびHTMLが持っていた場合 HTMX属性には、次のようにhtmx.process（）に呼び出しを追加する必要があります。
let myDiv = document.getElementById('my-div')
fetch('http://example.com/movies.json')
.then(response => response.text())
.then(data => { myDiv.innerHTML = data; htmx.process(myDiv); } );
一部のサードパーティライブラリは、HTMLテンプレート要素からコンテンツを作成します。たとえば、Alpine JSはX-IFを使用します コンテンツを条件付きで追加するテンプレート上の属性。このようなテンプレートは最初はdomの一部ではなく、 HTMX属性が含まれている場合、ロード後にhtmx.process（）への呼び出しが必要です。次の 例を使用して、Alpineの$ Watch関数を使用して、条件付きコンテンツをトリガーする価値の変更を探します。
<div x-data="{show_new: false}"
x-init="$watch('show_new', value => {
if (show_new) {
htmx.process(document.querySelector('#new_content'))
}
})">
<button @click = "show_new = !show_new">Toggle New Content</button>
<template x-if="show_new">
<div id="new_content">
<a hx-get="/server/newstuff" href="#">New Clickable</a>
</div>
</template>
</div>
page:https://minegishirei.hatenablog.com/entry/2024/05/23/181749
