では、ビット演算・シフト演算をリアルタイムで見られるアニメ付き教材 を、ブラウザで動く HTML + JavaScript で作ります。
この教材では、数値を入力するとビットがスライドしたり、AND・OR・XOR・NOT・シフト演算の結果がすぐに見られる仕組みです。
See the Pen Bitwise Operation Animation Tutorial by MONO365 -Color your days- (@monoqlo365) on CodePen.
✅ 使い方
- 数値Aと数値Bを入力
- 演算子を選択（AND、OR、XOR、NOT、シフトなど）
- 「計算する」をクリック
- 上から順に A、B、結果 のビット列が色付きで表示
1は緑0は赤
- 下に 10進数での結果 も表示
💡 ポイント
- ビジュアルでビットの動きを確認できるので、ANDやORのルールが直感的に理解できる
- 左シフト・右シフトもビット列が移動するので「掛け算／割り算イメージ」がわかる
- NOT はAのビットが反転する様子を確認できる
では、先ほどの教材をさらに進化させて、ビットが一つずつ動くスライドアニメ版 にします。
これにより、例えば左シフトならビットが左にスライドして0が入る様子、右シフトならビットが右にスライドする様子、AND/OR/XORなら対応ビットが変化して色が変わる様子を、リアルタイムで確認できます。
See the Pen Bitwise Operation Animation Tutorial #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.
特徴
- ビット列が1つずつ変化して結果に近づくアニメーション付き
- AND/OR/XOR は対応ビットが変わる様子が見える
- 左シフト・右シフトはビットが左右にスライドするイメージを再現
- NOT もAのビットが反転して色が変わる
- 10進数結果も表示されるので理解が深まる
次のステップでさらに工夫できること
- Bのビットもアニメで動かして、AとBのAND/OR/XORの変化を1ビットずつ見せる
- ビット数を16bitや32bitに拡張
- スライド速度やステップを調整できるUIを追加
