世界を動かす技術を、日本語で。

Datastar: インタラクティブなウェブアプリを構築するための軽量ハイパーメディアフレームワーク

2025年10月10日原文(data-star.dev)

概要

Datastar は、シンプルかつ高性能な リアクティブWebアプリ 開発のための軽量フレームワーク。 バックエンド言語 を自由に選択でき、 SSEHTML を活用したリアルタイム通信を実現。 フロントエンドの状態管理 をバックエンド主導に移行し、複雑さを大幅に削減。 JavaScriptやSPA の複雑さを回避しつつ、 リアルタイムUI を簡単に構築可能。 非営利団体とコミュニティ が支える、 シンプル・高速・軽量 なフレームワーク。

Datastar: ハイパーメディア・リアクティブWebアプリ開発フレームワーク

  • Datastar は、 軽量(10.75 KiB) で、 シンプルなWebサイト から リアルタイム協調Webアプリ まで対応
  • サーバーサイドレンダリング のシンプルさと、 フロントエンドフレームワーク の強力さを両立
  • バックエンド言語 は自由選択(公式SDKあり)
  • text/htmltext/event-stream(SSE) 形式に対応し、HTMLレスポンスやリアルタイムイベント配信が可能
  • 無駄なJavaScript を使わず、 フロントエンド開発の負担軽減 を実現

バックエンド主導のフロントエンド構築

  • 状態管理 をフロントエンドからバックエンドへ移行、 ロジックの複雑化 を防止
  • *data-属性 を利用し、フロントエンドに リアクティビティ を追加
    • 例:
      • <button data-on-click="@get('/endpoint')">Open the pod bay doors, HAL.</button>
      • <div id="hal">Waiting for an order...</div>
  • バックエンドからDOMや状態を直接操作
    • 例:
      • sse.PatchElements(<div id="hal">I’m sorry, Dave. I’m afraid I can’t do that.</div>)
      • time.Sleep(1 * time.Second)
      • sse.PatchElements(<div id="hal">Waiting for an order...</div>)

Datastarのメリット

  • JS/TSエコシステム の煩雑さから解放
  • SPAの複雑さ回避、より少ないコードで リアルタイムUI 実現
  • 仮想DOM・hooks・JavaScript不要マルチプレイヤー・リアルタイム 機能が標準搭載
  • どんなバックエンド言語 でも利用可能
  • ビジネスロジック開発 に集中できる環境

コミュニティとサポート

  • 非営利団体 による運営、 VC資本なし
  • コミュニティ主導 の開発
  • 手作業によるコードシンプル・高速・軽量 を徹底

Datastar導入のポイント

  • サーバーサイド中心 の設計思想
  • 低コストでリアルタイムWebアプリ 開発
  • 複雑なSPAやJSフレームワーク からの脱却
  • HTML・SSE ベースの 直感的な開発体験
  • 新しいフロントエンド開発のアプローチ として注目

Hackerたちの意見

もしかしたら、今の時点でReactエコシステムにどっぷり浸かりすぎてるせいかもしれないけど、ちょっと複雑なタスクをやろうとすると、これがかなり考えるのが難しくなりそうだね。それに、もし勘違いしてなければ、これはバックエンドがHTMLを返すことにかなり依存してるみたいで、バックエンドをフロントエンドとして使うってことなんだけど、過去の経験から言って、そんなのには絶対手を出したくない。特に、インターネット接続がめちゃくちゃ悪いユーザー(まだDSLや古い衛星通信、2Gを使ってる人もいる)を考えると、バックエンドに対してもっとリクエストを送って大きなHTMLの塊を返すのは、少ないリクエストでJSONを返すのに比べて、ユーザー体験がかなり悪化すると思う。

2G/3GでReactアプリを使った経験から言うと… HTMLの方が断然いいね。通常、HTMLだと1〜2秒でコンテンツが表示されるけど、Reactアプリは全然読み込まれないこともあるから。なんで読み込まれないの?それは、エンジニアたちがバイト毎秒で考えられないようなタイムアウトを自分たちで作っちゃうから。ソケットにはすでに1分のタイムアウトがあって、まだ受信してるかどうかは分かるけど、アプリケーションには進行状況の感覚がないんだ。もう再発明しないでほしい。

