サービスServices制作実績Works自社ツールToolsブログBlogチームTeam会社概要Company
お問い合わせ
ノードとエッジで構成された抽象的なネットワークグラフィック（Datastar記事のヒーロー画像）
← ブログ一覧
フロントエンド12分

Datastarとは？data-*属性とSSEでUIを動かす約12KBのハイパーメディアフレームワーク｜状態はバックエンドに置く

  • #Datastar
  • #Hypermedia
  • #OSS

社内向けの管理画面に、一覧の絞り込みと保存中のスピナー、それに他の担当者が更新したら自分の画面にも反映される仕組みを足したい。ReactやNext.jsを一式持ち込むほどの規模ではないけれど、素のJavaScriptで書くと状態の置き場所がすぐ散らかる。この中間を埋めようとすると、部分更新はhtmx、細かい表示の出し分けはAlpine.js、という二枚看板に落ち着きがちです。

Datastar（データスター）は、その2つの役割をひとつのスクリプトにまとめたハイパーメディアフレームワークです。公式ガイドは自らの位置づけを、htmxのようなバックエンド側のリアクティビティと、Alpine.jsのようなフロント側のリアクティビティを、npmパッケージも他の依存も要らない軽量なフレームワークとして提供するもの、と説明しています。公式サイトのトップは配布物を「a single 11.82 KiB file」と表現しています（公式サイト: https://data-star.dev ）。

バージョン1.0.0が公開されたのは2026年4月16日で、最新は2026年8月27日のv1.0.3です。1.0のリリースノートは「Datastar 1.0 has finally shipped. We are done.」という一文から始まっており、機能を足し続ける段階から仕様を固める段階に移ったことが読み取れます。

  • この記事でわかること：Datastarがどのあたりに収まるフレームワークで、htmxやAlpine.jsと何が違うのか。
  • シグナルとdata-*属性で組み立てる、フロントエンド側の書き方。
  • バックエンドがSSEでDOMとシグナルを差し替える、サーバー側の仕組み。
  • CSP・XSS・SSE接続まわりの制約と、有償のPro版にかかる費用。

Datastarとは？画面の状態をバックエンドに寄せるハイパーメディアフレームワーク

DatastarはTypeScriptで書かれたオープンソースのフレームワークで、ライセンスはMITです。開発はGitHubの starfederation/datastar で公開されており、リポジトリの公開は2023年8月、2026年8月時点で5,000を超えるスターが付いています（リポジトリ: https://github.com/starfederation/datastar ）。

設計の中心にあるのは、画面の状態をできるだけバックエンドに置くという方針です。ハイパーメディア的な考え方では、次にユーザーが取れる操作を決めるのはバックエンドであり、フロントエンドは送られてきたHTMLをDOMに当てる役割に徹します。公式ガイドはこの方針を The Tao of Datastar としてまとめ、状態の大半をバックエンドに置くこと、既定の設定をそのまま使うこと、DOMを手で書き換えるよりモーフィング（既存の要素を保ったまま差分だけを当てる処理）に任せること、フロント側のシグナルを増やしすぎないことを勧めています。

特徴的なのは、楽観的更新（optimistic update）をはっきり採らない立場を取っている点です。バックエンドの応答を待たずに成功したかのような表示を出すのはユーザーを欺くことだ、というのが公式ガイドの主張で、見かけの速さより正直なローディング表示を優先します。リアルタイム性を掲げながら、体感速度の演出は目的にしていません。

開発は Star Federation という組織のもとで進められています。後述する有償のPro版の売上が、無償のオープンソース部分の開発資金になる構造です。

仕組み①：シグナルとdata-*属性で、書くJavaScriptを減らす

フロントエンド側は、HTMLのdata-*属性だけで組み立てます。中核にあるのがシグナル（signal）と呼ばれるリアクティブな値で、参照するときは $ を頭に付けます。入力欄に data-bind:foo-bar と書くと $fooBar というシグナルが自動で作られ、入力と双方向に同期します。ハイフンはキャメルケースへ変換される決まりです。

作ったシグナルは、別の要素の data-text で表示したり、data-show で表示・非表示を切り替えたり、data-class や data-attr でクラスや属性に反映したりできます。属性の値に書く文字列はDatastar式と呼ばれ、JavaScriptの式をそのまま書けます。$fooBar.toUpperCase() のようなメソッド呼び出しも通ります。

