💡 この記事でわかること
- 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]); // undefined4. 配列の追加・削除・変更
■ 要素を追加する
末尾に追加(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つ