JavaScriptの配列について、
- 自分の理解
- わからないときこれを見ればバッチリ
になるようにまとめました
☞ 配列ってなに？
配列とは、1つの変数で複数のデータをまとめて管理できるデータ構造です。
例えば、5人の名前を1人ずつ変数に入れるより、配列にまとめた方がずっとスッキリ書けます！
const names = ["太郎", "花子", "次郎", "三郎", "四郎"];
☞ 配列の作り方
JavaScriptでは[]を使って配列を作ります。
const fruits = ["りんご", "バナナ", "みかん"];
要素の番号 (index)
配列の要素には0から番号（インデックス）が付きます。
console.log(fruits[0]); // りんご
console.log(fruits[2]); // みかん
☞ 配列に関する主要メソッド一覧
| メソッド／プロパティ | 説明 |
|---|---|
push() |
末尾に要素を追加 |
pop() |
末尾から要素を削除 |
unshift() |
先頭に要素を追加 |
shift() |
先頭から要素を削除 |
splice() |
任意の場所の要素を削除/置換 |
slice() |
配列を切り出し (元配列は変わらない) |
concat() |
配列を結合 |
includes() |
要素が含まれているか調べる |
indexOf() |
要素の位置を返す |
find() |
条件に合わす要素を1つ取得 |
filter() |
条件を満たすすべての要素を取得 |
forEach() |
各要素に対し処理 |
map() |
各要素を変換し新配列を作成 |
length |
配列の要素数を取得（プロパティ） |
☞ 各メソッドの使い方
push() と unshift()（要素の追加）
const fruits = ["りんご", "バナナ"];
fruits.push("みかん"); // 末尾に追加
fruits.unshift("ぶどう"); // 先頭に追加
console.log(fruits); // ["ぶどう", "りんご", "バナナ", "みかん"]
pop() と shift()（要素の削除）
fruits.pop(); // 末尾を削除
fruits.shift(); // 先頭を削除
console.log(fruits); // ["りんご", "バナナ"]
splice()（任意の場所の削除・置換）
fruits.splice(0, 1); // 先頭から1要素を削除
console.log(fruits); // ["バナナ"]
length（要素数の取得）
lengthはメソッドではなくプロパティです。()はつけずに使います。
console.log(fruits.length); // 2
プロパティとメソッドの違い🔍
-
メソッドは「動作をするもの」。何かしらの処理を実行する関数。呼び出すときに () をつける
-
プロパティは「データの状態を表すもの」。値を参照するだけで () は不要。ただしlengthのように書き込みできるプロパティもある。
🧪 区別ポイント
| プロパティ | メソッド | |
|---|---|---|
| 使うときの形 | fruits.length | fruits.push() |
| () が必要か？ | なし | あり |
| 意味 | 「情報を見たり変えたり」 | 「処理を実行する」 |
| 例 | .length, .name | .push(), .pop() |
🧪 具体例
const fruits = ["りんご", "バナナ"];
fruits.push("みかん"); // メソッド → 動作する
console.log(fruits.length); // プロパティ → 値を参照するだけ
const fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits.length); // 3（読み取り）
fruits.length = 2;
console.log(fruits); // ["りんご", "バナナ"]（書き換え）
☝ length は 要素数を示すプロパティ ですが、実は書き換えることもできる。
concat() と スプレッド構文（配列の結合）
const a = [1, 2];
const b = [3, 4];
const combined = a.concat(b);
console.log(combined); // [1, 2, 3, 4]
const spread = [...a, 99, ...b];
console.log(spread); // [1, 2, 99, 3, 4]
要素の検索系
indexOf()（位置を知りたい）
const items = ["赤", "青", "黄"];
console.log(items.indexOf("青")); // 1
includes()（含まれているか）
console.log(items.includes("黄")); // true
find()（条件に合う最初の1要素を取得）
const nums = [5, 12, 18, 25];
const result = nums.find(n => n > 15);
console.log(result); // 18
filter()（条件に合うすべての要素を取得）
const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [12, 18]
slice()（指定範囲を抽出）
const alphabets = ["a", "b", "c", "d", "e"];
console.log(alphabets.slice(1, 4)); // ["b", "c", "d"]
💡 例えば
slice(2, 4)は index 2 から index 4 "手前"まで の要素を取り出します。const arr = ["a", "b", "c", "d", "e"]; console.log(arr.slice(2, 4)); // ["c", "d"]
反復処理メソッド
forEach()のいろいろな書き方
const users = ["Alice", "Bob", "Charlie"];
// アロー関数（1行）
users.forEach(user => console.log(user));
// アロー関数（ブロック）
users.forEach(user => {
console.log("こんにちは、" + user);
});
// 通常のfunction
users.forEach(function(user) {
console.log("Hello, " + user);
});
map()のいろいろな書き方
const prices = [100, 200, 300];
// アロー関数（短く書ける）
const withTax1 = prices.map(price => price * 1.1);
// アロー関数（ブロック形式）
const withTax2 = prices.map(price => {
return price * 1.1;
});
// 通常のfunctionで書く
const withTax3 = prices.map(function(price) {
return price * 1.1;
});
console.log(withTax1); // [110, 220, 330]
console.log(withTax2); // [110, 220, 330]
console.log(withTax3); // [110, 220, 330]
📌 書き方の違いと使い分け
処理が1行で終わるなら、アロー関数が見やすくておすすめ
this を使いたいときはアロー関数ではなく function を使うべき
ブロック形式にすると複雑な処理にも対応できる
☞ まとめ
JavaScriptの配列はとても柔軟で、たくさんの便利なメソッドがあります。