JavaScript | 第15章「JavaScript の型付き配列」

JavaScript

2019.01.032025.10.15

TypedArray の内部構造（バイト単位のメモリ）を視覚的に理解できる上級版デモ
このデモでわかること

TypedArray の内部構造（バイト単位のメモリ）を視覚的に理解できる上級版デモ

このデモでは以下のことがわかります👇

🔍 ArrayBuffer が「メモリ領域（バイト配列）」であること
🧩 Int8Array, Uint16Array, Float32Array などが「同じバッファを別の視点で見る」仕組み
💡 各 TypedArray が何バイト単位でデータを読むか（1byte, 2byte, 4byte …）
🎨 各バイトが色分け表示され、どの値をどう読み取っているかがアニメで見える

See the Pen TypedArray Memory Structure Visualization by MONO365 -Color your days- (@monoqlo365) on CodePen.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>TypedArray メモリ構造 可視化デモ</title>
<style>
body {
  font-family: "Segoe UI", sans-serif;
  background: #111;
  color: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
h1 { color: #0ff; }
#buffer {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 4px;
  margin: 20px 0;
}
.byte {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
  border-radius: 6px;
  font-size: 12px;
  transition: 0.3s;
}
.byte.active { background: #0ff; color: #000; }
select, button {
  margin: 10px;
  padding: 8px 12px;
  background: #222;
  color: #0ff;
  border: 1px solid #0ff;
  border-radius: 6px;
}
</style>
</head>
<body>
<h1>🧠 TypedArray メモリ構造 可視化</h1>
<p>同じ ArrayBuffer を異なる TypedArray で見てみよう！</p>

<div>
  <select id="viewType">
    <option value="Int8Array">Int8Array (1バイト単位)</option>
    <option value="Uint16Array">Uint16Array (2バイト単位)</option>
    <option value="Float32Array">Float32Array (4バイト単位)</option>
  </select>
  <button id="nextBtn">次の値をハイライト</button>
</div>

<div id="buffer"></div>

<p id="info"></p>

<script>
const buffer = new ArrayBuffer(16); // 16バイト分のメモリ
const int8 = new Int8Array(buffer);

// メモリにデータを書き込む（例：1, 2, 300, -5）
int8.set([1, 2, 44, 0, 255, 0, 128, 0, 0, 0, 10, 0, 0, 0, 99, 0]);

const bufferDiv = document.getElementById("buffer");
const info = document.getElementById("info");

for (let i = 0; i < int8.length; i++) {
  const cell = document.createElement("div");
  cell.className = "byte";
  cell.textContent = int8[i];
  bufferDiv.appendChild(cell);
}

let index = 0;
document.getElementById("nextBtn").addEventListener("click", () => highlightNext());
document.getElementById("viewType").addEventListener("change", reset);

function reset() {
  index = 0;
  [...bufferDiv.children].forEach(b => b.classList.remove("active"));
  info.textContent = "";
}

function highlightNext() {
  const type = document.getElementById("viewType").value;
  const Typed = window[type];
  const view = new Typed(buffer);
  const step = view.BYTES_PER_ELEMENT;
  const total = view.length;

  // リセット
  [...bufferDiv.children].forEach(b => b.classList.remove("active"));
  if (index >= total) index = 0;

  const start = index * step;
  for (let i = 0; i < step; i++) {
    bufferDiv.children[start + i]?.classList.add("active");
  }

  info.innerHTML = `
    現在のビュー: <b>${type}</b><br>
    インデックス: ${index}<br>
    値: <b>${view[index]}</b><br>
    （${step} バイトを読み込み）
  `;
  index++;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>TypedArray メモリ構造 可視化デモ</title>
<style>
body {
  font-family: "Segoe UI", sans-serif;
  background: #111;
  color: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
h1 { color: #0ff; }
#buffer {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 4px;
  margin: 20px 0;
}
.byte {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
  border-radius: 6px;
  font-size: 12px;
  transition: 0.3s;
}
.byte.active { background: #0ff; color: #000; }
select, button {
  margin: 10px;
  padding: 8px 12px;
  background: #222;
  color: #0ff;
  border: 1px solid #0ff;
  border-radius: 6px;
}
</style>
</head>
<body>
<h1>🧠 TypedArray メモリ構造 可視化</h1>
<p>同じ ArrayBuffer を異なる TypedArray で見てみよう！</p>

<div>
  <select id="viewType">
    <option value="Int8Array">Int8Array (1バイト単位)</option>
    <option value="Uint16Array">Uint16Array (2バイト単位)</option>
    <option value="Float32Array">Float32Array (4バイト単位)</option>
  </select>
  <button id="nextBtn">次の値をハイライト</button>
</div>

<div id="buffer"></div>

<p id="info"></p>

<script>
const buffer = new ArrayBuffer(16); // 16バイト分のメモリ
const int8 = new Int8Array(buffer);

// メモリにデータを書き込む（例：1, 2, 300, -5）
int8.set([1, 2, 44, 0, 255, 0, 128, 0, 0, 0, 10, 0, 0, 0, 99, 0]);

const bufferDiv = document.getElementById("buffer");
const info = document.getElementById("info");

for (let i = 0; i < int8.length; i++) {
  const cell = document.createElement("div");
  cell.className = "byte";
  cell.textContent = int8[i];
  bufferDiv.appendChild(cell);
}

let index = 0;
document.getElementById("nextBtn").addEventListener("click", () => highlightNext());
document.getElementById("viewType").addEventListener("change", reset);

function reset() {
  index = 0;
  [...bufferDiv.children].forEach(b => b.classList.remove("active"));
  info.textContent = "";
}

function highlightNext() {
  const type = document.getElementById("viewType").value;
  const Typed = window[type];
  const view = new Typed(buffer);
  const step = view.BYTES_PER_ELEMENT;
  const total = view.length;

  // リセット
  [...bufferDiv.children].forEach(b => b.classList.remove("active"));
  if (index >= total) index = 0;

  const start = index * step;
  for (let i = 0; i < step; i++) {
    bufferDiv.children[start + i]?.classList.add("active");
  }

  info.innerHTML = `
    現在のビュー: <b>${type}</b><br>
    インデックス: ${index}<br>
    値: <b>${view[index]}</b><br>
    （${step} バイトを読み込み）
  `;
  index++;
}
</script>
</body>
</html>

HTML

このデモでわかること

要素	説明
`ArrayBuffer`	メモリの生データ（バイト配列）を表す。
`Int8Array`	1バイトごとに符号付き整数として読む。
`Uint16Array`	2バイトをまとめて符号なし整数として読む。
`Float32Array`	4バイトをまとめて浮動小数点数として読む。
バイト色分け	「何バイト単位で読むか」が視覚的にわかる。

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31