ここまでにJavaScriptのファイルは1本も書いていません。フロントで完結する軽い反応はこの範囲で足り、サーバーと会話が必要になったところで初めて次節のアクションを使う、という切り分けになります。エディタ支援として、VSCode拡張とIntelliJプラグインが属性の補完を提供しています。

なお data-show については、Datastarが属性を処理するまでの一瞬だけ要素が見えてしまうため、初期スタイルに display: none を入れておくよう公式ガイドが注意しています。宣言的に書ける代わりに、こうした初期表示の詰めは自分で意識する必要があります。

やりたいこと書く属性起きること
入力欄と状態を結ぶdata-bind:foo$foo というシグナルが作られ、入力と双方向に同期する
状態を画面に出すdata-text式の評価結果を要素のテキストにする
条件で出し分けるdata-show / data-class:success式の真偽で表示を切り替える、クラスを付け外しする
派生した値を持つdata-computed:repeated他のシグナルから計算される読み取り専用のシグナルを作る
イベントを拾うdata-on:clickクリックなどのイベントでDatastar式を実行する
通信中を示すdata-indicatorリクエストが飛んでいる間だけ true になるシグナルを作る

仕組み②：バックエンドがHTMLとシグナルを送り込んでDOMを書き換える

サーバーとの通信は、アクションと呼ばれる @ 始まりの関数で行います。ボタンに data-on:click を付け、その中で @get('/endpoint') と書けば、クリック時にそのURLへリクエストが飛びます。@post、@put、@patch、@delete も同じ形で使えます。

このとき、アンダースコアで始まるローカルなシグナルを除いた全シグナルが毎回サーバーへ送られます。GETでは datastar というクエリパラメータに、それ以外のメソッドではJSONのボディに載ります。つまりサーバーは、リクエストを受けた時点の画面の状態をひととおり把握したうえでレスポンスを組み立てられます。

返し方はレスポンスのcontent-typeで決まります。text/html を返せば、トップレベルの要素がIDを手がかりに既存のDOMへモーフィングされます。application/json ならシグナルの値がJSON Merge Patch（RFC 7396）として反映されます。text/javascript を返せばブラウザでそのまま実行されます。1回の更新で済む処理なら、SSEを使わずここまでで完結します。

text/event-stream を返した場合は、ひとつの接続の中で好きなだけイベントを送れます。イベント名は datastar-patch-elements と datastar-patch-signals の2種類だけで、前者がDOM、後者がシグナルを更新します。要素の当て方は既定のモーフィングのほか、inner、replace、prepend、append、before、after、remove を mode で選べ、selector で対象を指定したり useViewTransition でView Transitionを挟んだりもできます。接続を維持したまま数秒後に別の内容を送り直す、といった処理が素直に書けるのがSSEを採る理由です。

通信の失敗時の挙動にも既定値が用意されています。ネットワークエラー時のみ再試行し、間隔は1,000ミリ秒から始めて2倍ずつ伸ばし、最大30秒・最大10回で打ち切ります。同じリクエストが重複したときは自動でキャンセルされます。

導入方法：scriptタグ1本と、使っている言語のSDK

導入はCDNのscriptタグから始めるのが最短です。type=module を付けて https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.3/bundles/datastar.js を読み込めば動き始めます。ただし公式ドキュメントは、ファイルを自分でホストする方法を推奨しています。npmやDeno、Bunを使っている場合は、同じURLをimport文で読み込む形になります（手順: https://data-star.dev/guide/getting_started ）。

バックエンド側には、SSEイベントの生成とリクエストからのシグナル読み取りを助けるSDKが用意されています。対応言語はClojure、C#（.NET）、Go、Haskell、Java、Kotlin、PHP、Python、Ruby、Rust、Scala、TypeScript、Unison、Zigです。フレームワーク寄りの統合としては、LaravelのBladeビューやCraft CMSのTwigテンプレートから使えるものもあります（一覧: https://data-star.dev/reference/sdks ）。

ただしSDKの多くは、コアチームではなく個々のコミュニティメンバーが維持しています。公式のSDK一覧には言語ごとのメンテナが明記されているので、採用予定の言語について更新頻度と担当者を確認しておくと安心です。SSEイベントの形式自体は単純なテキストなので、最悪SDKなしでも自前で組み立てられる、という逃げ道は残っています。

