| name | interactive-explanation |
| description | アルゴリズムや仕組みを、単一 HTML のインタラクティブ/アニメーション付きページで説明する。文章だけでは腑に落ちないときの認知的負債の返済に使う。 |
インタラクティブな説明
ウォークスルーを読んでもまだブラックボックスに感じる仕組みは、アニメーションする
単一 HTML ページにして理解する。
このプロジェクトなら例えば: HID レポートのビット構成、BLE の接続・切断の状態遷移、
マクロのステップ実行とタイミング、タッチ座標からボタンインデックスへの写像、
起動時のストレージのフォールバック。
手順
- まず仕組みを理解する。ソースを読む。
walkthrough があればそこから始める。
notes/explanations/ に自己完結した単一 HTML を置き、段階的にアニメーション
させる。中間状態と分岐(試した候補、比較、巻き戻し)を見せる。
最終結果だけでは腑に落ちない。
- 再生コントロールを付ける: 一時停止、速度調整、停止中のコマ送り。
入力を差し替えられるなら差し替えられるようにする(URL の
#fragment に
持たせるとリンクを共有できる)。
スタイル
- React は使わない。素の HTML と vanilla JS / CSS。ビルド手順なしで
ファイルを開けば動くこと。
- CSS: インデント 2 スペース、
* { box-sizing: border-box; } から始める。
<script type="module">、インデント 2 スペース。
- 見出しは Sentence case。