JavaScript配列の基本的な作成と操作方法 | 初心者向け解説

配列は、プログラミングにおいて非常に便利なデータ構造であり、初心者にとっても重要な概念です。

配列を理解することで、より複雑なプログラムを作成することができます。

データ構造とは、データを効率的に管理するための方法のことです。

配列は、複数の値を一度に扱うことができ、データの整理や処理に非常に役立ちます。例えば、配列を使用して、数値の平均値を算することができます。

本日は、基本的なデータ構造の一つである、JavaScript配列の作成および操作についての初心者向け解説となっております。

JavaScript配列
- 配列リテラル
- 配列コンストラクター
  - JavaScript 連想配列
  - JavaScript 多次元配列
    - 最後に

JavaScript配列

JavaScriptでは、変数には1つの値しか割り当てることができません。

しかし、配列を使用することで、1つの変数に複数の値を格納することができます。

配列は、複数の値を格納できる特殊な型の変数であり、すべての値は0から始まる数値インデックスに関連付けられています。

例えば、以下のように配列を定義することができます。

let arr = ["hello", "world", "welcome", 20, 5];

以下のテーブルでは、配列が値を格納する方法を示しています。

value(値)→	hello	world	welcome	20	5
index番号→	0	1	2	3	4

この配列には、5つの値が含まれており、それぞれの値は0から始まるインデックス番号に関連付けられています。

例えば、"hello"はインデックス番号0に、"world"はインデックス番号1に、"welcome"はインデックス番号2に、20はインデックス番号3に、そして5はインデックス番号4に関連付けられています。

値が割り当てられていない、インデックスの値はundefinedとなります。

配列を定義する方法には、配列リテラルと配列コンストラクタ構文の2つがあります。

配列リテラルは、以下のように角括弧を使用して配列を定義します。

let arr = ["hello", "world", "welcome", 20, 5];

一方、配列コンストラクタ構文を使用する場合は、以下のようにnew演算子を使用して配列を定義します。

let arr = new Array("hello", "world", "welcome", 20, 5);

配列に格納されている値にアクセスするには、インデックス番号を使用して配列内の値を参照することができます。

例えば、以下のようにして配列内の値を参照することができます。

console.log(arr[0]); // "hello"
console.log(arr[1]); // "world"
console.log(arr[2]); // "welcome"
console.log(arr[3]); // 20
console.log(arr[4]); // 5

JavaScriptの配列は非常に便利であり、多くの場面で使用されます。

配列を使用することで、複数の値を効率的に格納し、処理することができます。

配列リテラル

JavaScriptでは、配列を使用することで、1つの変数に複数の値を格納することができます。

配列を作成する場合、最も簡単な方法は配列リテラルを使用することです。

配列リテラルの構文は単純で、値のリストをカンマ区切りで角かっこ[]で囲みます。

例えば、以下のように配列を定義することができます。

const array1 = ["eat", "sleep"];

配列には、任意の型の要素を格納することができます。

つまり、配列、関数、その他のオブジェクトを配列内に格納することができます。

例えば、以下のように配列を定義することができます。

let fruits = [
  "Apple", 
  "Orange", 
  { name: "Taro" }, 
  "Banana", 
  [1, 2, 3],
  function hello() {console.log("hello")}
];

配列要素には、ゼロから始まる番号が付けられているので、角括弧内の数で要素を取得できます。

また、要素を置き換えることも可能です。例えば、以下のようにして配列内の要素を置き換えることができます。

let fruits = ["Apple", "Orange", "Banana"];
fruits[2] = 'Lemon';
// ["Apple", "Orange", "Lemon"];

配列の最後に要素を追加する場合はpush()メソッドを使用します。

配列の先頭に要素を追加する場合はunshift()メソッドを使用します。

例えば、以下のようにして配列に要素を追加することができます。

let fruits = ["Apple", "Orange", "Banana"];
fruits.push("Lemon");
// ["Apple", "Orange", "Banana", "Lemon"];
fruits.unshift("Lemon");
// ["Lemon", "Apple", "Orange", "Banana"];

配列の最後の要素を削除する場合は、pop()メソッドを使用します。

配列の先頭の要素を削除する場合は、shift()メソッドを使用します。

これらのメソッドは、削除された要素を返します。

例えば、以下のようにして配列から要素を削除することができます。

