JavaScript | 第10章「インデックス付きコレクション」

javascrpit JavaScript
2019.01.02
スポンサーリンク

では「Indexed collections（配列）」の学習をブラウザ上で体験できる インタラクティブ練習ページ（自動採点付き）

自動採点付き 練習アプリ（HTML + JS）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Indexed Collections 練習ページ</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      margin: 40px auto;
      max-width: 700px;
      line-height: 1.6;
    }
    h1 {
      text-align: center;
      color: #333;
    }
    pre {
      background: #f8f8f8;
      padding: 10px;
      border-radius: 8px;
    }
    textarea {
      width: 100%;
      height: 80px;
      font-family: monospace;
      margin-bottom: 8px;
    }
    button {
      padding: 6px 12px;
      background: #0078d4;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background: #005fa3;
    }
    .result {
      margin-top: 5px;
      font-weight: bold;
    }
    .correct { color: green; }
    .wrong { color: red; }
    .score {
      font-size: 1.2em;
      text-align: right;
      margin-top: 15px;
    }
  </style>
</head>
<body>
  <h1>🧠 Indexed Collections 練習（配列）</h1>

  <p>次の問題の下にあるテキストエリアに JavaScript コードを書き、<b>「実行」</b>ボタンを押してください。</p>

  <hr>

  <!-- Q1 -->
  <section>
    <h2>問題 1：配列の作成</h2>
    <p>「りんご」「みかん」「ぶどう」という3つの要素を持つ配列 <code>fruits</code> を作ってください。</p>
    <textarea id="q1"></textarea>
    <button onclick="checkQ1()">実行</button>
    <div id="r1" class="result"></div>
  </section>

  <hr>

  <!-- Q2 -->
  <section>
    <h2>問題 2：配列の操作</h2>
    <p><code>nums</code> 配列（[1, 2, 3, 4, 5]）から偶数だけを取り出して <code>evens</code> に入れてください。</p>
    <pre>ヒント: filter を使おう！</pre>
    <textarea id="q2">// ここに書く
const nums = [1, 2, 3, 4, 5];
// evens = ?</textarea>
    <button onclick="checkQ2()">実行</button>
    <div id="r2" class="result"></div>
  </section>

  <hr>

  <!-- Q3 -->
  <section>
    <h2>問題 3：ループで合計を求める</h2>
    <p><code>[10, 20, 30]</code> の合計値を変数 <code>sum</code> に代入してください。</p>
    <textarea id="q3">// sum = ?
const arr = [10, 20, 30];</textarea>
    <button onclick="checkQ3()">実行</button>
    <div id="r3" class="result"></div>
  </section>

  <hr>

  <!-- スコア表示 -->
  <div class="score" id="score">スコア：0 / 3</div>

  <script>
    let score = 0;

    function updateScore() {
      document.getElementById("score").textContent = `スコア：${score} / 3`;
    }

    function checkQ1() {
      const code = document.getElementById("q1").value;
      try {
        eval(code);
        if (Array.isArray(fruits) && fruits.length === 3 && fruits[0] === "りんご") {
          document.getElementById("r1").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 1);
        } else {
          document.getElementById("r1").innerHTML = "<span class='wrong'>❌ fruits 配列が正しくありません。</span>";
        }
      } catch (e) {
        document.getElementById("r1").innerHTML = "<span class='wrong'>エラー：" + e.message + "</span>";
      }
      updateScore();
    }

    function checkQ2() {
      const code = document.getElementById("q2").value;
      try {
        eval(code);
        if (Array.isArray(evens) && evens.join(",") === "2,4") {
          document.getElementById("r2").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 2);
        } else {
          document.getElementById("r2").innerHTML = "<span class='wrong'>❌ evens の値が違います。</span>";
        }
      } catch (e) {
        document.getElementById("r2").innerHTML = "<span class='wrong'>エラー：" + e.message + "</span>";
      }
      updateScore();
    }

    function checkQ3() {
      const code = document.getElementById("q3").value;
      try {
        eval(code);
        if (sum === 60) {
          document.getElementById("r3").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 3);
        } else {
          document.getElementById("r3").innerHTML = "<span class='wrong'>❌ sum の値が 60 ではありません。</span>";
        }
      } catch (e) {
        document.getElementById("r3").innerHTML = "<span class='wrong'>エラー：" + e.message + "</span>";
      }
      updateScore();
    }
  </script>
</body>
</html>
HTML

使い方

  1. 上のコードをコピーして、indexed_practice.html という名前で保存。
  2. ブラウザ（Chrome, Firefox など）で開く。
  3. 各問題の下のテキストエリアにコードを書き、「実行」ボタンを押す。
  4. 正解なら ✅ が出てスコアが上がる！

練習できるポイント

問題学べること
1配列リテラルと作成方法
2filter() の使い方
3配列のループと合計の考え方

See the Pen Indexed collections by MONO365 -Color your days- (@monoqlo365) on CodePen.

では次は、「Indexed Collections（配列）」中級〜上級編の インタラクティブ練習ページ（自動採点付き） を作ります。

テーマは次の通りです：

レベル内容
🔹 中級map(), reduce(), includes() の活用
🔸 上級多次元配列、TypedArray、配列っぽいオブジェクトの変換

