# Haori.js（日本語ドキュメント）
Haori.js は、HTML 属性を中心にして動的な UI を実現する軽量なライブラリです。JavaScript をほとんど書かずに、データバインディング、条件分岐、繰り返し処理、フォームの双方向バインディング、サーバー通信などを HTML 属性で宣言できます。
バージョン: 0.54.0
---
**目次**
- 概要
- インストール
- クイックスタート
- よく使う属性（概要）
- 公開・ビルド手順
- ライセンス・貢献
- 詳細ドキュメント
---
## 概要
- 設計思想: HTML-First（HTML 属性のみで UI を宣言）
- 内部状態を正とし、表示状態は DOM へ非同期で追随する
- 主な特徴:
- データバインディング（`data-bind`）
- 条件表示（`data-if`、JavaScript の falsy 準拠: `false`・`null`・`undefined`・`NaN`・`0`・`''` は非表示）
- 繰り返し表示（`data-each`）
- フォーム双方向バインディング（`name` 属性による自動バインド）
- `value="true"` を付けたチェックボックスの boolean 対応（チェック時 `true`、未チェック時 `false`）
- `type="number"` 入力の数値型対応（バインド・送信時に数値。空・数値化できない値は `null`）
- イベント駆動アクション（`data-click-*`・`data-change-*`・`data-load-*`・`data-intersect-*`）
- 定期取得（`data-poll-*`。取得間隔・打ち切り時間・停止条件を指定）
- サーバー通信（`data-fetch`）
- HTML インポート（`data-import`）
- ライフサイクルイベント（`haori:eachupdate`・`haori:bindcomplete`・`haori:show` / `haori:hide` など）
- ゼロ依存（ブラウザネイティブのみ）
必要に応じて `data-runtime` と `Env.runtime` を使い、組込利用とデモ表示で挙動を切り替えられます。
## インストール
npm:
```bash
npm install haori
```
CDN:
```html
```
この CDN URL は npm に公開済みの最新バージョンを参照します。
ES Module:
```js
import Haori from 'haori';
```
---
## クイックスタート
HTML だけで簡単に使えます。以下は最小の例です。
```html
Haori サンプル
```
JavaScript からマウントする例:
```js
import Haori from 'haori';
Haori.mount(document.body, {items: [{name: 'りんご'}, {name: 'みかん'}]});
```
---
## よく使う属性（概要）
- `data-bind` — 要素にバインディングデータを設定（JSON またはパラメータ形式）。**トップレベルキーの予約名**: グローバルと衝突するデータ／ナビゲーション／ストレージ系の名前（`location`・`history`・`document`・`navigator`・`localStorage`・`sessionStorage`）は**トップレベルキーとして利用でき**、式中ではバインド値が同名グローバルを遮蔽します（例 `{"history":[…]}` を `data-each="history"` で利用可）。実行系・プロトタイプ脱出名（`window`・`self`・`globalThis`・`Object`・`Function`・`eval`・`constructor`・`__proto__`・`prototype`・`setTimeout` など）は**使えません**。その場合、該当キーだけが無視され（式中では `undefined`）、残りのキーは通常どおり描画され、無視したキー名が `error` ログに出力されます。ネストしたオブジェクト／配列要素のプロパティ名には制約はありません。
- `{{ ... }}` — テンプレート式（式評価により挿入）
- `data-if` — 条件に応じて要素を表示 / 非表示
- `data-each` — 配列を繰り返し表示（`data-each-key`, `data-each-arg`, `data-each-index` など）
- `data-attr-xxx` — ブラウザが先に解釈する属性を安全に更新（`src`, `value` など）
- `data-value-type` — 入力欄の収集値の型を宣言します（`boolean` / `number` / `string`）。`input` の値は常に文字列のため、真偽値を `type="hidden"` に載せると `"true"` という文字列で送られます。型を宣言すると、収集値・バインドデータ・送信ボディが API の期待する型になります（判定できない値は `null` になるため、未入力を `false` として送りません）。利用者に見せないだけの項目を、真偽値のために「表示しないチェックボックス」で代用する必要がなくなります。`checkbox` / `radio` / `file` と複数選択の `