papanda925.com

Web Cryptoで2つの文字列のSHA-256を比較。1文字違いで何ビット変わるかを可視化し、暗号化との違いと安全な使い方を学ぶ。

MutationObserverでカードの追加・削除・属性変更を観察。停止と再開、変更前の値の記録、監視対象の絞り方をJavaScriptで学ぶ。

IntersectionObserverでカードが25％・75％見える条件を比較。スクロール、観察停止、閾値変更、失敗切分けを架空データで学ぶ。

ResizeObserverでカードの実測幅を観察し、300pxと520pxの切替、停止・再開、境界値変更、障害切分けを体験。

Canvasで跳ねるボールを操作し、重力・反発係数による動きの違いを観察。静止画コマ送りにも対応。

CanvasとJavaScriptでクリックすると広がる花火を作る。粒子数、停止・再開、動きを減らす設定を体験し、コードの仕組みを学ぶ。

Web Animations APIで荷物カードの再生、一時停止、リセット、速度変更を体験。動きを減らす設定と実務の注意点を学ぶ。

Web Audio APIとCanvasで正弦波を可視化。ミュートのまま220Hzと440Hzを比較し、波形・周波数・自動再生制限を理解する。

Canvasで横3マスが縦3マスへ変わるライフゲームを操作。世代交代、B3/S23、有限盤、状態遷移とテストの考え方を学ぶ。

Canvasの架空色見本をスライダーで明るく・白黒に加工。RGBと透明度、元画像から毎回再計算する理由を、操作と数値で理解します。