[ Home ]
back

htmx + Vite スタック試作メモ、exampleなど

id: 56, 2024-08-08

概要:

htmlの関連メモとなります。

  • javascript使わずに。インタラクティブ機能が追加できるらしいです。
  • ajaxのような、通信機能ありそう。
  • サーバーは、なんでも良さそうでした。
  • Vite SSR的な構成です。
  • vite SSRの例は、下記参考しました。
  • https://github.com/bluwy/create-vite-extra

[ 作成日: 2024/06/30 ]

環境

  • htmx
  • Vite
  • React
  • react-dom
  • express

関連

作成したコード

https://github.com/kuc-arc-f/vite_16react/tree/main/sample/htmx1

  • hx-get の例

  • sample/htmx1/server/pages/Htmx2.tsx

https://github.com/kuc-arc-f/vite_16react/blob/main/sample/htmx1/server/pages/Htmx2.tsx

  • hx-get: GET通信できる。
  • hx-target: id指定で、DOMを書き換えできる。
<button
hx-get="https://jsonplaceholder.typicode.com/users/1"
hx-target="#h2"
>
Click
</button>
<h3 id="h2">ここに表示</h3>
  • hx-post: 内部API通信、レスポンス値の表示
  • sample/htmx1/server/pages/Htmx3.tsx

https://github.com/kuc-arc-f/vite_16react/blob/main/sample/htmx1/server/pages/Htmx3.tsx

  • hx-post: 内部POST通信、エンドポイント指定
  • hx-on: htmx:afterRequest: 受信後のタイミングでJS関数実行できる。(完了メッセージなど)
<form
hx-post="/api/test/test1"
hx-trigger="submit"
hx-target="#h2"
hx-on="htmx:afterRequest: alert("OK, post send")"
>
<input type="text" name="name" />
<button type="submit">Add</button>
</form>
  • API: sample/htmx1/server/api/test.ts

https://github.com/kuc-arc-f/vite_16react/blob/main/sample/htmx1/server/api/test.ts

API連携

  • 外部API連携例になります。
  • CRUD一部実装してます。
  • ほぼSSR構成です。

作成したコード

https://github.com/kuc-arc-f/express_47htmx/tree/main/sample/api_test

  • sample/api_test/src/pages/TestApi.tsx

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/api_test/src/pages/TestApi.tsx

  • hx-post : POSST通信
      <form
      hx-post="/api/common/send_post"
      hx-trigger="submit"
      hx-target="#h2"
      hx-on="htmx:afterRequest: location.reload()"
      >
        <label>title:</label>
        <input type="text" name="title" /><br />
        <label>Content:</label>
        <input type="text" name="content" /><br />
        {/*  */}
        <input type="text" name="api_url" defaultValue="/test/create" /><br />
        <button type="submit">Add</button>
      </form>
      <hr />
      <h3 id="h2">ここに表示</h3>
  • API
  • sample/api_test/src/routes/commonRouter.ts

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/api_test/src/routes/commonRouter.ts

Turso LibSQL連携

  • Turso連携例になります。
  • CRUD一部実装してます。

作成したコード

https://github.com/kuc-arc-f/express_47htmx/tree/main/sample/turso_todo

  • sample/turso_todo/src/pages/HtmxTodo.tsx

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/turso_todo/src/pages/HtmxTodo.tsx

  • hx-post: POST通信
      <form
      hx-post="/api/turso_todo/create"
      hx-trigger="submit"
      hx-target="#h2"
      hx-on="htmx:afterRequest: location.reload()"
      >
        <label>title:</label>
        <input type="text" name="title" /><br />
        <label>Content:</label>
        <input type="text" name="content" /><br />
        <button type="submit">Add</button>
      </form>
      <hr />
      <h3 id="h2">ここに表示</h3>
  • API
  • sample/turso_todo/src/routes/tursoTodoRouter.ts

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/turso_todo/src/routes/tursoTodoRouter.ts

Zod form 検証

  • zod検証の例です。
  • server検証です

作成したコード

https://github.com/kuc-arc-f/express_47htmx/tree/main/sample/zod

  • sample/zod/src/pages/Zod1.tsx

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/zod/src/pages/Zod1.tsx

  • hx-post: POST通信
  • NGの時、エラーを表示します。
      <form
      hx-post="/api/zod/test"
      hx-trigger="submit"
      hx-target="#resulte_form1"
      hx-on="htmx:afterRequest: Zod1.afterPostForm1()"
      >
        <label>title</label>
        <input type="text" name="title"
        className="mx-2 border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500" 
        /><br />
        <hr className="my-2" />
        <label>content</label>
        <input type="text" name="content"
        className="mx-2 border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
        />   
        <hr className="my-2" />
        <button type="submit"
        className="ms-2 bg-transparent hover:bg-purple-500 text-purple-700 font-semibold hover:text-white py-2 px-4 border border-purple-500 hover:border-transparent rounded"
        >Add</button>
      </form>
      <hr />
      <div id="resulte_form1" className="d-none">ここに表示</div>
  • API
  • sample/zod/src/routes/zod.ts

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/zod/src/routes/zod.ts