JavaScript 配列まとめ（初心者向け）



JavaScriptの**配列**について、

- 自分の理解
- わからないときこれを見ればバッチリ

になるようにまとめました:grinning:



## ☞ 配列ってなに？

配列とは、**1つの変数で複数のデータをまとめて管理できるデータ構造**です。

例えば、5人の名前を1人ずつ変数に入れるより、配列にまとめた方がずっとスッキリ書けます！

```js
const names = ["太郎", "花子", "次郎", "三郎", "四郎"];
```



## ☞ 配列の作り方

JavaScriptでは`[]`を使って配列を作ります。

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



### 要素の番号 (index)

配列の要素には0から番号（インデックス）が付きます。

```js
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()`（要素の追加）

```js
const fruits = ["りんご", "バナナ"];
fruits.push("みかん");     // 末尾に追加
fruits.unshift("ぶどう");  // 先頭に追加
console.log(fruits); // ["ぶどう", "りんご", "バナナ", "みかん"]
```

### `pop()` と `shift()`（要素の削除）

```js
fruits.pop();              // 末尾を削除
fruits.shift();            // 先頭を削除
console.log(fruits); // ["りんご", "バナナ"]
```

### `splice()`（任意の場所の削除・置換）

```js
fruits.splice(0, 1);       // 先頭から1要素を削除
console.log(fruits); // ["バナナ"]
```

### `length`（要素数の取得）

`length`は**メソッドではなくプロパティ**です。`()`はつけずに使います。

```js
console.log(fruits.length); // 2
```
:::note info
***プロパティとメソッドの違い***🔍 


- **メソッド**は「動作をするもの」。何かしらの処理を実行する関数。呼び出すときに () をつける

- **プロパティ**は「データの状態を表すもの」。値を参照するだけで () は不要。ただしlengthのように書き込みできるプロパティもある。

🧪 区別ポイント	
|  | プロパティ   |メソッド |
| ------------ | ------------------- |------------------- |
| 使うときの形    | fruits.length           |fruits.push()|
|() が必要か？|なし|あり|
|意味	|「情報を見たり変えたり」|「処理を実行する」|
|例|.length, .name|.push(), .pop()|
	
	

🧪 具体例
```js
const fruits = ["りんご", "バナナ"];
fruits.push("みかん");       // メソッド → 動作する
console.log(fruits.length);  // プロパティ → 値を参照するだけ
```
```js
const fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits.length); // 3（読み取り）
fruits.length = 2;
console.log(fruits);        // ["りんご", "バナナ"]（書き換え）
```
☝ length は 要素数を示すプロパティ ですが、実は書き換えることもできる。

:::



### `concat()` と スプレッド構文（配列の結合）

```js
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()`（位置を知りたい）

```js
const items = ["赤", "青", "黄"];
console.log(items.indexOf("青")); // 1
```

#### `includes()`（含まれているか）

```js
console.log(items.includes("黄")); // true
```

#### `find()`（条件に合う最初の1要素を取得）

```js
const nums = [5, 12, 18, 25];
const result = nums.find(n => n > 15);
console.log(result); // 18
```

#### `filter()`（条件に合うすべての要素を取得）

```js
const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [12, 18]
```

#### `slice()`（指定範囲を抽出）

```js
const alphabets = ["a", "b", "c", "d", "e"];
console.log(alphabets.slice(1, 4)); // ["b", "c", "d"]
```

> 💡 例えば `slice(2, 4)` は **index 2 から index 4 "手前"まで** の要素を取り出します。
>
> ```js
> const arr = ["a", "b", "c", "d", "e"];
> console.log(arr.slice(2, 4)); // ["c", "d"]
> ```

### 反復処理メソッド

#### `forEach()のいろいろな書き方`

```js
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()のいろいろな書き方`

```js
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の配列はとても柔軟で、たくさんの便利なメソッドがあります。