今回はhtmxやASGIといった技術スタックを使ったPythonのWebアプリケーションフレームワーク「FastHTML」をご紹介します。
目次
はじめに
Webアプリケーション開発に掛かる負担を少しでも減らすために、これまで様々なWebフレームワークが生み出されてきました。開発に便利な機能を備える反面、複雑な構成や開発上の制約、学習コストの高さなどの問題を抱えていましたが、開発者の知見や経験をもとに段々とその仕組みも洗練されてきました。
今回ご紹介するFastHTMLは、Pythonの簡単なコードだけでWebアプリケーションを素早く作り上げることができるシンプルなWebフレームワークです。本記事では、他のWebフレームワークにはないFastHTMLの特長やその使い方を解説していきます。
FastHTMLとは
FastHTMLは、Python環境で動作するWebアプリケーション作成のためのフレームワークです。
似たようなPythonのフレームワークで「FastAPI」がありますが、FastHTMLはFastAPIからインスピレーションを得て開発されたフレームワークで、FastAPIのユーザーにも使いやすいように作られています。
FastAPI is one of the inspirations for FastHTML. We are fans of its developer experience and tried to make FastHTML extremely familiar for FastAPI users.
FastHTML – Modern web applications in pure Python
フロントエンドのUI構築には「htmx」を使用できるので、JavaScriptのコードを書かなくても、インタラクティブな処理をHTML要素の中に簡単に組み込めます。また、必要に応じてJavaScriptライブラリを組み込んで機能を強化することもできます。htmxについては以下の記事もご覧ください。
WebページのHTML／CSS／JavaScriptをPythonのAPIを通じて出力できるため、Pythonに慣れ親しんだ開発者は簡単にWebサイトを作成できます。特に、細かいデザインを必要としない管理画面や社内アプリ、プロトタイプなどのWebアプリを素早く作るのに適しています。
また、FastHTMLはコードやファイル構成がシンプルでわかりやすいのが特長です。動的で複雑なUIでもコンポーネントごとに簡潔なコードで記述でき、プロジェクト内には余計なファイルを必要としません。
例えばPythonで下記のコードを記述することで、特定のURLへのアクセスに対してHTMLを出力するWebアプリケーションを実行できます。
from fasthtml.common import *
app,rt = fast_app()
@rt('/')
def get(): return Div(P('Hello World!'), hx_get="/change")
serve()実行してブラウザからアクセスすると、下記のようなbody要素を持つHTMLが表示されます。
<body>
<div hx-get="/change">
<p>Hello World!</p>
</div>
</body>このHTMLでは、div要素をクリックすると、ページ遷移することなくbody要素の内容が/changeのコンテンツに置き換えられます。
このように、FastHTMLでは簡単なPythonコードだけで、URLルーティングを持つWebサーバー機能を実行でき、JavaScriptの記述を必要としない動的処理を持つWebアプリケーションを作成できます。
FastHTMLの特長
フルスタックのWebフレームワーク
FastHTMLは、ルーティングやセッション、データベース連携などWebアプリケーション開発に必要な機能が揃ったフルスタックのWebフレームワークです。
それらの機能を実現するために、htmxやASGIなどの技術スタックが使われています。htmxは、JavaScriptによる動的な処理を含むHTMLを、簡素化されたよりスマートな記述により出力する仕組みです。このhtmxを含め、HTMLやCSSで構成されるコンポーネントをPythonのAPIを通じて定義できるため簡単なUIであればPythonコードだけでWebアプリケーションを完結できます。また、ASGIはPythonからHTTPのリクエストとレスポンスを制御する仕組みで、Webサーバー機能に利用されています。
拡張ライブラリで素早く開発
FastHTMLは動作が軽量で、素早くWebアプリケーションを配置できるところが特徴的です。Webアプリケーションの開発に必要な最低限の機能は備えていますが、必要に応じてBootstrapやDaisyUIなどの拡張機能をライブラリを通じて導入できます。
また、RailwayやHuggingFaceなどのホスティングサービスであれば簡単なコマンドだけでデプロイできるため、開発からリリースまでの期間を短縮可能です。特に運用環境に制約のないプロトタイプや社内アプリなど低コストで素早くデプロイしたい用途に適しています。
Python開発者は習得しやすい
FastHTMLはPython環境で動作するため、既存のPythonライブラリを組み合わせたWebアプリケーション開発に便利です。Pythonでは特に、機械学習やデータ分析、画像処理、グラフ作図など機能の実装に便利なライブラリが多く存在しており、これらをFastHTMLと共にWebアプリケーションに組み込むのに役立ちます。
また、FastHTMLには組み込みのコンポーネントが備わっており、HTMLやCSSを記述することなくAPIレベルでの配置が可能です。Web開発に慣れていなくても、Pythonの扱いに慣れた開発者であれば簡単に作成できるところは大きなメリットです。
使ってみよう！FastHTMLクイックスタート
FastHTMLの使い方を知るために、実際にWebアプリケーションを作成して動かしてみましょう。
なお、FastHTMLの実行にはPythonが必要なため、公式サイトからダウンロードしてインストールしておきましょう。
ダウンロードのリンクからインストーラーがダウンロードできますので、実行してインストールしましょう。
Pythonの実行環境が整ったら、FastHTMLをpip経由でインストールしましょう。
pip install python-fasthtml続けて、Webアプリケーション用のディレクトリを作成します。
mkdir fasthtml-tutorial
cd fasthtml-tutorial作成したディレクトリに「main.py」のファイルを作り、下記のコードを記述しましょう。今回は公式のサンプルからチャートを表示するアプリを実行してみます。
import json
from fasthtml.common import *
app, rt = fast_app(hdrs=(Script(src="https://cdn.plot.ly/plotly-2.32.0.min.js"),))
data = json.dumps({
"data": [{"x": [1, 2, 3, 4],"type": "scatter"},
{"x": [1, 2, 3, 4],"y": [16, 5, 11, 9],"type": "scatter"}],
"title": "Plotly chart in FastHTML ",
"description": "This is a demo dashboard",
"type": "scatter"
})
@rt("/")
def get():
return Titled("Chart Demo", Div(id="myDiv"),
Script(f"var data = {data}; Plotly.newPlot('myDiv', data);"))
serve()最後に、下記のコマンドを実行してみましょう。Webサーバーと共にアプリケーションが起動します。
python main.py
ブラウザで「http://localhost:5001/」にアクセスすると、折れ線グラフが描かれたページが表示されます。
さいごに
本記事では、FastHTMLの特長と簡単なアプリケーションの作り方を解説しました。
FastHTMLは、PythonのAPIを通じてインタラクティブなWebアプリケーションを素早く開発できるフルスタックのWebフレームワークです。また、既製のUIコンポーネントやCSSフレームワーク、JavaScriptライブラリを活用することでより簡単に作成可能です。
メシウスでは業務アプリ開発に最適なJavaScriptライブラリを提供しています。
無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。