先日「HTMX」なるものを見かけてみてみると、なかなか自分の思考にあうツールであることがわかったので、
調査がてら、触ってみることにしました。
HTMXってなに？
HTMLの記述だけで、javascriptを書かずに、動的処理を行えてしまう、魔法の様なツールだそうです。
確かに、Webコーダーの人で、HTMLやCSSは書けるけど、Javascriptは、コピペやライブラリを使うぐらいしかできないと言う人いますね。
こうした人はデザインや、コーディングに特化するというだけで仕事になっているみたいですが、
昨今のホームページは、Javascriptが書けなければなかなか制作が難しいモノが増えてきています。
そんな時に、このHTMXを使うのがいいというらしいです。
ちなみに、海外では、2023年ぐらいから、HTMLがバズっているらしく、数年遅れの日本は、これからなのかな・・・という感じです。
どうやって使うの？
HTMXの中身は、Javascriptライブラリで、
HTMLタグの属性に書かれた値を元に、事前にセットされたJavascriptで自動的に挙動を適用させてしまうという構造です。
Hello World
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX</title>
</head>
<body>
<script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.js"></script>
<button hx-get="./clicked.html" hx-swap="outerHTML">Hello World</button>
</body>
</html>
clicked.html
<div>
<p>クリックしたよ！</p>
<p>Hello World !!</p>
</div>
同じ階層に置かれたHTMLを読み込むことができます。
ローカルでも動くので、上記のファイルをコピペで作って試してみてね。
注意点
別ドメインのファイルにアクセスする場合は、CORS制限でエラーになる可能性があるので、
自分がコントロールできるファイルにアクセスするのがいいでしょう。
参考サイト
本家サイト :
https://htmx.org/
あとがき
HTMXの手始めに、CDNを使って簡単なAjaxを作ってみましたが、見た目は簡単だけど、
実は、CORSエラーが出たり、取得したデータを切り抜いて使うなどの場合は、
Javascriptで対応する方が早いと感じたのは自分だけでしょうか？
静的ページだけで、HTMLホームページを作成する目的であれば、
HTMXは、最強の武器になりそうだし、スクリプトが苦手なコーダーレベルの人が対応するには悪くないかもですが、細かなところに手が届かなくなることもなんとなく想像できました。
でも、ノーコードが流行っている中、ミドルノーコードとしてのコーディングブームが日本にも間違いなく、あと数年で来ることを考えると、
今のうちに、このツールを使ってOSSでフォークしたりするのもありなのかも・・・と考えてしまいましたね。
0 件のコメント:
コメントを投稿