let fruits = ["Apple", "Orange", "Banana", "Lemon"];
fruits.pop();
// "Lemon"
console.log(fruits); // ["Apple", "Orange", "Banana"]
const removedElement = fruits.pop();
// "Banana"
console.log(removedElement);
console.log(fruits); // ["Apple", "Orange"]
fruits.shift();
// "Apple"
console.log(fruits); // ["Orange"]

配列内の要素の長さ（要素の総数）を知りたい場合は、.lengthプロパティを使用します。

また、要素が配列にない場合は、indexOf()メソッドを使用して-1を指定することができます。

例えば、以下のようにして配列内の要素を検索することができます。

let fruits = ["Apple", "Orange", "Banana"];
console.log(fruits.length); // 3
console.log(fruits.indexOf('Lemon')); // -1

このように、JavaScriptの配列は非常に便利であり、多くの場面で使用されます。

配列を使用することで、複数の値を効率的に格納し、処理することができます。

配列コンストラクター

JavaScriptにおいて、配列を初期化する方法には、配列コンストラクター構文を使用する方法があります。

配列コンストラクター構文を使用することで、空の配列を作成し、要素を保持することができます。

let fruits = new Array(); // 空の配列を作成

配列を作成し、いくつかの要素で初期化するには、要素をカンマ区切りのリストとしてArray()コンストラクターに渡します。

let fruits = new Array("Apple", "Orange"); // 要素を持つ配列を作成
let scores = new Array(5, 10, 6, 2); // 数値を要素として持つ配列を作成

JavaScriptでは、Array()コンストラクターを使用する際にnew演算子を省略することができます。

let fruits = Array(); // new演算子を省略した配列の作成

また、配列を定義する別の方法として、以下のように要素を追加する方法があります。

let scoresArray = new Array(); // 空の配列を作成
scoresArray[0] = 10; // 要素を追加
scoresArray[1] = 5;
scoresArray[2] = 8;
scoresArray[3] = 2;
console.log(scoresArray); // [10, 5, 8, 2]

配列のインデックスは数値である必要があり、文字列やその他のデータ型にすることはできません。

// 間違った構文
let scoresArray = new Array();
scoresArray["ten"] = 10;

配列は、オブジェクトと同様にカンマで終わる場合があります。

let scoresArray = [
  10,
  5,
  8,
];

実際には、配列リテラルを使用して配列を作成することがほとんどです。

配列を空にする方法には、以下の方法があります。

let fruits = ["Apple", "Orange", "Banana"]; // 配列を作成
fruits = []; // 新しい空の配列に割り当てる

また、以下のようにsplice()メソッドを使用することもできます。

let fruits = ["Apple", "Orange", "Banana"]; // 配列を作成
fruits.splice(0,fruits.length); // 配列のすべての要素を削除

splice()メソッドは、配列のすべての要素を削除し、削除された要素を配列として返します。

また、以下のようにlengthプロパティを使用することもできます。

let fruits = ["Apple", "Orange", "Banana"]; // 配列を作成
fruits.length = 0; // 長さを0に設定することで、配列のすべての要素を削除

以上が、基本的なJavaScriptにおける配列の初期化と空にする方法についての解説です。

JavaScript 連想配列

JavaScriptにおいて、連想配列を通常の配列のように作成することはできません。

代わりに、JavaScriptオブジェクトを使用して連想配列を作成します。

連想配列は、(キー、値)のペアでデータを含むデータ構造の概念となります。

JavaScript 連想配列はJavaScriptオブジェクトとして扱われるため、オブジェクトのプロパティとメソッドは任意に割り当てることが可能となります。

角かっこ[ ]・ドット.・ブラケット{ }記法のいずれかを使用しプロパティの追加ができます。

以下は、JavaScriptオブジェクトを使用して連想配列を作成する例です。

const person = {
  firstname: "Taro",
  lastname: "Yamada",
  age: 30,
  city: "Tokyo"
};

連想配列は、通常の配列とは異なり、キーによってアクセスします。

しかし、数値キーではなく文字列キーを持つ配列となっており、通常の配列とは異なります。

連想配列は長さプロパティを持ちません。しかし、オブジェクトのキーの長さを取得することができます。

以下は、オブジェクトキーの長さを取得する方法です。