既存のサーバーサイドレンダリング構成に後から足せるのも利点です。テンプレートが返すHTMLにdata-*属性を書き足し、必要なエンドポイントだけをSSE対応にすれば、画面単位で少しずつ移せます。

導入前に確認したい制約と費用

まずセキュリティです。Datastarは既定でJavaScriptの Function() コンストラクタを使って式を評価するため、Content Security Policyに unsafe-eval を含める必要があります。これを避けたい場合、v1.0.3で追加されたCSPモードを使います。html要素に data-nonce 属性を付け、その値をCSPの script-src ディレクティブのnonceと一致させる方式で、nonceはフルページのレスポンスごとにサーバー側で暗号学的に安全な乱数から作り直します（解説: https://data-star.dev/reference/security ）。

ただしCSPモードにしても、属性に埋め込まれた未信頼のコンテンツはJavaScriptを実行しうる、と公式ドキュメントは明記しています。ユーザー入力をDatastar式へ直接書き出さず、シグナル経由で渡すのが原則です。シグナルはクライアントから中身が見えるうえ書き換えもできるので、値の検証は必ずバックエンドで行う必要があります。

次に運用面です。GETリクエストによるSSE接続は、ページが背面タブなどで隠れると既定で切断され、再表示時に開き直されます。ダッシュボードのように常時つなげておきたい場合は openWhenHidden を true にできますが、公式ドキュメントはバッテリーやリソースを消費する点に注意を促しています。公式のハウツーは、接続を維持し続けることに頼るより、更新のたびに完全な状態を送り直す設計にして、切断されても次のイベントで正しい状態に戻るようにすることを勧めています。

費用については、フレームワーク本体はMITライセンスで無償です。一方で一部の機能は有償のDatastar Proに分かれています。data-persist（ローカルストレージへの永続化）、data-query-string（クエリ文字列とシグナルの同期）、data-animate、data-match-media、@clipboard などの属性・アクションに加え、シグナルやSSEイベントを追えるDatastar Inspector、必要なプラグインだけを選ぶバンドラーが含まれます。買い切りのライフタイムライセンスで、更新へのアクセスも付きます。

Proのライセンス条件には注意点があります。第三者への再配布・サブライセンスは禁じられており、パブリックリポジトリへ置くことも再配布の一形態として明確に禁止されています。オープンソースプロジェクトに組み込むことも違反です。社内の業務アプリや受託した完成物に組み込む使い方は問題ありませんが、Proに依存した部分を公開リポジトリで管理する運用はできない、と理解しておく必要があります。

ライセンス価格（2026年8月時点）対象
Solo349ドル（通常399ドル）個人開発者・フリーランス、開発者が1人だけの小規模組織
Team1,299ドル（通常1,499ドル）従業員25人以下の組織
Enterprise個別見積もり従業員25人を超える組織。専任サポートや個別のライセンス条件が付く

まとめ：SSRの延長で動くものを作りたいときの選択肢

Datastarは、フロントエンドに状態を持たせる方向へ進んできた流れの逆を行くフレームワークです。画面の状態はバックエンドが持ち、フロントは受け取ったHTMLとシグナルを当てるだけ。フロントで完結する軽い反応だけをdata-*属性で書く、という役割分担になります。htmxとAlpine.jsを併用してきた構成なら、依存が1本に減るぶん考えることも減ります。

採用を判断するうえで効いてくるのは、CSPに unsafe-eval を許すかCSPモードでnonceを回す運用を組めるか、SSE接続を通せるインフラかどうか、そしてProの機能に踏み込むかどうかの3点です。とくに最後の1つは、価格だけでなく公開リポジトリで扱えないというライセンス条件まで含めて確認しておくべきところです。

1.0が出たのは2026年4月、直近のv1.0.3が2026年8月27日と、リリースはまだ活発です。日本語の解説もまだ多くありません。小さな画面ひとつをSSRのまま動かしてみて、手触りを確かめてから広げるのが現実的な進め方です。最新の仕様は下記の一次情報で確認してください。

参考リンク

関連記事

まずは、やりたいことを聞かせてください

「何から手をつければいいか分からない」段階でも大丈夫です。 ご相談・お見積りは無料。碧南近郊なら直接伺います。

お問い合わせ090-1742-3456