はじめに

いまのPCでは、ディスクの断片化を意識することはほとんどない。
しかし、Windows95や98の時代には、デフラグは「見ていて楽しい処理」 だった。

カラフルなブロックが左上から順番に走査され、
断片化されたデータが少しずつ整理されていく。
意味もなく、ただ眺めていた記憶がある人も多いと思う。

そこで今回は、
Windows95時代のデフラグ画面を、HTML + CSS + JavaScriptだけで再現 してみた。

作ったもの

ブラウザ上で動作する、疑似デフラグアニメーションだ。

デフラグ画面再現

  • 左上から順に走査
  • 空白（未使用領域）は白
  • 処理済みセクタは濃い青
  • 未処理セクタは薄い青

実際にはすでに存在する断片化していない箇所はスキップしているように見えたが、 ここでは単純に移動させているので、完璧にアルゴリズムまでも再現した訳ではない。

なぜ作ったのか

  • HTML5のCanvasに触れてみたかったから。
  • AIの力も使った。
  • お正月暇だったから。

デモへのリンク

実際に動くデモはこちらから確認できる。

Windows95風 デフラグ再現デモ

※ PCブラウザ推奨・スマホでは動作検証していません。