「FastAPI + htmxが最強説」- AIエンジニアがモック作るならReactは不要、Streamlitも捨てよう
FastAPI + htmxが最強説 - Pythonエンジニアがモック作るならReactは不要、Streamlitも捨てよう この記事はLivetoon Tech Advent Calendar 2025の12日目の記事です。 宣伝 今回のアドベントカレンダーでは、LivetoonのAIキャラクターアプリのkaiwaに関わるエンジニアが、アプリの話からLLM・合成音声・インフラ監視・GPU・OSSまで、幅広くアドベントカレンダーとして書いて行く予定です。 是非、publicationをフォローして、記事を追ってみてください。 本題 どうも、LivetoonCTOのだいちです。 今回はスタートアップでプロトタイプ開発する時の技術選定について書きます。結論から言うと、FastAPI + htmxという組み合わせがモック開発において最も効率的で効果があると思います。 モックごときでReactを
はじめに この記事の内容はhtmx v1の記事です。 最新のhtmx v2に関する解説は以下の本にまとめましたので、そちらを参考にしてください！！ HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのH
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
プログラミング言語 HTML 入門
はじめに 以前 uhyo さんにより「HTML はプログラミング言語である」と示されたことは記憶に新しいところですが、昨年末の HTML, The Programming Language の登場により、その主張はより強固なものとなりました。現代ではもはや、HTML は立派なプログラミング言語であるということは疑いようがありません。 この記事では、プログラミング言語 HTML, The Programming Language について、その概要と基本的な文法について説明します。そして最後に、HTML プログラミングの応用例として FizzBuzz やフィボナッチ数列の実装例を見ていきます。 HTML, The Programming Language HTML, The Programming Language (以下 HTML と略します) は、HTMX を開発していることで有名な B
面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします。 管理画面を作る動機 ここではTonamelの管理画面について、考えて導入したことを書きます。 tonamel.com Tonamelはゲーム大会やイベントを開催するためのプラットフォームです。We
htmxは、HTMLの属性を追加するだけで、インクリメンタル検索やインライン編集をはじめとするさまざまな動的なUI（User Interface）を実現できるJavaScriptライブラリです。SPA（Single Page Application）フレームワークのような大がかりなビルド環境を用意することなく、すでにあるサーバーサイドアプリケーションに段階的に導入できる点も大きな魅力です。 本記事では、htmxの基本的なしくみや使用方法を紹介したのち、架空のタスク管理アプリケーションを題材に、htmxで実現できるさまざまなインタラクションを紹介します。 htmxの概要 HTMLを拡張するアプローチ htmxの基本的なアイデアは、HTMLの属性を使ってサーバーとの通信およびDOM更新を宣言的に記述するというものです。 たとえば、ボタンがクリックされたらサーバーからデータを取得し、画面の一部を
HTMX入門【はじめからそうやって教えてくれればいいのに！】
はじめに 【追記】↓100秒テックでイラスト投稿してます！よかったら見てってください！ HTMXとは？ HTMX とは、一言で言うと、JavaScriptを書かずに動的なページを簡単に作成できるライブラリのことです。 htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. （訳）htmx は、JavaScript を使用するのではなく、HTML から最新のブラウザー機能に直接アクセスできるようにするライブラリです。 </> htmx ~ Documentation ...と言っても、これだけだとよく分からないですよね。なので、実際に手を動かしながら学べるよう、解説していきます。 準備 まず、HTMX を動かす環境
https://hackers-champloo.org/2023/program.html のLT、「htmx is not a typo」のスライドです。 スライド内で紹介した情報やリンクは以下のとおりです。 https://htmx.org https://www.thought…
=>htmz> a low power tool for html htmz is a minimalist HTML microframework for creating interactive and modular web user interfaces with the familiar simplicity of plain HTML. [GitHub] plain🍦 Use straight up HTML. No supersets. No hz- ng- hx- v- w- x-; no special attributes. No DSLs. No <custom-elements>. Just vanilla HTML. lightweight🪶 166 bytes in total. Zero dependencies. Zero JS bundles to l
WebUI をサッと作るツールとしての htmx
この記事は SecHack365 Advent Calendar 2024 2日目の記事です。先に断っておくと SecHack365 要素は1ミリもありません、ごめんなさい。 はじめに htmx というツール (ライブラリ？) をご存じでしょうか？ちょっと前に話題になったっきりで特に広く使われていることもなく、今や情報の海に溺れている悲しいやつです。 実際に使ってみると確かにプロジェクトの規模にスケールしなさそうだなと思った一方で、簡単に WebUI とかを生やすのには結構向いているのでは？と感じました。なのでこの記事ではそれを布教していきます。 htmx とは 最近のモダンなWebアプリ (RESTful な SPA を想像してください) はサーバーから JSON 形式でデータを受け取ってそれを JavaScript を用いて画面にレンダリングすると思います。ここでいう JavaScri
Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページの一部を更新することを可能にする JavaScriptライブラリです。HTML属性の拡張により簡単に使用できるようにし、結果として、コードの可読性が向上し、将来のメンテナンスも容易になります。これらの特徴から、htmx はウェブサイト制作の現場での活用が期待されます。 簡潔さとアクセシビリティ: htmx は、複雑な JavaScriptコードを書かずに、HTML 内で直接動的な振る舞いを宣言することを可能にします。これにより、Web開発がよりアクセスしやすく、より理解しやすくなることを意味します。 非同期リクエストの簡易化 : htmx は、Ajaxリクエストを簡単に実装するための属性を提供します。これにより、サーバーへの非同期リクエストを簡単に行い、ページの一部を更新できます。 導入の容易さ :
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Honoとhtmx
Yusuke Wada - 2024/3/15 Ya8 2024 - ヤパチー 令和六年最新版(仮)
コーポレートサイトでの htmx 実装をデモサイトで試してみよう | htmx | ブログ | a-blog cms developer
[htmx](https://htmx.org/) という JavaScript のライブラリが、[2023 JavaScript Rising Stars : Front-end Frameworks](https://risingstars.js.org/2023/en#section-framework) で 2位 に...
はじめに 株式会社 IVRy で新規事業開発をしています@dr_paradi です。好きなトランペッターはエリック・ミヤシロです。 本記事はDatabricks Advent Calendar シリーズ1の23日目の記事です。 本記事は下記の 「FastAPI + htmxが最強説 — Pythonエンジニアがモック作るなら React は不要、Streamlit も捨てよう」 という Zenn 記事に多大な影響を受けています。元々社内アプリに限らず、アプリのモックを Streamlit で作るとメモリ管理やあまりに Streamlit ぽすぎる UI がイマイチなため FastAPI + 何らかのフロントエンドの技術を用いつつも「React書くの大変だし、Vibe Coding で React 書くのもなあ」と思っていたので非常に参考になりました。 背景 わたしが勤めている IVRy と
I picked up most of my soft/hardware troubleshooting skills in the US Army. A decade of Java development drove me to operations, scaling infrastructure to cope with the thundering herd. Engineering coach and CTO of Teleclinic. The ultimate goal of HTMX is to provide modern browser interactivity directly within HTML, without the need for JavaScript. Although relatively new, with its initial release
著者 Carson Gross（カーソン・グロス），Adam Stepinski（アダム・ステピンスキ），Deniz Akşimşek（デニズ・アクシムシェク） 著 嶌田喬行（しまだたかゆき） 訳 定価 3,740円（本体3,400円＋税10%） 発売日 2025.6.11 判型 B5変形 頁数 368ページ ISBN 978-4-297-14945-1 978-4-297-14946-8 概要 近年急速に注目を集めるフロントエンドライブラリ「htmx」について、その作者自身らが執筆した解説書です。 htmxの魅力はそのシンプルさにあります。そのシンプルさは、30年にわたりウェブを支えてきたハイパーメディアの力を再発見し、HTMLそのものを拡張するという発想から生まれました。 本書の第1部では、ハイパーメディアの歴史としくみを紐とき、ウェブの根幹でありながら現代では誤解されがちなRESTの
The current state of web application development User expectations of the web are now that you have this super-smooth no-reload experience. Unfortunately, it's an expectation that is usually delivered with single-page applications (SPAs) that rely on libraries and frameworks like React and Angular, which are very specialised tools that can be complicated to work with. A new approach is to put the
Native Apps with Go + DatastarBuild native iOS, Android, and desktop apps using Go, HTML, and Datastar. The richness of a webapp in a native app. No JavaScript frameworks required.
import Image from '../../components/R2Image.astro'; As a former backend engineer, I sometimes find React complex. Moreover, as a framework developer, creating a hydration mechanism can be troublesome. But we often end up using React. One of the main advantages of using React is JSX. At first, JSX seems strange - "Why are HTML tags in JavaScript!!!" However, once I get used to it, I find that JSX i
Hypermedia Systems
The revolutionary ideas that empowered the Web. A simpler approach to building applications on the Web and beyond with htmx and Hyperview. Enhancing web applications without using SPA frameworks. Hardcover Buy from Amazon Softcover Buy from Lulu M4說 Read online Free, forever EPUB Buy from Lulu Kindle Buy from Amazon For web developers frustrated with the complexity of modern practice, those looki
情報発信に便利で軽量なActivityPubサーバー「Takahē」［後編］ ～基本的なアーキテクチャと特徴的なコンポーネントの紹介と、サーバーの構築方法 前編では、ActivityPub/FediverseサーバーTakahē（タカヘー）の特徴（特に、他のActivityPubサーバーでサポートされていないマルチドメインサポート）と、クライアントアプリElkとともに使用する方法について紹介しました。 後編の記事では、Takahēサーバーの基本的なアーキテクチャや、Takahēの特徴的なコンポーネント、内部で使われている面白いライブラリなどを紹介します。記事の最後では、docker-composeを使って実際にTakahēサーバーをコンテナで起動し、手元で試してみます。 Takaheの基本的なアーキテクチャ Takahēは、主に3つのコンポーネントから作られています。メインのTakah
It is all well and good talking about REST & HATEOAS in theory or describing the Hypermedia-Driven Application architecture, but, at the end of the day, what matters in software is practical: Does it work? Does it improve things? We can say for sure that htmx works, since we use it in our own software. But it is hard to say that it would be an improvement over other approaches, since we haven’t ha
The AHA Stack
Combine Astro, htmx and Alpine.js to create modern web applications sending HTML over the wire, replacing the SPA JS-heavy approach with a much simpler set of mental models and workflows.
過日、@tonyennis氏のHTML Firstという文書を拝読しました。 少し調べているとHTML Driven Development - Valuesのように似た話について言及している記事もちらほら見つかり、興味を惹かれる内容でしたので少し深堀って考えてみた事をここに残します。 いそがしい人向け HTML Firstの原則はモダンフレームワークを基盤にした開発に適用できるものではない HTML Drivenな開発とはhtmxやhyperscriptのようなライブラリを活用する開発であるといえる 技術スタック及びアーキテクチャを見直す Locality of Behaviourを重視した設計思想 課題はあるが、プロダクトの性質によっては採用の余地がありそう HTML Firstとは何か まず、件の文書からHTML Firstがどのようなものであるか見てみましょう。 概要 HTML F
Lightweight Javascript Framework Review (For Django Developers)
Lightweight Javascript Framework Review (For Django Developers) The Full-Stack Django Series: How to Combine Frontend and Backend Lightweight Javascript Framework Review How to add Typescript to Django Django Favicon Guide How to Develop Responsive HTML Email in Django Django Form Validation Guide Introduction Many developers are confused when they try to find a Lightweight Javascript Framework fo
htmx 2.0.0-alpha1 Release I’m happy to announce the first alpha release of htmx 2.0 This is an alpha release and should NOT be considered ready for production. We are releasing it to begin testing the code against real world scenarios to figure out what is broken and what needs improvement. If you are able to do so, please switch to the release and do a quick run through any htmx-powered functiona
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? htmxとは htmxは近年話題のJavaScriptライブラリで、JavaScriptのライブラリながらJavaScriptを書くことなく、HTMLだけでAjax通信やそれに伴うDOMの更新を実現することが可能です。 指標として、1年間のGitHubスター数の増加ランキングであるJavaScriptライジングスター 2024のフロントエンドフレームワーク部門ではReactを抑えて1位を獲得しています。 htmxの思想 htmxの思想については公式サイトに記載されているモチベーションを見るのが分かりやすいでしょう。 motivation
htmx 2.0.0 Release I’m very happy to announce the release of htmx 2.0. This release ends support for Internet Explorer and tightens up some defaults, but does not change most of the core functionality or the core API of the library. Note that we are not marking 2.0 as latest in NPM because we do not want to force-upgrade users who are relying on non-versioned CDN URLs for htmx. Instead, 1.x will r
GitHub - getludic/ludic: 🌳 A type-safe HTML template engine for Python. Build dynamic web pages using Python components with a React-like approach.
Documentation: https://getludic.dev/docs/ "I've just composed my first PageLayout component and I have no words!" – Igor Davydenko Ludic is a lightweight framework for building HTML pages with a component approach similar to React. It is built to be used together with htmx.org so that developers don't need to write almost any JavaScript to create dynamic web services. Its potential can be leverage
Hyperflask
The Python stack to build web apps at light speed From dev environment to UI framework to deployment, Hyperflask integrates everything seamlessly to let you focus on what you are building. v0.5 (BETA) Get started ⚠️ Hyperflask is still in BETA and being actively developed. Check out the roadmap for a status update. Truly full stack to let you focus on building Choosing technologies for every aspec
A measured-yet-opinionated plea from someone who's tired of watching you suffer Look. I'm not going to call you a fucking moron every other sentence. That's been done. It's a whole genre now. And honestly? HTMX doesn't need me to scream at you to make its point. The sweary web manifesto thing is fun—I've enjoyed reading them—but let's be real: yelling "JUST USE HTML" or "JUST FUCKING USE REACT" ha
はじめに どうもしょーやです。 Twitter(X)やってるのでよかったらフォローしてください 今回は最近話題になっていたHTMXを使って簡単なチャットアプリを作っていこうと思います！ チャットを作る上でwebsocketを用いたリアルタイムな通信が必要なわけですが、あまり日本語でHTMXのwebsocketを実装している記事が見つからなく💦 公式ドキュメントと睨めっこしながら手探りで作ったのでご指摘や改善案など大歓迎です！ HTMXとは 以下公式ドキュメントの内容をdeeplで和訳したものです。 htmxは、属性を使用して、AJAX、CSSトランジション、WebSocket、およびサーバー送信イベントにHTMLで直接アクセスできるため、ハイパーテキストのシンプルさとパワーで最新のユーザーインターフェイスを構築できます。 HTMXは既存のHTMLの記法を拡張したもので、JSを書かずともA
How Functional Programming Shaped (and Twisted) Frontend Development A friend called me last week. Someone who’d built web applications back for a long time before moving exclusively to backend and infra work. He’d just opened a modern React codebase for the first time in over a decade. “What the hell is this?” he asked. “What are all these generated class names? Did we just… cancel the cascade? W
Monacaアプリを作る際に欠かせないのがサーバーとの通信でしょう。この時にはいわゆるAjaxと呼ばれる手法を利用して、サーバーへリクエストを行い、返ってきたレスポンスに応じて画面を書き換えます。 こうした処理を書くのはとても面倒で、複雑になりやすいものです。そこで使ってみたいのがhtmxになります。htmxはJavaScriptを書かずにサーバーとの通信処理を実現できるライブラリになります。 本記事ではhtmxの使い方を簡単なコードを交えつつ紹介します。 htmxとは htmxは前述の通り、JavaScriptを書かずにネットワーク通信や高度なUXを実現できるライブラリになります。 htmxは、HTMLタグの属性を使用してHTML内で直接AJAX、CSSトランジション、WebSockets、およびサーバー送信イベントにアクセスできるようにします。 htmxを使うことで、面倒な（かつ毎回同
The AHA Stack の Astro + htmx の example を試してみた - Mitsuyuki.Shiiba
The AHA Stack というものを見かけて「なんだろこれ？」と思ったので、ちょこっと触ってみた。 ahastack.dev Astro + htmx + Alpine.js のスタックのことらしい。アハ！（これが言いたかっただけ） この記事の目的を無事に（？）達成したので、あとはおまけ。Astro + htmx の example で遊んでみることにする。 Astro? Astro 知らなかった。へー。コンテンツ駆動のサーバーファーストな MPA のフレームワークか。面白いな。 docs.astro.build とりあえず空のプロジェクトを TypeScript で作ってみた。 ❯ pnpm create astro@latest astro Launch sequence initiated. dir Where should we create your new project?
A Chinese translation of this article is also available. Hotwire and HTMX are two powerful libraries that both have the same goal: simplify building modern web applications. Both embrace the HTML+CSS basis of the web and enhance it to enable slick UIs with little or no javascript needed. While both projects share many fundamental values and even goals, they take different approaches to fulfilling
Hwy is a simple, lightweight, and flexible web framework, built on Hono and HTMX. Hwy is a lot like NextJS or Remix, but it uses HTMX instead of React on the frontend. Hwy lets you write React-style JSX in nested, file-based routes, with Remix-style actions and parallel loaders. Page components are async, so you can even fetch data in JSX if you want to (just be careful with waterfalls). The backe
モダンなUIをJavaScriptを書かずに実現する「htmx」とは？特長やチュートリアルを解説 | MESCIUS.devlog - メシウス株式会社
普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。 今回はJavaScriptのコードを書かずにSPAのようなモダンなUIを構築できるライブラリ「htmx」をご紹介します。 はじめに 最近のWebアプリケーションのUIには、ユーザ体験を向上させるインタラクティブな操作が多く実装されています。その実装にはクライアントサイドで動作するJavaScriptが用いられていますが、より簡単に実現するためにフレームワークやUIライブラリが活用されています。このような仕組みは、UIが複雑化する中で必要不可欠な存在です。 今回ご紹介するhtmxは、JavaScriptのコードを書かなくても、インタラクティブな処理をHTML要素の中に簡単に組み込めるJavaScriptライブラリです。本記事ではhtmxの特長や使い方を解説していきます。 ht
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
htmxとは何なのか？ その背景にある思想について - Qiita
Hono + htmx + Cloudflareは新しいスタック
俺の管理画面 2023年冬 - KAYAC Engineers' Blog
HTMLを拡張し、JSなしで動的UIを作る「htmx」 | gihyo.jp
htmx is not a typo
htmz - a low power tool for html
HTMXの正体が分からないので、オレオレHTMXを作ってみた - Qiita
Databricks Apps (FastAPI + htmx) で簡単社内アプリ作成 - Qiita
HTMX vs React: A Complete Comparison - Semaphore
ハイパーメディアシステム | 技術評論社
Chris James - HTMX is the Future
irgo - Native Apps with Go + Datastar
Hono + htmx + Cloudflare is a new stack - Yusuke Wada
情報発信に便利で軽量なActivityPubサーバー「Takahē」［後編］ ～基本的なアーキテクチャと特徴的なコンポーネントの紹介と、サーバーの構築方法 | gihyo.jp
</> htmx ~ A Real World React -> htmx Port
HTML Drivenなフロントエンド開発について考える
</> htmx ~ htmx 2.0.0-alpha1 has been released!
今更htmxに触れてみた - Qiita
</> htmx ~ htmx 2.0.0 has been released!
Please Just Fucking Try HTMX
【HTMX入門】話題になったHTMXでチャットアプリ作ったよ
How Functional Programming Shaped (and Twisted) Frontend Development
htmx：JavaScriptなしでサーバーとの通信を実現する
Hotwire and HTMX - Same Principles, Different Approaches
Hwy Framework
ja.wikipedia.org
ryona.hatenadiary.jp
baribari-junny.hatenablog.com
qiita.com/plustick
blog.livedoor.jp/yakiusoku
pandora11.com