const person = {
  firstname: "Taro",
  lastname: "Yamada",
  age: 30,
  city: "Tokyo"
};

console.log(Object.keys(person).length); // 4

プロパティを削除する場合は、deleteを使用します。

const person = {
  firstname: "Taro",
  lastname: "Yamada",
  age: 30,
  city: "Tokyo"
};

delete person.age; 

console.log(person); // { firstname: "Taro", lastname: "Yamada", city: "Tokyo" }

連想配列(オブジェクト)を単純な配列に変換することもできます。

以下は、連想配列を単純な配列に変換する方法です。

const person = {
  firstname: "Taro",
  lastname: "Yamada",
  age: 30,
  city: "Tokyo"
};

const elements = Object.keys(person).map(function(x) {
    return person[x];
});

console.log(elements); // ["Taro", "Yamada", 30, "Tokyo"]

JavaScriptには、Mapオブジェクトという新しいデータ構造があります。

Mapオブジェクトは、連想配列をより効率的に処理するために導入されました。

以下は、Mapオブジェクトを使用して連想配列を作成する例です。

const fruits = new Map();

fruits.set("Apple", 1);
fruits.set("Orange", 2);
fruits.set("Banana", 3);

特定の値を取得したい場合は、以下のようにget()を使用します。

console.log(fruits.get("Apple")); // 1
console.log(fruits.get("Orange")); // 2
console.log(fruits.get("Banana")); // 3

Mapオブジェクトには、has()やdelete()メソッドがあります。

has()メソッドは、オブジェクトに特定のキーがあるかどうかのチェックするために使用します。

delete()メソッドは、オブジェクトから特定のキーを削除するために使用します。

console.log(fruits.has("Apple")); // true
console.log(fruits.delete("Apple")); // true
console.log(fruits.has("Apple")); // false

Mapオブジェクトは、通常のオブジェクトとは異なり、順序が保持されます。

しかし、角括弧表記での使用は避ける必要があります。

代わりに、ドットやブラケット記法を使用してアクセスすることをお勧めします。

以上を踏まえて、JavaScriptで連想配列を処理する最も正しい方法は、Mapオブジェクトを使用することです。

JavaScript 多次元配列

JavaScriptには多次元配列を直接サポートする機能はありませんが、代わりにネストされた配列を使用して多次元配列を作成することができます。

多次元配列は、単に別の配列を含む配列です。

例えば、以下のように2次元配列を作成することができます。

const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

この場合、3行3列のテーブルと考えることができます。

配列の要素にアクセスするには、2つのインデックスを使用します。

例えば、以下のようにして配列の要素にアクセスできます。

console.log(data[0][0]); // 1
console.log(data[1][2]); // 6
console.log(data[2][1]); // 8

同様に、3次元配列を作成することもできます。以下は、3次元配列の例です。

const arr = [
  [
    [1, 2, 3],
    [4, 5, 6]
  ],
  [
    [7, 8, 9],
    [10, 11, 12]
  ]
];

この場合、2つの2次元配列がネストされた3次元配列となります。

配列の要素にアクセスするには、3つのインデックスを使用します。

例えば、以下のようにして配列の要素にアクセスできます。

console.log(arr[0][0][0]); // 1
console.log(arr[1][0][2]); // 9
console.log(arr[1][1][1]); // 11

つまり、JavaScriptにおいて、多次元配列を作成する場合、カンマ区切りで配列をネストしていくことで、1次元、2次元、3次元配列として作成することができるということを示しています。

3次元配列は一般的には使用頻度は少ないです、3次元配列は、物理計算や人工知能などの分野で使用されることがあります。

例えば、3Dグラフィックスや物理シミュレーションでは、3次元配列を使用して、オブジェクトの位置、速度、加速度などの情報を格納することができます。

また、人工知能の分野では、3次元配列を使用して、画像や音声などのデータを表現することができます。

要素の追加や削除などは、配列のメソッド（例えば、push()やsplice()）を使用して行うことができます。

以下に2次元配列での要素の追加と削除の例を示します。

// 2次元配列の作成
let data = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 要素の追加
data.push([10, 11, 12]); // 最後に新しい行を追加する

console.log(data);
// 出力: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]]

// 要素の削除
data.splice(1, 1); // 2行目を削除する

console.log(data);
// 出力: [[1, 2, 3], [7, 8, 9], [10, 11, 12]]