← 2026-09-07 の一覧へ戻るホーム
Show HN：Mador（80行のProxy State Tuple で、あらゆる DOM をリアクティブにします）

2026/09/07 5:45

Show HN：Mador（80行のProxy State Tuple で、あらゆる DOM をリアクティブにします）

RSS: https://news.ycombinator.com/rss

元のHacker News記事へ ↗
要約▶

Japanese Translation:

改善済み。 元のサマリーは正確ではあったが、開発者がライブラリの安全性と効率性を評価する上で価値のある具体的な行動詳細（

write
を通じたバッチ処理および自動的なクリーンアップ）を見落としており、また重要なポイントで言及されていた MIT ライセンスについても欠けていた。

以下に、これらの欠落している要素を取り入れた改善版を示す：

改善されたサマリー

Mador.js は、重いフレームワークを採用することなく、複雑なビルド手順も必要とせずにリアクティビティを必要とする開発者向けの軽量な代替手段を提供する。従来のコンポーネントや仮想 DOM に依存するシステムとは異なり、このネイティブ ES モジュールランタイムは、独自の 3 つパートのバインディングパターン（要素の選択、更新関数の定義、ステート依存関係の指定）を用いて、状態を既存の HTML エレメントに直接バインドする。最小限のフットプリント（約 855 バイト）により、依存関係を知的に追跡して変更があった際のみ特定のプロパティを実行し直すことで、高速なパフォーマンスを実現する。状態の更新は 

write
メソッドを通じられ、1 つの操作内で複数の変更をバッチ化する。特に重要なのは、Mador が要素が存在しなくなったときにランナーを自動的に削除することで、DOM のライフタイムを管理し、手動でのクリーンアップの必要をなくしている点である。このアプローチにより、npm または CDN を通じて直ちにレガシーコードベースに統合でき、下のレイヤーの DOM 構造を変更することなく、コンポーネントのライフサイクルも管理せずに済む。MIT ライセンスの下でリリースされたこの技術は、ステート管理を必要とするがフルアプリケーションフレームワークのアーキテクチャ的なオーバーヘッドを拒否するインタラクティブなページ機能を作成する際、特に価値があり、クイックプロトタイピングおよび定義された HTML 構造を持つプロジェクトへの動的な振る舞いのシームレスな追加を可能にする。

本文

mador.js: 軽量 DOM リアクティブランタイム

DOM のリアクティビティを実現する専用ライブラリです。フルスタックのフレームワークは不要で、既存の DOM と連携してシンプルなリアクティブな UI を構築します。

特徴と概要

  • 極度の軽量さ: フルスタックフレームワークではなく、「それのみ」を提供します。
  • 既存 DOM の利用: コンポーネントや仮想 DOM、テンプレートは不要です。ユーザーが既に持っている DOM と連携します。
  • ES モジュール対応: npm 経由または CDN から直接使用可能です。

インストールと導入

Mador はネイティブ ES モジュールであり、ビルド手順を踏む必要もありません。

// CDN からの直接利用
import mador from "https://cdn.jsdelivr.net/npm/@marsbos/mador@latest/dist/mador.js";

// または npm パッケージとして
import mador from "mador";

基本的な使い方

mador()
はステートオブジェクトを返します。そこから 
read
と 
write
を使い分けます。

ステートの定義と操作

const [read, write] = mador({
  count: 1, // 初期状態
});

// DOM 更新（変更は自動バッチ処理）
write((state) => {
  state.count++;
});

リアクティブなバインド方法

要素とステートを結び付ける 

read()
は、以下の 3 つの引数 を受け取ります。

  1. selector: DOM 要素を選択する CSS セレクタ。
  2. update: 更新処理関数。
    (el, value)
    を受け取り、DOM を操作します。
  3. readState: ステート取得関数。依存するプロパティの参照 
    (state) => state.xxx
    を返します。
// 例：カウント表示（count * 2）
read(
  ".counter",
  (el, count) => {
    el.textContent = `Count: ${count}`;
  },
  (state) => state.count,
);

依存関係の追跡

  • Mador はバインドされたプロパティを自動的に追跡します。
  • 依存するステートが変更された場合のみ、該当するバインドが実行され直されます（不要な更新は行われません）。
  • 同じロジックを持つ別の要素へも同様にバインド可能です：
// count の 3 倍を表示する別の要素
read(
  ".another-counter",
  (el, count) => {
    el.textContent = count * 3;
  },
  (state) => state.count, // 同じステート参照を使用
);

DOM のライフサイクル管理

  • 自動クリーンアップ: バインドされている要素が DOM から削除された際、Mador は自動的に関連するリアクティブなランナーも削除します。
  • 手動不要: コンポーネントのライフサイクルを自分で管理する必要はありません。

利点：なぜ mador.js か？

