JavaScript配列【基本】

配列（Array）は、JavaScriptで複数のデータをひとつにまとめて管理するためのデータ構造です。

たとえば、複数の名前や数字を一つの変数で扱いたい場合に、配列を使うと便利です。

配列は複数のデータを順序よく格納するリストのようなものだとイメージできます。

配列の基本

配列を作成するには、角括弧 [ ] を使います。

カンマで区切ることで複数の要素を持つ配列を作ることができます。

JS

const fruits = ["apple", "banana", "orange"];

ここでは fruits という配列の中に "apple", "banana", "orange" の3つのデータ（要素）が含まれています。

配列の特徴

• 順序がある
  • 配列内の要素には順序（インデックス）が付いています。
  • 最初の要素はインデックス 0 で始まります。
• 異なるデータ型も含められる
  • 配列には文字列、数値、オブジェクトなど、異なるデータ型を混ぜて入れることも可能です。

const mixedArray = ["Hello", 42, true, { key: "value" }];

配列の要素にアクセスする方法

配列の要素には、インデックス番号を使ってアクセスできます。

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"
console.log(fruits[2]); // "orange"

ここで、fruits[0] は最初の要素、fruits[2] は3番目の要素です。

配列の操作

push：配列の最後に要素を追加します。

• fruits は3つの果物を持つ配列です。
• .push("grape") で "grape" を配列の最後に追加します。
• 結果として、配列は4つの要素を持つようになります。

JS

const fruits = ["apple", "banana", "orange"];

fruits.push("grape"); 

console.log(fruits);  

// 結果：["apple", "banana", "orange", "grape"]

pop：配列の最後の要素を削除します。

• .pop() は配列の最後の要素（この場合 “orange”）を削除します。
• fruits 配列は2つの要素だけになり、末尾の "orange" が取り除かれています。

JS

const fruits = ["apple", "banana", "orange"];

fruits.pop(); 

console.log(fruits);  

// 結果：["apple", "banana"]

unshift：配列の最初に要素を追加します。

• .unshift("strawberry") は "strawberry" を先頭に追加します。
• 既存の要素は1つずつ右にずれて格納されます。

JS

const fruits = ["apple", "banana", "orange"];

fruits.unshift("strawberry"); 

console.log(fruits);  

// 結果：["strawberry", "apple", "banana", "orange" ]

shift:：配列の最初の要素を削除します。

• .shift() は配列の最初の要素（この場合 "apple"）を削除します。
• 残りの "banana" と "orange" が先頭から順番に並び直されます。

JS

const fruits = ["apple", "banana", "orange"];

fruits.shift(); 

console.log(fruits);

// 結果：["banana", "orange" ]

indexOf：指定した要素が配列の中にある場合、そのインデックスを返します。
見つからない場合は -1 を返します。

• .indexOf("banana") は "banana" が何番目（インデックス）にあるかを調べます。
• "banana" は配列の2番目なので、インデックスは 1（※0から始まるため）

JS

const fruits = ["apple", "banana", "orange"];

console.log(fruits.indexOf("banana")); 

// 結果: 1

includes: 指定した要素が配列に含まれているかを確認し、
true か false を返す。

• .includes("orange") は、配列に "orange" が含まれているかどうかを判定します。
• 含まれているので true が返ります。
• 存在しなければ false。

JS

const fruits = ["apple", "banana", "orange"];

console.log(fruits.includes("orange")); 

// true

forEach: 配列の各要素に対して繰り返し処理を実行。

• .forEach() は、配列の全ての要素を順に取り出して処理します。
• (fruit) => { console.log(fruit); } という関数が、配列の各要素に対して実行されます。
• 結果として、ターミナルに以下の3行が出力されます：

JS

const fruits = ["apple", "banana", "orange"];

fruits.forEach((fruit) => { console.log(fruit); });

// apple
// banana
// orange

map: 各要素に処理を施した新しい配列を返します。

• .map() は元の配列の各要素に処理をして、新しい配列を作成します。
• fruit.toUpperCase() により、各文字列を大文字化しています。
• 元の fruits はそのままで、新しい配列 upperFruits に加工後の値が入ります。

JS

const fruits = ["apple", "banana", "orange"];

const upperFruits = fruits.map((fruit) => fruit.toUpperCase()); 

console.log(upperFruits); 

// ["APPLE", "BANANA", "ORANGE"]

filter: 条件に一致する要素だけを含む新しい配列を返します。

• .filter() は、条件に一致する要素だけを取り出すメソッドです。
• fruit.length <= 5 は「文字数が5以下の果物名だけ」を意味します。
• "banana" は6文字なので除外され、残りの3つが新しい配列になります。

JS

const fruits = ["apple", "banana", "kiwi", "fig"];

const shortNames = fruits.filter((fruit) => fruit.length <= 5);

console.log(shortNames); 

// 結果: ["apple", "kiwi", "fig"]

メソッドまとめ表（早見表)

まとめ

• 配列は複数のデータを一つにまとめて管理できる構造
• 順序があり、インデックスを使って要素にアクセス可能
• 配列を操作するメソッド（push, pop, forEach, map など）が豊富に用意されている

このように、配列を使うと、データの管理や処理が効率的に行えます。繰り返し練習することで、配列を使いこなせるようにしていきましょう。