Indexed Collections 中級〜上級 練習ページ（HTML + JS）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Indexed Collections 中級〜上級練習</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      margin: 40px auto;
      max-width: 750px;
      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>🚀 Indexed Collections 中級〜上級 練習</h1>
  <p>ブラウザで直接実行できます！コードを書いて「実行」を押すと自動採点されます。</p>

  <hr>

  <!-- Q1 -->
  <section>
    <h2>中級①：map() を使って要素を2倍にする</h2>
    <p><code>nums = [1, 2, 3]</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>中級②：reduce() で合計を求める</h2>
    <p><code>[5, 10, 15]</code> の合計を <code>total</code> に代入してください。</p>
    <pre>ヒント: arr.reduce((acc, x) => acc + x, 0)</pre>
    <textarea id="q2">// total = ?</textarea>
    <button onclick="checkQ2()">実行</button>
    <div id="r2" class="result"></div>
  </section>

  <hr>

  <!-- Q3 -->
  <section>
    <h2>中級③：includes() を使って値を判定</h2>
    <p><code>colors = ["赤", "青", "緑"]</code> に "青" が含まれているか判定し、結果を変数 <code>hasBlue</code>（true/false）に代入してください。</p>
    <textarea id="q3">// hasBlue = ?</textarea>
    <button onclick="checkQ3()">実行</button>
    <div id="r3" class="result"></div>
  </section>

  <hr>

  <!-- Q4 -->
  <section>
    <h2>上級①：多次元配列から特定の値を取得</h2>
    <p><code>matrix = [[1,2,3],[4,5,6],[7,8,9]]</code> の中央の値（5）を <code>center</code> に代入してください。</p>
    <textarea id="q4">// center = ?</textarea>
    <button onclick="checkQ4()">実行</button>
    <div id="r4" class="result"></div>
  </section>

  <hr>

  <!-- Q5 -->
  <section>
    <h2>上級②：TypedArray の利用</h2>
    <p><code>Uint8Array</code> を使って [10, 20, 30] を表す <code>data</code> を作り、<code>data[1]</code> の値を <code>val</code> に代入してください。</p>
    <textarea id="q5">// data = ?; val = ?</textarea>
    <button onclick="checkQ5()">実行</button>
    <div id="r5" class="result"></div>
  </section>

  <hr>

  <!-- Q6 -->
  <section>
    <h2>上級③：配列っぽいオブジェクトを配列に変換</h2>
    <p>次のようなオブジェクトがあります：</p>
    <pre>const pseudo = {0: "a", 1: "b", 2: "c", length: 3};</pre>
    <p>これを本物の配列に変換し、<code>arr</code> に代入してください。</p>
    <pre>ヒント: Array.from()</pre>
    <textarea id="q6">// arr = ?</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 = [1, 2, 3];
        eval(code);
        if (Array.isArray(doubled) && doubled.join(",") === "2,4,6") {
          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 arr = [5, 10, 15];
        eval(code);
        if (total === 30) {
          document.getElementById("r2").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 2);
        } else throw "合計が正しくありません";
      } catch (e) {
        document.getElementById("r2").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ3() {
      const code = document.getElementById("q3").value;
      try {
        const colors = ["赤", "青", "緑"];
        eval(code);
        if (hasBlue === true) {
          document.getElementById("r3").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 3);
        } else throw "hasBlue が true ではありません";
      } catch (e) {
        document.getElementById("r3").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ4() {
      const code = document.getElementById("q4").value;
      try {
        const matrix = [[1,2,3],[4,5,6],[7,8,9]];
        eval(code);
        if (center === 5) {
          document.getElementById("r4").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 4);
        } else throw "center の値が違います";
      } catch (e) {
        document.getElementById("r4").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ5() {
      const code = document.getElementById("q5").value;
      try {
        eval(code);
        if (data instanceof Uint8Array && val === 20) {
          document.getElementById("r5").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 5);
        } else throw "TypedArray または val が正しくありません";
      } catch (e) {
        document.getElementById("r5").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }

    function checkQ6() {
      const code = document.getElementById("q6").value;
      try {
        const pseudo = {0: "a", 1: "b", 2: "c", length: 3};
        eval(code);
        if (Array.isArray(arr) && arr.join("") === "abc") {
          document.getElementById("r6").innerHTML = "<span class='correct'>✅ 正解！</span>";
          score = Math.max(score, 6);
        } else throw "配列変換が正しくありません";
      } catch (e) {
        document.getElementById("r6").innerHTML = "<span class='wrong'>❌ " + e + "</span>";
      }
      update();
    }
  </script>
</body>
</html>
HTML

内容まとめ

問題学ぶこと例の答え（参考）
Q1map() で要素を変換const doubled = nums.map(n => n * 2);
Q2reduce() で合計計算const total = arr.reduce((a, x) => a + x, 0);
Q3includes() で要素確認const hasBlue = colors.includes("青");
Q4多次元配列アクセスconst center = matrix[1][1];
Q5TypedArray の作成const data = new Uint8Array([10,20,30]); const val = data[1];
Q6配列っぽいオブジェクトを変換const arr = Array.from(pseudo);

See the Pen Indexed Collections 中級〜上級 練習ページ（HTML + JS） by MONO365 -Color your days- (@monoqlo365) on CodePen.

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