配列メソッド 実践アプリ（HTML + JS）

配列メソッド実践アプリ（HTML + JS）

JavaScript

2025.10.052025.10.25

「不変操作 vs 破壊的操作」を視覚的に体験できる 配列変化シミュレーター（自動採点付き）
を作ります。

これは、map, filter, slice（＝非破壊的 / 不変操作）と
push, pop, splice, sort（＝破壊的 / 破壊操作）などの違いを
リアルタイムで視覚的に確認できるアプリです。

不変操作 vs 破壊的操作体験アプリ（HTML + JS）
アプリの特徴
1. 使い方

不変操作 vs 破壊的操作体験アプリ（HTML + JS）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>不変操作 vs 破壊的操作（配列シミュレーター）</title>
<style>
  body {
    font-family: "Segoe UI", sans-serif;
    margin: 40px auto;
    max-width: 800px;
  }
  h1 {
    text-align: center;
    color: #333;
  }
  .container {
    display: flex;
    gap: 40px;
    margin-top: 30px;
  }
  .array-box {
    flex: 1;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
  }
  .array {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .item {
    background: #0078d4;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: bold;
  }
  button {
    margin: 6px;
    padding: 6px 12px;
    background: #0078d4;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover { background: #005fa3; }
  .note {
    background: #f0f7ff;
    padding: 10px;
    border-left: 4px solid #0078d4;
    margin-bottom: 15px;
  }
</style>
</head>
<body>

<h1>🔍 不変操作 vs 破壊的操作 体験アプリ</h1>

<div class="note">
  <b>不変操作（immutable）</b>：元の配列を変えずに新しい配列を返す。<br>
  <b>破壊的操作（mutable）</b>：元の配列そのものを変更する。
</div>

<div class="container">
  <div class="array-box">
    <h2>元の配列</h2>
    <div id="original" class="array"></div>
  </div>
  <div class="array-box">
    <h2>結果の配列</h2>
    <div id="result" class="array"></div>
  </div>
</div>

<div style="text-align:center; margin-top:30px;">
  <h3>操作を選んで実行</h3>

  <button onclick="immutable('map')">map（+1）</button>
  <button onclick="immutable('filter')">filter（偶数のみ）</button>
  <button onclick="immutable('slice')">slice（1〜3）</button>

  <br>

  <button onclick="mutable('push')">push（6追加）</button>
  <button onclick="mutable('pop')">pop（末尾削除）</button>
  <button onclick="mutable('splice')">splice（1削除）</button>
  <button onclick="mutable('sort')">sort（昇順）</button>

  <br><br>
  <button onclick="reset()">🔄 リセット</button>
</div>

<script>
let original = [1, 2, 3, 4, 5];
let result = [];

function render() {
  const makeDiv = arr => arr.map(v => `<div class="item">${v}</div>`).join("");
  document.getElementById("original").innerHTML = makeDiv(original);
  document.getElementById("result").innerHTML = makeDiv(result);
}

function immutable(type) {
  switch(type) {
    case 'map':
      result = original.map(x => x + 1);
      break;
    case 'filter':
      result = original.filter(x => x % 2 === 0);
      break;
    case 'slice':
      result = original.slice(1, 4);
      break;
  }
  render();
  alert("✅ 不変操作: 元の配列は変更されていません！");
}

function mutable(type) {
  switch(type) {
    case 'push':
      original.push(6);
      break;
    case 'pop':
      original.pop();
      break;
    case 'splice':
      original.splice(1, 1);
      break;
    case 'sort':
      original.sort((a,b)=>a-b);
      break;
  }
  result = [...original];
  render();
  alert("⚠️ 破壊的操作: 元の配列も変わっています！");
}

function reset() {
  original = [1, 2, 3, 4, 5];
  result = [];
  render();
}

render();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>不変操作 vs 破壊的操作（配列シミュレーター）</title>
<style>
  body {
    font-family: "Segoe UI", sans-serif;
    margin: 40px auto;
    max-width: 800px;
  }
  h1 {
    text-align: center;
    color: #333;
  }
  .container {
    display: flex;
    gap: 40px;
    margin-top: 30px;
  }
  .array-box {
    flex: 1;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
  }
  .array {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .item {
    background: #0078d4;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: bold;
  }
  button {
    margin: 6px;
    padding: 6px 12px;
    background: #0078d4;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover { background: #005fa3; }
  .note {
    background: #f0f7ff;
    padding: 10px;
    border-left: 4px solid #0078d4;
    margin-bottom: 15px;
  }
</style>
</head>
<body>

<h1>🔍 不変操作 vs 破壊的操作 体験アプリ</h1>

<div class="note">
  <b>不変操作（immutable）</b>：元の配列を変えずに新しい配列を返す。<br>
  <b>破壊的操作（mutable）</b>：元の配列そのものを変更する。
</div>

<div class="container">
  <div class="array-box">
    <h2>元の配列</h2>
    <div id="original" class="array"></div>
  </div>
  <div class="array-box">
    <h2>結果の配列</h2>
    <div id="result" class="array"></div>
  </div>
</div>

<div style="text-align:center; margin-top:30px;">
  <h3>操作を選んで実行</h3>

  <button onclick="immutable('map')">map（+1）</button>
  <button onclick="immutable('filter')">filter（偶数のみ）</button>
  <button onclick="immutable('slice')">slice（1〜3）</button>

  <br>

  <button onclick="mutable('push')">push（6追加）</button>
  <button onclick="mutable('pop')">pop（末尾削除）</button>
  <button onclick="mutable('splice')">splice（1削除）</button>
  <button onclick="mutable('sort')">sort（昇順）</button>

  <br><br>
  <button onclick="reset()">🔄 リセット</button>
</div>

<script>
let original = [1, 2, 3, 4, 5];
let result = [];

function render() {
  const makeDiv = arr => arr.map(v => `<div class="item">${v}</div>`).join("");
  document.getElementById("original").innerHTML = makeDiv(original);
  document.getElementById("result").innerHTML = makeDiv(result);
}

function immutable(type) {
  switch(type) {
    case 'map':
      result = original.map(x => x + 1);
      break;
    case 'filter':
      result = original.filter(x => x % 2 === 0);
      break;
    case 'slice':
      result = original.slice(1, 4);
      break;
  }
  render();
  alert("✅ 不変操作: 元の配列は変更されていません！");
}

function mutable(type) {
  switch(type) {
    case 'push':
      original.push(6);
      break;
    case 'pop':
      original.pop();
      break;
    case 'splice':
      original.splice(1, 1);
      break;
    case 'sort':
      original.sort((a,b)=>a-b);
      break;
  }
  result = [...original];
  render();
  alert("⚠️ 破壊的操作: 元の配列も変わっています！");
}

function reset() {
  original = [1, 2, 3, 4, 5];
  result = [];
  render();
}

render();
</script>
</body>
</html>

HTML

アプリの特徴

種類	メソッド例	挙動
🟢 不変操作	`map`, `filter`, `slice`, `concat`	新しい配列を返す（元の配列はそのまま）
🔴 破壊的操作	`push`, `pop`, `splice`, `sort`, `reverse`	元の配列を変更する