PR JavaScript

JavaScriptの配列とは?基本・使い方・よく使うメソッド完全解説

💡 この記事でわかること

  • JavaScriptの配列とは何か
  • 配列の作り方・値の取り出し方
  • 配列の追加・削除・変更方法
  • よく使う配列メソッド
  • 配列 × ループの使い方
  • オブジェクトとの違い

1. JavaScriptの配列とは?

配列(Array)とは、
👉 複数の値を「順番に」まとめて管理できるデータ構造です。

イメージ

[ "りんご", "みかん", "バナナ" ]
   0        1        2

💡 配列は0番目から始まる点が重要です。


2. 配列の基本的な作り方

書き方①(最も一般的)

const fruits = ["りんご", "みかん", "バナナ"];

書き方②(new Array)

const fruits = new Array("りんご", "みかん", "バナナ");

👉 初心者は①の書き方でOK


3. 配列の値を取り出す方法

console.log(fruits[0]); // りんご
console.log(fruits[2]); // バナナ

注意

存在しない番号を指定すると

console.log(fruits[5]); // undefined

4. 配列の追加・削除・変更

■ 要素を追加する

末尾に追加(push)

fruits.push("ぶどう");

先頭に追加(unshift)

fruits.unshift("いちご");

■ 要素を削除する

末尾を削除(pop)

fruits.pop();

先頭を削除(shift)

fruits.shift();

■ 要素を変更する

fruits[1] = "オレンジ";

5. 配列の長さ(length)

console.log(fruits.length);

📌 要素数 = length


6. 配列とループ処理

■ for文

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

■ forEach(よく使う)

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

7. よく使う配列メソッド【超重要】

■ map(新しい配列を作る)

const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);

結果:

[2, 4, 6]

■ filter(条件に合うものだけ)

const numbers = [1, 2, 3, 4];

const even = numbers.filter(num => num % 2 === 0);

結果:

[2, 4]

■ find(最初に見つかった1つ)

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 25 }
];

const user = users.find(u => u.age === 25);

■ includes(含まれているか)

fruits.includes("りんご"); // true

■ indexOf(位置を取得)

fruits.indexOf("みかん");

8. 配列とオブジェクトの違い

項目配列オブジェクト
管理方法順番名前(キー)
取り出し[番号].キー
用途リスト・一覧情報のまとまり

9. 実践例:配列 × オブジェクト

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 22 }
];

users.forEach(user => {
  console.log(user.name);
});

10. 初心者がつまずくポイント

  • インデックスは 0から始まる
  • map / filter は 元の配列を変更しない
  • push / pop は 元の配列を変更する

まとめ

  • 配列は複数の値を順番に管理する仕組み
  • 0番目から始まる
  • push / pop / map / filter は超重要
  • ループと組み合わせると強力
  • 実務で最もよく使うデータ構造の1つ

-JavaScript