JavaScript配列の基礎と操作方法：初心者向けガイド

JavaScriptの配列（Array）は、複数の値を一つの変数に格納することができる特別な変数タイプです。

「HTML」「CSS」「JavaScript」「jQuery」「PHP」の5つの文字列を変数に格納してくださいと言われたら、どう書くでしょうか？

var str1 = "HTML";
var str2 = "CSS";
var str3 = "JavaScript";
var str4 = "jQuery";
var str5 = "PHP";

配列を使うなら一行で十分です。

var arr = ["HTML", "CSS", "JavaScript", "jQuery", "PHP"];

配列の作成とアクセス
配列操作

配列の作成とアクセス

JavaScriptの配列は、リテラル記法（[]を使用）またはArrayコンストラクタを使用して作成できます。

// リテラル記法
let fruits = ["apple", "banana", "cherry"];

// Arrayコンストラクタ
let vegetables = new Array("carrot", "potato", "tomato");

配列内の値にアクセスするには、配列名とインデックス（0から始まる）を使用します。

console.log(fruits[0]);  // "apple"
console.log(vegetables[2]);  // "tomato"

配列の要素を特定の位置において置き換えることができます。

一般的には、インデックス演算子（[]）を使用して、要素のインデックスを指定し、新しい値を代入することで置き換えが行われます。

var arr = ["要素1", "要素2", "要素3"];

// 配列の要素を置き換える
arr[1] = "新しい要素";

console.log(arr); // 出力: ["要素1", "新しい要素", "要素3"]

配列操作

追加、削除、変更

配列には、要素を追加、削除、変更するための多数のメソッドがあります。

以下は一部の例です。

push: 配列の末尾に要素を追加します。
pop: 配列の末尾の要素を削除します。
shift: 配列の先頭の要素を削除します。
unshift: 配列の先頭に要素を追加します。
splice: 配列から任意の位置の要素を削除または置換し、必要に応じて新しい要素を追加します。

fruits.push("orange");
console.log(fruits);  // ["apple", "banana", "cherry", "orange"]

fruits.pop();
console.log(fruits);  // ["apple", "banana", "cherry"]

fruits.splice(1, 0, 'kiwi');
console.log(fruits); // ['apple', 'kiwi', 'banana', 'cherry']

splice() メソッドは元の配列を変更し、削除された要素からなる新しい配列を返します。

使用方法は以下の通りです。

array.splice(start, deleteCount, item1, item2, ...)

start：変更を開始するインデックス位置です。
deleteCount：削除する要素の数です。0を設定すると、要素は削除されません。
item1, item2, ...：配列に追加する要素です。

以下にいくつかの例を示します。

配列から要素を削除する場合：

var array = [1, 2, 3, 4, 5];
array.splice(2, 1);
console.log(array); // 出力: [1, 2, 4, 5]

上記の例では、インデックス位置2から1つの要素が削除されています。

配列内の要素を置換する場合：

var array = [1, 2, 3, 4, 5];
array.splice(2, 1, 'a', 'b', 'c');
console.log(array); // 出力: [1, 2, 'a', 'b', 'c', 4, 5]

上記の例では、インデックス位置2から1つの要素が削除され、その位置に 'a', 'b', 'c' が置換されています。

配列に要素を挿入する場合：

var array = [1, 2, 3, 4, 5];
array.splice(2, 0, 'a', 'b', 'c');
console.log(array); // 出力: [1, 2, 'a', 'b', 'c', 3, 4, 5]

上記の例では、インデックス位置2に 'a', 'b', 'c' が挿入されています。

ソート（整列 / 並べ替え）

JavaScript で配列をソートするとき、sort() メソッドを使います。

array.sort()

このメソッドは元の配列を変更し、ソートされた配列を返します。

var array = [3, 1, 4, 2, 5];
array.sort();
console.log(array); // 出力: [1, 2, 3, 4, 5]

上記の例では、数字の配列が昇順でソートされています。

また、sort() メソッドはデフォルトでは文字列としてソートされます。したがって、数値配列を正確にソートするには、比較関数を提供する必要があります。

var array = [3, 1, 4, 2, 5];
array.sort(function(a, b) {
  return a - b;
});
console.log(array); // 出力: [1, 2, 3, 4, 5]

上記の例では、比較関数を使用して数値配列を昇順でソートしています。a - b は a が b より小さい場合に負の値を返し、配列の順序を変更します。

今は深く考えなくてもいいです。

逆順

reverse() メソッドは、配列を逆順に並び替えるために使用されます。配列の要素の順序を逆にし、元の配列を変更します。

array.reverse()

var array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // 出力: [5, 4, 3, 2, 1]

上記の例では、配列の要素が逆順に並び替えられています。

連結

join() メソッドは、配列の要素を文字列として連結するために使用されます。配列の要素を指定した区切り文字で連結し、新しい文字列を生成します。

array.join(separator)

separator：要素を連結する際に使用する文字列。省略するとデフォルトで ,（カンマ）が使用されます。

このメソッドは新しい文字列を生成し、元の配列には影響を与えません。

var array = ['apple', 'banana', 'orange'];
var result = array.join(', ');
console.log(result); // 出力: "apple, banana, orange"

上記の例では、join() メソッドを使って配列の要素を , （カンマとスペース）で連結し、新しい文字列を生成しています。

また、join() メソッドを使って配列の要素を空文字列で連結することもできます。

var array = ['Hello', 'world'];
var result = array.join('');
console.log(result); // 出力: "Helloworld"

上記の例では、join() メソッドを使って配列の要素を空文字列で連結し、新しい文字列を生成しています。

JavaScript 配列