LabEx
ログイン登録

JavaScript における配列の作成と操作

JavaScriptBeginner
オンラインで実践に進む

はじめに

この実験では、学生たちは JavaScript で配列を作成および操作する基本概念を探求します。この実験では、配列の初期化、配列要素のアクセス、および実際のコーディング演習を通じた基本的な配列操作について包括的な紹介を行います。参加者は、角括弧表記や Array コンストラクタなどのさまざまな方法を使って配列を作成する方法を学び、さまざまなデータ型を含む配列を扱う方法を理解します。

この実験では、数値、文字列、および混合要素を使って配列を定義すること、インデックスを使って個々の配列要素にアクセスすること、および基本的な配列操作技術を示すことなどの重要なスキルをカバーしています。手を動かしながらの例を通じて、学習者は JavaScript プログラミングにおける不可欠なデータ構造である配列を作成、アクセス、および操作する実践的な経験を得るでしょう。

配列の定義と初期化を理解する

このステップでは、JavaScript の配列について学びます。配列は、単一の変数に複数の値を格納するために使用される基本的なデータ構造です。配列を使うことで、関連するデータを効率的に収集して整理することができます。

まずは、JavaScript で簡単な配列を作成してみましょう。WebIDE を開き、~/project ディレクトリに arrays.js という新しいファイルを作成します。

// 数値の配列を作成する
let numbers = [1, 2, 3, 4, 5];

// 文字列の配列を作成する
let fruits = ["apple", "banana", "orange"];

// 空の配列を作成する
let emptyArray = [];

// 混合データ型の配列を作成する
let mixedArray = [42, "hello", true, null];

console.log("Numbers array:", numbers);
console.log("Fruits array:", fruits);
console.log("Empty array:", emptyArray);
console.log("Mixed array:", mixedArray);

このコードを実行すると、以下のような出力例が表示されます。

Numbers array: [1, 2, 3, 4, 5]
Fruits array: ['apple', 'banana', 'orange']
Empty array: []
Mixed array: [42, 'hello', true, null]

配列初期化に関する要点：

  • 配列は角括弧 [] を使って作成されます
  • 配列はさまざまな型の要素を含めることができます
  • 配列は空でも事前に要素が入っていてもよいです
  • 配列の最初の要素は常にインデックス 0 にあります

また、Array コンストラクタを使っても配列を作成できます。

// Array コンストラクタを使用する
let numbersConstructor = new Array(1, 2, 3, 4, 5);
console.log("Array using constructor:", numbersConstructor);

インデックスを使って配列要素にアクセスする

このステップでは、配列内の個々の要素にインデックスを使ってどのようにアクセスするかを学びます。JavaScript では、配列のインデックスは 0 から始まります。これは、最初の要素がインデックス 0 にあり、2 番目の要素がインデックス 1 にあり、以下同様であることを意味します。

~/project ディレクトリにある arrays.js ファイルを開き、以下のコードを追加します。

// 色の配列を作成する
let colors = ["red", "green", "blue", "yellow", "purple"];

// インデックスを使って配列要素にアクセスする
console.log("First color:", colors[0]); // 最初の要素
console.log("Third color:", colors[2]); // 3 番目の要素
console.log("Last color:", colors[colors.length - 1]); // 最後の要素

// 配列要素を変更する
colors[1] = "orange"; // 2 番目の要素を変更する
console.log("Modified colors array:", colors);

// インデックス範囲を示す
console.log("Array length:", colors.length);

このコードを実行すると、以下のような出力例が表示されます。

First color: red
Third color: blue
Last color: purple
Modified colors array: ['red', 'orange', 'blue', 'yellow', 'purple']
Array length: 5

配列インデックスに関する要点：

  • インデックスは 0 から始まります
  • 要素にアクセスするには角括弧 [] を使います
  • array.length は要素の総数を返します
  • 特定のインデックスに新しい値を割り当てることで要素を変更できます
  • 最後の要素にアクセスするには array[array.length - 1] を使います

配列の範囲外の要素にアクセスして何が起こるか試してみましょう。

console.log("Accessing out-of-range index:", colors[10]); // undefined が返されます

果物の配列を作成する

このステップでは、果物の配列を作成し、それを使ってどのように操作するかを学びます。~/project ディレクトリにある arrays.js ファイルを開き、以下のコードを追加します。

// 果物の配列を作成する
let fruits = ["apple", "banana", "orange", "mango", "strawberry"];

// 果物の配列全体を表示する
console.log("Fruits array:", fruits);

// 配列の末尾に新しい果物を追加する
fruits.push("grape");
console.log("Adding grape to fruits:", fruits);

// さまざまな種類の果物の配列を作成する
let tropicalFruits = ["pineapple", "coconut", "papaya"];

// 2 つの果物の配列を結合する
let allFruits = fruits.concat(tropicalFruits);
console.log("All fruits:", allFruits);

// 果物の数を確認する
console.log("Total number of fruits:", allFruits.length);

このコードを実行すると、以下のような出力例が表示されます。

