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

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

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

使う前に分かること

「ボタンを押したら数字が変わる」くらいのことをやりたいだけなのに、React や Vue を入れるとビルドの仕組みまで付いてきて大げさになる。そういう場面、ありますよね。

mador は、そこを「script タグ1本、855 バイト」で済ませようとしているライブラリです。今回は HTML 1枚に「+1 を押すと数字と、その2倍が一緒に変わる」表示を付けるところまで試してみました。

入れる

まず npm から入れて、本体の1ファイルを HTML と同じ場所に置きます。

npm install @marsbos/mador
cp node_modules/@marsbos/mador/dist/mador.js ./mador.js

これで手元に mador.js ができます。サイズを見てみたら、本当に 855 バイトでした。

ひとつ注意点があって、GitHub のリポジトリを clone しても、この dist/mador.js は入っていません（ls dist すると「No such file」と言われます）。ビルド済みのファイルが同梱されているのは npm のパッケージの方なので、npm から取るのが早いです。パッケージ名がリポジトリ名の mador ではなく @marsbos/mador なのも、ちょっと間違えやすいところでした。

書く

次に index.html を1枚書きます。やることは3つだけです。

1. mador({ count: 0 }) に最初の状態を渡すと、[read, write] という2つの関数が返ってきます
2. read(セレクタ, 書き換え方, 何を見るか) で、「どの要素を・どう書き換え・状態のどこを見て」を結びます
3. write(state => { ... }) で状態を変えます。すると、その値を見ている read が全部動きます

<!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>

.counter と .doubled は別々に登録していますが、どちらも state.count を見ています。ここがこのライブラリの中心なので、あとで動かして確かめます。

動かす

ES モジュールとして読み込むので、ファイルをダブルクリックして開くのではなく、HTTP で配信して開きます。Python が入っていれば1行で済みます。

python3 -m http.server 8123

ブラウザで http://localhost:8123/index.html を開くと、まだ何も押していないのに Count: 0 / Doubled: 0 が出ています。read は登録した時点で1回走って、初期表示まで済ませてくれるようです。

+1 を2回押した結果がこちらです。

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

write で count を1つ増やしただけで、別々に登録した2つの要素が揃って変わりました。ビルド無しの HTML 1枚に、リアクティブな表示が付きました。今回やりたかったのはここまでです。

まとめ

「ファイル1個＋script タグ1本」は売り文句どおりで、覚えることも read と write の2つだけなので、書き始めてから動くまでが短いです。read の3引数に「どの要素を・どう書き換え・何を見て」が1か所に揃うのも、状態と画面の対応を追いやすくて好きなところでした。引っかかったのは、GitHub を clone しても dist/ が無いことと、npm 上の名前がリポジトリ名と違うことの2点くらいです。ビルド環境を持ち込みたくない小さなページなら、これで十分だと思います。

細かい点をひとつ。package.json に license 欄が無いので、npm のページではライセンスが空に見えます。リポジトリの LICENSE ファイルを開くと MIT でした。

確認した環境

2026-09-07、Node.js 22 で確認しました。ブラウザの代わりに happy-dom 20.14.0（Node 上で HTML と DOM を再現するライブラリ）で index.html を開いてボタンを押しているので、実際のブラウザでの見え方は確かめていません。手順自体は素の HTML なので、ブラウザでもそのまま動く形にしてあります。