-
htmxのリリース日: htmxは、初めて公開されたのは2020年です。その後、多くのバージョンアップが行われ、最新の情報は公式ウェブサイトやGitHubリポジトリで確認できます。
-
htmxの基本的な使い方: htmxは、HTMLの属性を使用して動作します。以下は、基本的な使い方の例です。
-
クリックイベントのトリガー:
<button hx-get="/api/data" hx-target="#result">データを取得</button> <div id="result"></div>上記のコードでは、ボタンがクリックされると、指定されたURLからデータを取得し、
#resultというIDを持つ要素に結果を表示します。 -
フォームの送信:
<form hx-post="/api/submit" hx-target="#result"> <input type="text" name="username"> <button type="submit">送信</button> </form> <div id="result"></div>上記のコードでは、フォームが送信されると、指定されたURLにフォームのデータを送信し、
#resultというIDを持つ要素に結果を表示します。
- htmxの他の機能: htmxにはさまざまな機能があります。一部の例を以下に示します。
-
モーダルウィンドウの表示:
<button hx-trigger="modal" hx-target="#myModal">モーダルを表示</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close" hx-trigger="close">×</span> <p>モーダルコンテンツ</p> </div> </div>上記のコードでは、ボタンをクリックすると、
#myModalというIDを持つ要素が表示されます。 -
タブの切り替え:
<div hx-target="#tabContent"> <button hx-swap="innerHTML" hx-trigger="click" hx-target="#tabContent" hx-get="/api/tab1">タブ1</button> <button hx-swap="innerHTML" hx-trigger="click" hx-target="#tabContent" hx-get="/api/tab2">タブ2</button> </div> <div id="tabContent"></div>上記のコードでは、ボタンをクリックすると、指定されたURLからデータを取得し、
#tabContentというIDを持つ要素に結果を表示します。
このように、htmxを使用することで、シンプルかつ直感的な方法でウェブアプリケーションの開発を行うことができます。詳細なドキュメントやコード例は、公式ウェブサイトやGitHubリポジトリで入手できますので、ぜひ参考にしてください。