「これはバックエンドがHTMLを返すことにかなり依存している」→ これは56kbpsモデムの時代にウェブが機能していた方法だね(さらに、レイアウトのために10段階の""があったりして)。

本当にオフラインなら、もちろんこれが機能するわけがないよね。でも、ほとんどのサイトは永続的な状態が必要ないから、ページをキャッシュするのは全然可能だよ。ボタンを切り替えたり、入力ボックスと別のキャプションをリンクさせたりするような一時的なものだけだからね。それに、データスターのJS SDKをサービスワーカーから実行すれば、必要な状態をブラウザストレージに同期させておけば、バックエンドもそこに置けるよ。あと、遅い接続の場合、圧縮はすごく強力だし、特に冗長な情報が送られるSSEストリームでは効果的だよ。別のコメントにはすごいデモのリンクがあって、圧縮率は90%以上だって。遅いインターネットは、遅いデバイスとも関係があって、ReactやCSS-in-JSの膨大な負荷を処理できないことが多いんだ。Datastarは機能をほとんど犠牲にすることなく、すべてを大幅に簡素化してくれるよ。

「フロントエンド」って広い分野だよね。自分のブログ用のサイトを作る人もいれば(Wordpressで十分な場合も)、主に静的コンテンツのショップを作る人もいるし、FigmaやDiscordみたいな本格的なソフトウェアを作る人もいる。真の達人にとっては、DOMは監獄で、GPU加速計算と組み合わせないとダメなんだ。もちろん、htmxやその仲間たちはブログやドキュメント、ショップにはいいけど、「ソフトウェア」レベルのウェブサイトは作れないよね。

ホームページには書いてないけど、Datastarは以下の機能に対して料金を取ってるよ:data-animate - 要素の属性を時間をかけてアニメーションさせる。data-custom-validity - 要素にカスタムの有効性を追加。data-on-raf - アニメーションフレームごとに式を実行。data-on-resize - 要素のリサイズ時に式を実行。data-persist - シグナルをローカルストレージに保存。data-query-string - クエリ文字列のパラメータをシグナルの値と同期。data-replace-url - ブラウザのURLを置き換える。data-scroll-into-view - 要素を表示領域にスクロール。data-view-transition - view-transition-nameスタイルを設定。価格は個人開発者が299ドル、チームが999ドル以上だよ。 https://data-star.dev/reference/datastar_pro

これが彼らの仕事を資金調達する良い方法かどうかはわからないけど、オープンソースを開発者にとって持続可能にするモデルを探るのは良いことだと思うよね?

これを含めたかったのは、Datastarの開発とメンテナンスが持続可能であるためだよ。そして、彼らは登録された501(c)(3)の非営利団体なんだ。 https://data-star.dev/star_federation#nonprofit-organization

なんか変なコメントだね。わざわざこんなことを持ち出す理由って、相手を悪く見せたいだけじゃないの?サイトにはいろんなところにちゃんと書いてあるし。しかも、彼らはほとんどの人やサイトにはこれらの機能が必要ないって言って、プロライセンスの購入を積極的に勧めてないんだよね。もし必要なら、機能のためには小さな代金だし、彼らの非営利団体のコストをカバーするためのちょっとした収入にもなるし。無料で提供してきた努力に対して、誰かがオプションで何かを請求することが悪いことなんて、あり得ないよね…それに、すごく便利な「インスペクター」が付いてて、すべての信号やSSEイベントが見れるし、もうすぐ超効率的なウェブコンポーネントフレームワーク(Rocket)とCSSフレームワーク(Stellar)も登場するよ。私は主に彼らをサポートするためにプロライセンスを買ったけど、インスペクターは素晴らしいし、RocketとStellarを試すのが楽しみだよ。

うん、なんで誰かがこれをターボ+スティミュラスより考えるのか全然わからないよ。

データスターを試してみたけど、すごく良かった。でも、こういう動きを見てすぐに気が引けた。これは正しいやり方じゃないと思う。プロサポートの方が良かったよ。それに、ライセンスがデータスタープロをオープンソースプロジェクトで使うことを禁止してるのも変な動きだね。

コメントを更新して、これは一回限りの生涯コストで、サブスクリプションじゃないってことをみんなに知らせた方がいいよ。Tailwind UIと同じくらいの価格で、みんなそれにお金を払うのは全然気にしてないしね。

Hacker Newsで議論の続きを見る