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

JavaScript JavaScript
2025.10.05
スポンサーリンク

では、配列メソッド応用編（map / filter / reduce 連携） を学べる 自動採点付きブラウザ練習アプリ（HTML + JS） を作成します。

配列メソッド応用編（map / filter / reduce 連携）

保存名例：array_methods_advanced.html
ブラウザで開くだけで動作します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>配列メソッド応用編（map/filter/reduce）</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      margin: 40px auto;
      max-width: 780px;
      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>🧠 配列メソッド応用編（map / filter / reduce）</h1>
  <p>map / filter / reduce を組み合わせて、データ変換・抽出・集計を実践しましょう。</p>

  <hr>

  <!-- Q1 -->
  <section>
    <h2>① map()：全要素を変換</h2>
    <p><code>nums = [1, 2, 3, 4]</code> の全要素を2倍にして <code>doubled</code> に代入してください。</p>
    <textarea id="q1">// doubled = ?</textarea>
    <button onclick="checkQ1()">実行</button>
    <div id="r1" class="result"></div>
  </section>

  <hr>

  <!-- Q2 -->
  <section>
    <h2>② filter()：条件に合う要素だけ</h2>
    <p><code>ages = [12, 18, 21, 16, 30]</code> のうち <code>20歳以上</code> の要素を抽出して <code>adults</code> に代入してください。</p>
    <textarea id="q2">// adults = ?</textarea>
    <button onclick="checkQ2()">実行</button>
    <div id="r2" class="result"></div>
  </section>

  <hr>

  <!-- Q3 -->
  <section>
    <h2>③ reduce()：合計を求める</h2>
    <p><code>prices = [100, 200, 300]</code> の合計を <code>total</code> に代入してください。</p>
    <textarea id="q3">// total = ?</textarea>
    <button onclick="checkQ3()">実行</button>
    <div id="r3" class="result"></div>
  </section>

  <hr>

  <!-- Q4 -->
  <section>
    <h2>④ map + filter の組み合わせ</h2>
    <p><code>numbers = [1, 2, 3, 4, 5, 6]</code> のうち偶数だけを取り出して2倍にした配列を <code>result</code> に代入してください。</p>
    <textarea id="q4">// result = ?</textarea>
    <button onclick="checkQ4()">実行</button>
    <div id="r4" class="result"></div>
  </section>

  <hr>

  <!-- Q5 -->
  <section>
    <h2>⑤ map + filter + reduce 応用（平均点）</h2>
    <p>テストのスコア <code>scores = [40, 80, 100, 60, 90]</code> のうち、<code>60点以上</code> の平均点を求めて <code>avg</code> に代入してください。</p>
    <pre>ヒント：filter → reduce → / 長さ</pre>
    <textarea id="q5">// avg = ?</textarea>
    <button onclick="checkQ5()">実行</button>
    <div id="r5" class="result"></div>
  </section>

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

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

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

    function checkQ2() {
      const code = document.getElementById("q2").value;
      try {
        const ages = [12, 18, 21, 16, 30];
        eval(code);
        if (Array.isArray(adults) && adults.join(",") === "21,30") {
          document.getElementById("r2").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 2);
        } else throw "filter の結果が違います";
      } catch (e) {
        document.getElementById("r2").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ3() {
      const code = document.getElementById("q3").value;
      try {
        const prices = [100, 200, 300];
        eval(code);
        if (total === 600) {
          document.getElementById("r3").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 3);
        } else throw "reduce の合計が違います";
      } catch (e) {
        document.getElementById("r3").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ4() {
      const code = document.getElementById("q4").value;
      try {
        const numbers = [1, 2, 3, 4, 5, 6];
        eval(code);
        if (Array.isArray(result) && result.join(",") === "4,8,12") {
          document.getElementById("r4").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 4);
        } else throw "map + filter の組み合わせ結果が違います";
      } catch (e) {
        document.getElementById("r4").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ5() {
      const code = document.getElementById("q5").value;
      try {
        const scores = [40, 80, 100, 60, 90];
        eval(code);
        const expected = (80 + 100 + 60 + 90) / 4;
        if (Math.abs(avg - expected) < 0.01) {
          document.getElementById("r5").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 5);
        } else throw "平均値が違います";
      } catch (e) {
        document.getElementById("r5").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }
  </script>
</body>
</html>
HTML

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

問題メソッド学べること例の答え
Q1map要素変換const doubled = nums.map(n => n * 2);
Q2filter条件抽出const adults = ages.filter(a => a >= 20);
Q3reduce累積処理const total = prices.reduce((sum,p)=>sum+p,0);
Q4map + filter組み合わせ処理const result = numbers.filter(n=>n%2===0).map(n=>n*2);
Q5map + filter + reduceデータ集計（平均）const avg = scores.filter(s=>s>=60).reduce((a,b)=>a+b)/4;
前へ次へ
123
スポンサーリンク
タイトルとURLをコピーしました