初心者向けJavaScript配列ガイド：宣言から操作まで基礎をマスターしよう

まずは、果物のリストを作ってみましょう。リスト名は「fruit」とし、「バナナ」「メロン」「ぶどう」という値を追加します。果物って本当に好きですよね！買い物リストのチュートリアルのように聞こえるかもしれませんが、実はこれでもう「配列（アレイ）」が完成しているのです。

このガイドでは、配列とは何か、どのように動作するのか、そしてなぜコードで配列を使うべきなのかを解説します。実際の動作例もいくつか紹介するので、読み終える頃にはJavaScriptの配列を自在に操れるようになっているでしょう。

配列とは何か？

配列とは、データを格納するためのオブジェクトです。配列は順序付けられた項目のコレクションを持ち、0個以上の項目を保存できます。似たような値を1つの変数にまとめて格納できるため、プログラミングにおいて非常に便利です。

例えば、好きな果物を10個並べたいときに、10個もの個別の変数を用意する必要はありません。配列を使えば、すべての果物を1つの変数に収めることができます。

次の例を見てみましょう：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

ここでは「fruits」という名前の配列を作成しました。3つの異なる値が格納されており、それぞれがスーパーで購入したい果物を表しています。配列を宣言するには、項目のリストを角括弧 [ ] で囲みます。

配列の宣言方法

配列の宣言には2つの方法があります。最もよく使われるのは、先ほどのように角括弧で項目のリストを囲む方法です：

let berries = [
	"Strawberry",
	"Blueberry",
	"Gooseberry"
];

この例では、3つの値を持つ配列を宣言しました。もう1つの方法として、newキーワードを使った配列コンストラクタもあります：

let berries = new Array(
	"Strawberry",
	"Blueberry",
	"Gooseberry"
);

これらのコードは、異なる方法で同じ配列を作成します。2番目の例では丸括弧を使用し、new Arrayコンストラクタを呼び出しています。そのため、ほとんどの開発者は最初の方法を好みます。角括弧の方が覚えやすく、入力の手間も少ないからです。

なお、配列には同じデータ型だけを含める必要はありません。さまざまな型のデータを混在させて格納できます：

let berries = [
	"Strawberry",
	1.50,
	true
];

この配列には、文字列・数値・ブーリアンという3つの異なる型のデータが格納されています。配列の宣言方法がわかったところで、次はその中身へアクセスする方法を見ていきましょう。

配列の読み取り

値を読み取れない配列はあまり役に立ちません。そこで登場するのが「インデックス」です。インデックスとは、リストのような反復可能なオブジェクト内の個々の項目にアクセスするための仕組みです。

配列の各要素には固有のインデックス番号が割り当てられます。番号は0から始まり、これを使って配列内の個々の項目にアクセスできます。「fruits」配列を覚えていますか？

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

この配列に割り当てられたインデックス値は以下の通りです：

• 0：Banana
• 1：Grapes
• 2：Melon

これらの番号を使えば、リスト内の任意の項目にアクセスできます。例えば、インデックス1にある果物を知りたい場合は、配列名の後に角括弧でインデックス値を指定します：

fruits[1];

このコードは「Grapes」を返します。インデックス1には「Grapes」が格納されているからです。0を指定すれば「Banana」が返されます。一方、存在しない要素にアクセスしようとすると、「undefined」が返されます：

fruits[10];

出力：undefined。インデックスが特に活躍するのは、配列内の項目をループ処理したいときです。例えば、配列内のすべての果物をコンソールに出力したい場合は、次のようなforループが使えます：

for (var i = 0; i < fruits.length; i++) {
	console.log(fruits[i]);
}

このコードの出力結果：

Banana
Grapes
Melon

このコードはリスト内の全項目を順番にループし、各項目をコンソールに出力します。lengthプロパティも使っていますね。これはリストの長さ（要素数）を返すプロパティです。

配列への要素の追加

多くの場合、配列を宣言した後で新しい値を追加したくなります。そんなときはpush()メソッドを使いましょう。

果物リストに「Strawberry」を追加し忘れてしまいました。ご安心ください、push()メソッドを使えばいつでも追加できます：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.push("Strawberry");
console.log(fruits);

このコードを実行すると、配列は次のようになります：

Banana	Grapes	Melon	Strawberry
[0]	[1]	[2]	[3]

また、unshift()メソッドを使えば、配列の先頭にデータを追加することもできます。イチゴは買い物リストの中でも特に重要なので、先頭に表示させたいとしましょう：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.unshift("Strawberry");
console.log(fruits);

元の「fruits」リストは次のように変化します：

Strawberry	Banana	Grapes	Melon
[0]	[1]	[2]	[3]

配列からの要素の削除

実は家にもうメロンがあることが判明しました。わざわざメロンをもう1つ買う必要はありませんね。メロンはリストの末尾にあるので、削除する方法は主に2つあります：

• splice()：インデックス番号を指定して要素を削除する
• pop()：配列の末尾から要素を削除する

まずはsplice()の例から見てみましょう：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.splice(2, 1);
console.log(fruits);

このコードの出力結果：

Banana
Grapes

splice()は2つの引数を受け取ります。1つ目は削除を開始するインデックス番号、2つ目は削除する項目の数です。この場合、インデックス2の「Melon」を1件だけ削除したかったので、「2, 1」を指定しました。

pop()は引数を取らず、シンプルにリストの最後の項目を削除します：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.pop();
console.log(fruits);

このコードの出力結果：

Banana
Grapes

さらに、shift()を使えばリストの先頭から項目を削除することもできます：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.shift();
console.log(fruits);

このコードの出力結果：

Grapes
Melon

push()とunshift()はリストに項目を追加し、pop()とshift()はリストから項目を削除します。splice()メソッドも、インデックス値に基づいてリストから任意の項目を削除できる汎用的な手段です。

配列内の要素の変更

バナナはおいしい果物ですが、サイズが大きくて、小腹が空いたときのおやつには向きません。ミニバナナなら手軽に食べられますね。

そこで、普通のバナナではなくミニバナナを買うように「fruits」リストを変更してみましょう。通常の変数と同じように、代入演算子を使えば簡単です：

fruits[0] = "Baby bananas";
console.log(fruits);

このコードの出力結果：

Baby bananas
Grapes
Melon

インデックス0の位置にある項目を「Baby bananas」という値に書き換えました。この変更には特別なメソッドは一切不要です。代入演算子だけで配列の値を自由に更新できます。

まとめ

以上が、JavaScript配列について押さえておくべき基本です。学ぶべきことはまだまだありますが、それこそがプログラミングの楽しいところ。常に新しい挑戦があなたを待っています。少なくとも、筆者の好きな果物については知ってもらえたはずです。実はブラックカラントも大好きなのですが、このチュートリアルでは紹介しませんでした。

これであなたも、エキスパートのようにJavaScript配列を操作する準備が整いました！