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

JavaScript

2019.01.032025.10.15

では、「普通の配列」と「TypedArray（型付き配列）」の違いを可視化して理解できるアニメ付きデモを作ります。

デモ内容
このデモでわかること
学びのポイント

デモ内容

左側：普通の配列（Array）
右側：型付き配列（TypedArray）
各要素を追加・変更すると、
💡「メモリ上の扱い」や「速度・制約の違い」をアニメーションで表示します。

See the Pen Regular Array vs TypedArray Visualization Demo by MONO365 -Color your days- (@monoqlo365) on CodePen.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>普通の配列 vs TypedArray 可視化デモ</title>
<style>
body {
  font-family: "Segoe UI", sans-serif;
  background: #1e1e2f;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
h1 { margin-bottom: 10px; }
.container {
  display: flex;
  gap: 40px;
  margin-top: 20px;
}
.panel {
  background: #2c2c44;
  border-radius: 12px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.memory {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
  min-height: 50px;
}
.cell {
  width: 40px;
  height: 40px;
  background: #444;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.cell.updated {
  background: #4caf50 !important;
  transform: scale(1.2);
}
button {
  margin-top: 10px;
  background: #0078d4;
  border: none;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}
button:hover { background: #005fa3; }
.explain {
  margin-top: 10px;
  font-size: 14px;
  color: #ccc;
}
</style>
</head>
<body>
<h1>普通の配列 vs 型付き配列（TypedArray）</h1>

<div class="container">
  <div class="panel" id="array-panel">
    <h2>普通の配列</h2>
    <div class="memory" id="array-memory"></div>
    <button id="array-add">値を追加</button>
    <p class="explain">
      どんな型でも入る。<br>
      サイズは可変。メモリ配置は不連続。
    </p>
  </div>

  <div class="panel" id="typed-panel">
    <h2>TypedArray (Int8Array)</h2>
    <div class="memory" id="typed-memory"></div>
    <button id="typed-update">値を更新</button>
    <p class="explain">
      1要素＝1バイト。型固定・サイズ固定。<br>
      メモリ上で連続に並ぶ。
    </p>
  </div>
</div>

<script>
const arrayMem = document.getElementById('array-memory');
const typedMem = document.getElementById('typed-memory');

let normalArray = [];
let buffer = new ArrayBuffer(8);
let typedArray = new Int8Array(buffer);

// 普通の配列表示
function renderArray() {
  arrayMem.innerHTML = "";
  normalArray.forEach((val, i) => {
    const cell = document.createElement('div');
    cell.className = 'cell';
    cell.textContent = val;
    arrayMem.appendChild(cell);
  });
}

// TypedArray 表示
function renderTyped() {
  typedMem.innerHTML = "";
  typedArray.forEach((val, i) => {
    const cell = document.createElement('div');
    cell.className = 'cell';
    cell.textContent = val;
    typedMem.appendChild(cell);
  });
}

// 普通の配列に値を追加
document.getElementById('array-add').addEventListener('click', () => {
  const val = Math.floor(Math.random() * 100);
  normalArray.push(val);
  renderArray();
  const lastCell = arrayMem.lastElementChild;
  lastCell.classList.add('updated');
  setTimeout(() => lastCell.classList.remove('updated'), 500);
});

// TypedArray の値を更新
document.getElementById('typed-update').addEventListener('click', () => {
  const index = Math.floor(Math.random() * typedArray.length);
  const val = Math.floor(Math.random() * 100);
  typedArray[index] = val;
  renderTyped();
  const cell = typedMem.children[index];
  cell.classList.add('updated');
  setTimeout(() => cell.classList.remove('updated'), 500);
});

renderArray();
renderTyped();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>普通の配列 vs TypedArray 可視化デモ</title>
<style>
body {
  font-family: "Segoe UI", sans-serif;
  background: #1e1e2f;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
h1 { margin-bottom: 10px; }
.container {
  display: flex;
  gap: 40px;
  margin-top: 20px;
}
.panel {
  background: #2c2c44;
  border-radius: 12px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.memory {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
  min-height: 50px;
}
.cell {
  width: 40px;
  height: 40px;
  background: #444;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.cell.updated {
  background: #4caf50 !important;
  transform: scale(1.2);
}
button {
  margin-top: 10px;
  background: #0078d4;
  border: none;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}
button:hover { background: #005fa3; }
.explain {
  margin-top: 10px;
  font-size: 14px;
  color: #ccc;
}
</style>
</head>
<body>
<h1>普通の配列 vs 型付き配列（TypedArray）</h1>

<div class="container">
  <div class="panel" id="array-panel">
    <h2>普通の配列</h2>
    <div class="memory" id="array-memory"></div>
    <button id="array-add">値を追加</button>
    <p class="explain">
      どんな型でも入る。<br>
      サイズは可変。メモリ配置は不連続。
    </p>
  </div>

  <div class="panel" id="typed-panel">
    <h2>TypedArray (Int8Array)</h2>
    <div class="memory" id="typed-memory"></div>
    <button id="typed-update">値を更新</button>
    <p class="explain">
      1要素＝1バイト。型固定・サイズ固定。<br>
      メモリ上で連続に並ぶ。
    </p>
  </div>
</div>

<script>
const arrayMem = document.getElementById('array-memory');
const typedMem = document.getElementById('typed-memory');

let normalArray = [];
let buffer = new ArrayBuffer(8);
let typedArray = new Int8Array(buffer);

// 普通の配列表示
function renderArray() {
  arrayMem.innerHTML = "";
  normalArray.forEach((val, i) => {
    const cell = document.createElement('div');
    cell.className = 'cell';
    cell.textContent = val;
    arrayMem.appendChild(cell);
  });
}

// TypedArray 表示
function renderTyped() {
  typedMem.innerHTML = "";
  typedArray.forEach((val, i) => {
    const cell = document.createElement('div');
    cell.className = 'cell';
    cell.textContent = val;
    typedMem.appendChild(cell);
  });
}

// 普通の配列に値を追加
document.getElementById('array-add').addEventListener('click', () => {
  const val = Math.floor(Math.random() * 100);
  normalArray.push(val);
  renderArray();
  const lastCell = arrayMem.lastElementChild;
  lastCell.classList.add('updated');
  setTimeout(() => lastCell.classList.remove('updated'), 500);
});

// TypedArray の値を更新
document.getElementById('typed-update').addEventListener('click', () => {
  const index = Math.floor(Math.random() * typedArray.length);
  const val = Math.floor(Math.random() * 100);
  typedArray[index] = val;
  renderTyped();
  const cell = typedMem.children[index];
  cell.classList.add('updated');
  setTimeout(() => cell.classList.remove('updated'), 500);
});

renderArray();
renderTyped();
</script>
</body>
</html>

HTML

このデモでわかること

見た目	説明
💡 左の「普通の配列」	値を自由に増やせる・型がバラバラでもOK
⚙️ 右の「TypedArray」	長さ固定・型固定。内部は連続メモリに並ぶ
🟩 緑の点滅	メモリ更新の瞬間（書き換えアニメーション）