FastAPIとhtmxでToDoアプリを作成してみた

以前から気になっていたこの技術スタック。

コーディングエージェントが発達する中で、さくっとモックを作りたいなとなったとき、 フルスタックなフロントエンドフレームワークは構成や関連ライブラリ何を採用するか、学習コストがやや高く、そこにあまり時間はかけたくないなと感じたとき、このスタックは1つの選択肢になり得るのではと思いトライした。

リポジトリはこちらただのTodoアプリです。

FastAPIはご存知のかたもいらっしゃると思いますが、Python製のAPIサーバ向けフレームワーク。

• 名前の通り高速。
• APIのI/Fを実装すると自動的にSwagger UIが生成される
• 型定義が含められる。これはFastAPIというよりバンドルされているライブラリによるものなのかも

一方 htmx は Javascriptを書かずに属性を使用してHTML内で直接AJAX、CSSトランジション、WebSockets、サーバー送信イベントを利用できるようにしたライブラリです。やってみましたが、確かに1行もJavascript書きませんでした。

• hx-*という独自属性で非同期通信が行えたり、要素の切り替えが実現できる。以下は個人的に覚えたもの
  • hx-(get|post|put|patch|delete)
    • suffixにHTTP メソッド付加し、指定されたURLに対しリクエストする ex) hx-get="/hoge"
  • hx-trigger
    • オンマウスやクリックなどのトリガーを指定可。数秒時間を待機させて発火などのオプションもある ex) hx-trigger="onmouse"
  • hx-target
    • リクエストを送信した要素とは異なる要素にレスポンスを読み込ませたい場合は、指定する ex) hx-target="#search-result"
  • hx-swap
    • レスポンスで受け取ったHTMLをDOMに差し替える。デフォルトでは、コンテンツはターゲット要素のinnerHTMLを置き換え　る。以下のいずれかの値を持つhx-swap属性を使用することで、これを変更できる。以下は一例。
    • outerHTMLターゲット要素全体を返されたコンテンツで置き換える
    • delete レスポンスに関わらず対象要素を削除する

と、一例は書いたものの公式ドキュメント見ると内容も直感的で理解しやすい印象があるので、そこまで学習コストは高くないと感じられる。あくまで主観。

今後の技術選定の選択肢の1つとして考えてみるのもいいね。