このブログはSinatraで自作しているのだけど、最近画像アップロード機能を実装した。

• impl. Image attaching by yhara · Pull Request #30 · yhara/nlog2

そこで思ったのが、ほんのちょっとのAjaxを追加するのが面倒だなということ。最近(?)はVanilla JSとかいって、「jQueryがなくても素のJSだけで大丈夫」とか言うじゃないですか。でも例えば「削除ボタンを押したら確認ダイアログを出し、Okを選んだらサーバにDELETEリクエストを送り、ボタン部分をレスポンスメッセージで置換する」みたいなのを書こうとするとけっこうめんどい。かといってこのためだけにReactやVueを入れるのはやりすぎで。

そこで本日ご紹介するのがこちらのhtmx。htmlタグにhx-から始まる属性を書くだけでいい感じに動いてくれるというやつ。いかがでしょうか。

<button hx-confirm="Delete this?" hx-post="(APIのURL)" hx-swap="outerHTML">
  Delete
</button>

ここでの肝は短いのがいいということではなくて、宣言的に記述できるという点ですね。「どうやるか」ではなく「何をしたいか」が書いてあるので意図がわかりやすいのが良い。

なのでhtmx自体はかなりいろいろ機能があるっぽいのですけど、それに頼りすぎると「何が起こるか」も「何をしたいか」も全然わからんことになり得るのでそこは注意ですね。

ということでSinatraでちょこっと作ったアプリにhtmxを組み合わせると相性よいかもという話でした。