プログラミング・Web開発

二分探索を動かして理解する:15個の数字を半分ずつ絞るJavaScript教材

1〜15の数字を半分ずつ絞る二分探索を操作型デモで学習。目標8と15の比較回数、コード、失敗切分けを解説。
プログラミング・Web開発

SHA-256は1文字違うとどう変わる?Web Cryptoでハッシュを見比べるJavaScript実験

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

MutationObserverでカードの変化を見つける:追加・削除・監視停止を体験するJavaScript入門

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

IntersectionObserverでカードの見え方を観察:スクロールと25%・75%の違いを体験

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

ResizeObserverでカード幅を観察する:300pxと520pxで表示を切り替えるJavaScript入門

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

Canvasで跳ねるボールを動かす:重力と反発係数を変えるJavaScript実験

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

Canvasで花火を打ち上げる:クリックと粒子数で動きが変わるJavaScript入門

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

Web Animations APIで荷物カードを動かす:再生・一時停止・速度変更を体験

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

Web Audioで音の波形を動かす:無音で周波数を比べるJavaScript入門

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

Canvasライフゲームで世代交代を観察:3マスが縦横に変わるJavaScript入門

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