Fruits array: ['apple', 'banana', 'orange','mango','strawberry']
Adding grape to fruits: ['apple', 'banana', 'orange','mango','strawberry', 'grape']
All fruits: ['apple', 'banana', 'orange','mango','strawberry', 'grape', 'pineapple', 'coconut', 'papaya']
Total number of fruits: 9

果物の配列を作成および操作する際の要点：

  • 配列は複数の要素で作成できます
  • push() を使って新しい要素を追加できます
  • concat() を使って配列を結合できます
  • length プロパティは要素の総数を示します

配列要素を Web ページに表示する

このステップでは、HTML と JavaScript を使って配列要素を Web ページに表示する方法を学びます。まず、~/project ディレクトリに fruits.html という HTML ファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fruits Array Display</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      #fruits-list {
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>My Fruits Collection</h1>
    <div id="fruits-list"></div>

    <script>
      // 果物の配列を作成する
      let fruits = ["Apple", "Banana", "Orange", "Mango", "Strawberry"];

      // 果物のリストコンテナを取得する
      let fruitsList = document.getElementById("fruits-list");

      // 果物を表示するための無順リストを作成する
      let ul = document.createElement("ul");

      // 果物の配列をループしてリスト項目を作成する
      fruits.forEach(function (fruit) {
        let li = document.createElement("li");
        li.textContent = fruit;
        ul.appendChild(li);
      });

      // ページにリストを追加する
      fruitsList.appendChild(ul);
    </script>
  </body>
</html>

この例はいくつかの重要な概念を示しています。

  • HTML 構造の作成
  • JavaScript を使って DOM を操作すること
  • Web ページに配列要素を表示すること
  • forEach() を使って配列要素を反復処理すること

この HTML ファイルを Web ブラウザで開くと、ページに果物のリストが表示されます。

innerHTML を使った代替方法：

// 果物を表示する代替方法
let fruitsList = document.getElementById("fruits-list");
fruitsList.innerHTML = fruits.map((fruit) => `<li>${fruit}</li>`).join("");

基本的な配列操作を調べる

このステップでは、JavaScript における一般的な配列操作について学びます。~/project ディレクトリにある arrays.js ファイルを開き、以下のコードを追加します。

// 数値の配列を作成する
let numbers = [5, 2, 8, 1, 9, 3];

// 要素を追加する
numbers.push(10); // 要素を末尾に追加する
numbers.unshift(0); // 要素を先頭に追加する
console.log("要素を追加した後：", numbers);

// 要素を削除する
let lastNumber = numbers.pop(); // 最後の要素を削除する
let firstNumber = numbers.shift(); // 最初の要素を削除する
console.log("要素を削除した後：", numbers);

// 配列をソートする
numbers.sort((a, b) => a - b); // 昇順にソートする
console.log("ソートされた配列：", numbers);

// 配列を逆順にする
numbers.reverse();
console.log("逆順の配列：", numbers);

// 要素を見つける
let index = numbers.indexOf(8);
console.log("8 のインデックス：", index);

// 配列をスライスする
let slicedNumbers = numbers.slice(1, 4);
console.log("スライスされた配列：", slicedNumbers);

// 配列をフィルタリングする
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log("偶数の数値：", evenNumbers);

// 配列をマッピングする
let squaredNumbers = numbers.map((num) => num * num);
console.log("二乗された数値：", squaredNumbers);

このコードを実行すると、以下のような出力例が表示されます。

要素を追加した後: [0, 5, 2, 8, 1, 9, 3, 10]
要素を削除した後: [5, 2, 8, 1, 9, 3, 10]
ソートされた配列: [1, 2, 3, 5, 8, 9, 10]
逆順の配列: [10, 9, 8, 5, 3, 2, 1]
8のインデックス: 2
スライスされた配列: [9, 8, 5]
偶数の数値: [10, 8, 2]
二乗された数値: [100, 81, 64, 25, 9, 4, 1]

示された主な配列操作：

  • 要素を追加するための push() と unshift()
  • 要素を削除するための pop() と shift()
  • 要素を並べ替えるための sort()
  • 配列の順序を逆にするための reverse()
  • 要素の位置を見つけるための indexOf()
  • 配列の一部を抽出するための slice()
  • 特定の要素を持つ新しい配列を作成するための filter()
  • 配列要素を変換するための map()

まとめ

この実験では、参加者は JavaScript における配列の基本を探求し、配列データ構造をどのように作成、初期化、操作するかを学びました。この実験では、角括弧と Array コンストラクタを使って配列を定義するなどの重要な概念を扱い、数値、文字列、そして混合データ型を含むさまざまな種類の要素で配列を作成できることを示しました。

参加者は、インデックスを通じて配列要素にアクセスする実践的なスキルを習得し、配列のインデックスは 0 から始まることを理解し、基本的な配列操作を行う方法を学びました。この実践的なアプローチにより、学習者は配列を作成し、その内容をログに記録し、JavaScript の配列がデータを効率的に格納および整理する際の柔軟性を探求する練習を行うことができました。

関連 JavaScript コース
初心者向け JavaScript

初心者向け JavaScript

javascriptweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development