mador — ビルド不要・855バイトのリアクティブDOMライブラリ動いた

素のHTMLに<script type="module">を1本足すだけで使える855バイトの超小型リアクティブDOMライブラリ。ビルドやフレームワーク無しで、状態が変わった時に指定したDOM要素だけを更新できる。

配布元: https://github.com/marsbos/mador 　／　2026-09-07 時点で確認

この日に実際に動かした結果です。内容の誤りに気づかれた場合はお問い合わせください。確認のうえ訂正します。

使い方

やること：ビルドツールもフレームワークも使わず、素のHTML1枚にクリックで数字が変わるリアクティブな表示を追加する

npm でライブラリを入れ、本体1ファイルを HTML の隣に置く。
```
npm install @marsbos/mador
cp node_modules/@marsbos/mador/dist/mador.js ./mador.js
```
手元に mador.js（855バイト）ができる

index.html を1枚書く。mador() に初期状態を渡すと [read, write] が返り、read(セレクタ, 更新関数, 状態から値を取り出す関数) で結び付け、write で状態を変える。

<!doctype html>
<html lang="ja">
<head><meta charset="UTF-8"><title>mador demo</title></head>
<body>
  <p class="counter"></p>
  <p class="doubled"></p>
  <button id="incrBtn">+1</button>
  <script type="module">
    import mador from "./mador.js";

    const [read, write] = mador({ count: 0 });

    read(
      ".counter",
      (el, count) => {
        el.textContent = `Count: ${count}`;
      },
      (state) => state.count,
    );

    read(
      ".doubled",
      (el, count) => {
        el.textContent = `Doubled: ${count * 2}`;
      },
      (state) => state.count,
    );

    document.querySelector("#incrBtn").addEventListener("click", () => {
      write((state) => {
        state.count++;
      });
    });
  </script>
</body>
</html>

ページを開いた直後から Count: 0 / Doubled: 0 が表示される（importした時点でreadが1回実行され初期描画される）

+1 ボタンを2回クリックする。
1回目のクリックで Count: 1 / Doubled: 2、2回目で Count: 2 / Doubled: 4 に変わる。別々に登録した2つのbindingが、どちらも同じ state.count の変化に反応して揃って更新される

通した結果

initial: Count: 0 / Doubled: 0 after click 1: Count: 1 / Doubled: 2 after click 2: Count: 2 / Doubled: 4

使ってみて良かった点

導入がファイル1個（855バイト）＋scriptタグ1本で完結する。npm・ビルドツール・仮想DOMが一切不要で、既存の素のHTMLに後付けできるという売り文句通りだった
read(セレクタ, 更新関数, 読む状態) という3引数だけで『どの要素を』『どう書き換え』『何を見て』が1箇所に揃うので、状態とDOMの対応関係が追いやすい
state.count のような同じ値に依存するbindingを別々の場所に何個書いても、writeでの変更後にまとめて正しく反映された（今回は2つのDOM要素で確認）

使ってみて不便だった点

GitHubのリポジトリをそのままcloneしてもdist/が含まれておらず、import './dist/mador.js' はエラーになる。npm経由で入れる必要がある
package.jsonにlicenseフィールドが無い（npm view の license は空）。リポジトリのLICENSEファイルはMITだが、この抜けのせいでnpmのパッケージページ上では正しく表示されない

詰まった点と、効いた対処

実行したコマンド

ls dist

出たエラー

ls: cannot access 'dist': No such file or directory

対処

GitHubのリポジトリにはビルド済みのdist/が含まれていない。npm install @marsbos/mador で入れる（npmパッケージにはdist/が同梱されている）

確認した条件

確認日	2026-09-07
試した版	`npm @marsbos/mador@1.0.3（gitHead 97c72411f41f989b7adcb20e1ba71554f644b1d6、GitHub上では5e6b4db）`
実行環境	node:22（このマシンに直接）。ブラウザが無いため happy-dom 20.14.0 の Browser API でHTMLページを開いてDOM更新を確認した。手順自体は素のHTML＋scriptタグで、ブラウザでもそのまま動く形にしてある