ページ全体に重たいフレームワークを導入したい場合に適しています。

  • HTML と JavaScript が既に存在する場合に、ほんの少しのリアクティビティを追加するだけで済みません。
  • グローバル変数の汚染や複雑なビルド手順を避けられます。

サイズ情報

意図的に軽量に設計されています（コンパイル済み・minified）。

  • ランタイムサイズ: 約 855 バイト

同じ日のほかのニュース

一覧に戻る →

2026/09/06 20:56

インテリジェント・フライが開く（2025）

## Japanese Translation: 主要な警告は、ユーザーが LinkedIn の投稿作成に大規模言語モデル (LLM) に依存することをやめるべきであるという点にあります。この慣行は本質的に本物性を損なうためです。AI は編集やブレインストーミングの手助けにはなりますが、著者の真の声とは複製できません。その代わり、AI が生成したコンテンツは、過度な絵文字、短すぎる段落、およびダッシュの過剰使用といった不快なスタイルの特徴を示すことがよくあります。これらの明確なパターンにより、読者は投稿が本物の考えを反映したものではなく作りものであることを簡単に検出し、その結果、オーディエンスとの間に乖離が生じ、信頼を失い、完全に関与しなくなります。この批判は、LinkedIn が組み込みの「再書き換え」機能を通じて AI の使用を積極的に推進しているにもかかわらず発生しています。著者が引き続き AI の利便性をオリジナルの内容よりも優先し続ける場合、読者は不信感の高まりからコンテンツをスルーしたり見送ったりする可能性が高まります。したがって、ユーザーは意図したオーディエンスを失い、個人ブランドを損なうリスクに直面し、企業側がこの行動を促進する場合は、業界内の関与低下と信頼喪失を招く可能性があります。

2026/09/06 16:21

Isar Aerospace、2 度目の飛行で軌道到達とペイロード展開に成功

## Japanese Translation: Isar Aerospace は、欧州初の商業エンティティとして衛星を軌道に成功投入し、新たな商業ルートを通じて主権空間アクセスを提供する上で画期的な瞬間を刻みました。この実績は、2026年9月5日にノルウェー・アンドョアで離陸した「Onward and Upward」というミッション（同プログラム第2飛行）において確認されました。このミッションはすべての必要な技術的マイルストーンを実行しました：MaxQ通過、MECO完了およびステージ分離、第2段点火、100kmのカルマン線 crossing、ペイロードフェアリングの抛弃、円形化燃焼、ならびに教育用およびスタートアップ用ペイロードとの成功した分離を実施しました。これらのペイロードは、ESA Boost! の資金提供を受けてドイツ宇宙機関（DLR）の Microlauncher Competition で選定されました。2018年にミュンヘンの近くで設立された Isar は垂直統合を維持しており、小型および中型衛星に対する衛星作成、テスト、打上げサービスのほぼすべての側面を自社工場で行っています。この加速アプローチにより、通常は数十年にわたる開発期間をわずか数年に圧縮しました。展望としては、同社は地球観測や通信において重要な中傾角から高傾角軌道をサポートするためにカナダ・ノヴァスコシア州で新しい打上げ複合施設を建設し、「Spectrum」というロケットファミリー車両を年間最大40発の打ち上げに対応する専用施設で製造することで足跡を拡大しています。これらの進歩は、信頼性の高い欧州打上げサービスを求める商業顧客や機関に対して真の代替手段を提供します。

2026/09/07 5:32

Anubis に WebAssembly を実装するまでに 1 年かかりました

## Japanese Translation: サイト管理者は最近、AI 企業による激しいデータスクレイピング対策として、サーバー保護のための仮のセキュリティ層として Anubis を導入しました。Nick Szabo の元々のコンセプトに基づき、このツールは現代のブラウザで特定の JavaScript 機能を実行できる場合に要求される小さな計算タスクを行う Proof-of-Work メカニズムを利用しています。正常なトラフィックを乱さずに自動化されたボットをフィルタリングすることが目的ですが、現状ではより高度な識別手法——例えばフォントレンダリングを通じたヘッドレスブラウザの行動分析など——が完全に統合されるまでの間、一時的なダウンタイムを引き起こす見切り株としての役割を果たしています。システムは現代の JavaScript 機能を持たないリクエストや、JShelter などのプライバシープラグインによってブロックされたリクエストを特定するため、影響を受けるユーザーはサイトへの円滑なアクセスのためにこれらの拡張機能を無効化する必要があります。このアプローチは、要件を満たせないスクレイパーの運営コストを引き上げることを目指しており、フィンガープリンティング戦略が完了するまでの間に見切り株として機能します。

Show HN：Mador（80行のProxy State Tuple で、あらゆる DOM をリアクティブにします） | そっか～ニュース