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

JavaScript JavaScript
2025.10.05
スポンサーリンク

配列メソッド実践アプリ（sort / splice / flat / find など） を ブラウザ上で自動採点できる練習ページ（HTML + JS） として作成します。

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

このページでは、sort, splice, flat, find, filter, every など
実務でよく使う中級〜上級メソッド を体験しながら学べます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>配列メソッド実践アプリ</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      margin: 40px auto;
      max-width: 760px;
      line-height: 1.6;
    }
    h1, h2 { color: #333; }
    textarea {
      width: 100%;
      height: 100px;
      font-family: monospace;
      margin-bottom: 6px;
    }
    button {
      background: #0078d4;
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover { background: #005fa3; }
    pre {
      background: #f6f6f6;
      padding: 8px;
      border-radius: 6px;
    }
    .result { font-weight: bold; margin-top: 4px; }
    .correct { color: green; }
    .wrong { color: red; }
    .score { text-align: right; font-size: 1.1em; margin-top: 10px; }
  </style>
</head>
<body>
  <h1>🧩 配列メソッド 実践アプリ</h1>
  <p>ブラウザで直接試せます。各メソッドを使って正しい結果を作りましょう！</p>

  <hr>

  <!-- Q1 -->
  <section>
    <h2>① sort()：昇順に並べ替え</h2>
    <p><code>nums = [3, 1, 4, 2]</code> を昇順にソートし、<code>sorted</code> に代入してください。</p>
    <textarea id="q1">// sorted = ?</textarea>
    <button onclick="checkQ1()">実行</button>
    <div id="r1" class="result"></div>
  </section>

  <hr>

  <!-- Q2 -->
  <section>
    <h2>② splice()：要素の削除と追加</h2>
    <p><code>fruits = ["りんご", "バナナ", "オレンジ"]</code> の2番目を <code>"ぶどう"</code> に置き換えてください。</p>
    <textarea id="q2">// fruits.splice(?, ?, ?)</textarea>
    <button onclick="checkQ2()">実行</button>
    <div id="r2" class="result"></div>
  </section>

  <hr>

  <!-- Q3 -->
  <section>
    <h2>③ flat()：多次元配列をフラット化</h2>
    <p><code>nested = [1, [2, [3]]]</code> を1階層だけフラットにして <code>flat1</code> に代入してください。</p>
    <pre>ヒント：flat(1)</pre>
    <textarea id="q3">// flat1 = ?</textarea>
    <button onclick="checkQ3()">実行</button>
    <div id="r3" class="result"></div>
  </section>

  <hr>

  <!-- Q4 -->
  <section>
    <h2>④ find()：条件に合う最初の要素を取得</h2>
    <p><code>users = [{name:"Taro", age:18},{name:"Hanako", age:25}]</code> の中で <code>age >= 20</code> の人を <code>found</code> に代入してください。</p>
    <textarea id="q4">// found = ?</textarea>
    <button onclick="checkQ4()">実行</button>
    <div id="r4" class="result"></div>
  </section>

  <hr>

  <!-- Q5 -->
  <section>
    <h2>⑤ filter()：条件に合う要素を抽出</h2>
    <p><code>scores = [55, 70, 90, 40]</code> のうち <code>60以上</code> の要素だけを取り出して <code>passed</code> に代入してください。</p>
    <textarea id="q5">// passed = ?</textarea>
    <button onclick="checkQ5()">実行</button>
    <div id="r5" class="result"></div>
  </section>

  <hr>

  <!-- Q6 -->
  <section>
    <h2>⑥ every()：すべての要素が条件を満たすか確認</h2>
    <p><code>ages = [19, 22, 25]</code> の全員が20歳以上なら true を返し、結果を <code>allAdult</code> に代入してください。</p>
    <textarea id="q6">// allAdult = ?</textarea>
    <button onclick="checkQ6()">実行</button>
    <div id="r6" class="result"></div>
  </section>

  <hr>
  <div class="score" id="score">スコア：0 / 6</div>

  <script>
    let score = 0;
    const update = () => document.getElementById("score").textContent = `スコア：${score} / 6`;

    function checkQ1() {
      const code = document.getElementById("q1").value;
      try {
        const nums = [3, 1, 4, 2];
        eval(code);
        if (Array.isArray(sorted) && sorted.join(",") === "1,2,3,4") {
          document.getElementById("r1").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 1);
        } else throw "ソート結果が違います";
      } catch (e) {
        document.getElementById("r1").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ2() {
      const code = document.getElementById("q2").value;
      try {
        const fruits = ["りんご", "バナナ", "オレンジ"];
        eval(code);
        if (fruits.join(",") === "りんご,ぶどう,オレンジ") {
          document.getElementById("r2").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 2);
        } else throw "splice の操作が違います";
      } catch (e) {
        document.getElementById("r2").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ3() {
      const code = document.getElementById("q3").value;
      try {
        const nested = [1, [2, [3]]];
        eval(code);
        if (Array.isArray(flat1) && flat1.join(",") === "1,2,[3]") {
          document.getElementById("r3").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 3);
        } else throw "flat の結果が正しくありません";
      } catch (e) {
        document.getElementById("r3").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ4() {
      const code = document.getElementById("q4").value;
      try {
        const users = [{name:"Taro", age:18},{name:"Hanako", age:25}];
        eval(code);
        if (found && found.name === "Hanako") {
          document.getElementById("r4").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 4);
        } else throw "find の結果が違います";
      } catch (e) {
        document.getElementById("r4").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ5() {
      const code = document.getElementById("q5").value;
      try {
        const scores = [55, 70, 90, 40];
        eval(code);
        if (Array.isArray(passed) && passed.join(",") === "70,90") {
          document.getElementById("r5").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 5);
        } else throw "filter の結果が違います";
      } catch (e) {
        document.getElementById("r5").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ6() {
      const code = document.getElementById("q6").value;
      try {
        const ages = [19, 22, 25];
        eval(code);
        if (allAdult === false) {
          document.getElementById("r6").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 6);
        } else throw "条件が正しくありません（19歳が含まれています）";
      } catch (e) {
        document.getElementById("r6").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }
  </script>
</body>
</html>
HTML

問題と学習ポイントまとめ

問題学ぶこと例の答え
Q1sort() で数値の昇順ソートconst sorted = nums.sort((a,b)=>a-b);
Q2splice() で置換操作fruits.splice(1,1,"ぶどう");
Q3flat() で配列を平坦化const flat1 = nested.flat(1);
Q4find() で最初に条件一致const found = users.find(u => u.age >= 20);
Q5filter() で条件抽出const passed = scores.filter(s => s >= 60);
Q6every() で全条件チェックconst allAdult = ages.every(a => a >= 20);

発展アイデア

希望があれば次の発展編も作れます👇

テーマ内容例
⚙️ 配列メソッド応用編map＋filter＋reduce の組み合わせ（データ分析風）
🔄 不変操作 vs 破壊的操作デモsort, splice, push が配列をどう変えるか可視化
🧮 スプレッド構文・分割代入と組み合わせ[...arr], [first, ...rest] の実践体験

See the Pen Array Method Practice App by MONO365 -Color your days- (@monoqlo365) on CodePen.

次へ
123
スポンサーリンク
タイトルとURLをコピーしました