---
layout: "@/layouts/MarkdownLayout.astro"
---

import RenderFile from "@/components/RenderFile";
import RenderHtml from "@/components/RenderHtml";

export const title = "まとめて処理する (配列)";

# {title}

あなたはインターネット上で、お買い物をしたとします。  
今回購入したものは3つあり、各々以下の価格でした。

| 商品 | 価格 |
|:--|--:|
| USB A to C ケーブル | 1290円 |
| ラムネ 550g | 859円 |
| ワイヤーストリッパー | 1247円 |

例えば力技で、以下のように合計金額を計算することもできます。

```js
const price1 = 1290;
const price2 = 859;
const price3 = 1247;

const total = price1 + price2 + price3;
console.log("合計:", total); // 3396
```

確かに合計金額は計算できているようですね。  
ただ、以下の場合はどうでしょうか？

買った数が30個だったら、変数を`price1`から`price30`まで用意すればいいのでしょうか？  
買った数が1個だったら、とりあえず用意した変数に`0`を入れておけばいいのでしょうか？

このような似たようなものをたくさん扱いたいときは、**配列**を使いましょう。

[プログラミングで扱うもの - 配列](./011-what-program-do#%E9%85%8D%E5%88%97)

## TOC

## 情報をまとめる

例えば、価格の情報を配列としてまとめてみました。

```js
const prices = [1290, 859, 1247];
```

配列にすると、価格の情報がいくつ出会っても1つの変数`prices`でまとめて扱うことができます。  
もちろん何かしらのデータを用意する必要はありますが、その数に応じて変数の数を増やすといったことを考える必要がなくなります。

```js
const prices = [
  1290,
  859,
  // ...後ろにいくつあっても大丈夫
];
```

<br />

商品名と価格をまとめた、オブジェクトの配列にしても良いでしょう。

```js
const items = [
  { name: "USB A to C ケーブル", price: 1290 },
  { name: "ラムネ 550g", price: 859 },
  { name: "ワイヤーストリッパー", price: 1247 },
];
```

## データを扱う

合計金額を計算することを考えてみましょう。  
合計金額を計算するということは、買った商品の価格を**すべて足し合わせる**ということです。

ところでJavaScriptに関わらずプログラム言語には、**繰り返し処理**を行うための仕組みがあります。  
この繰り返し処理と配列は非常に相性が良いです。

この繰り返し処理を使って、配列の中に入っている価格を1つずつ取り出して足し合わせるという方法で合計金額を計算してみましょう。

### for (昔ながらの書き方)

配列はその中身に対して、`0`から**index、添字**という番号が振られています。  
また、配列にはいくつの要素が入っているかを調べるための`length`というプロパティがあります。

繰り返し処理でこれらの情報を使ってindexを要素の数だけ増やすことで、配列の中身を1つずつ取り出す書き方です。

繰り返し処理は、言語によって様々な書き方があります。  
しかしこの書き方は昔ながらの方法であるため、他の言語で同じような書き方をサポートしていることが多いです。  
使うことは少ないかもしれませんが、覚えておくと良いでしょう。

```js
const prices = [1290, 859, 1247];

let total = 0;
for (let index = 0; index < prices.length; index++) {
  // 直前までの値に、配列のi番目の値を足す
  total = total + prices[index];
}

console.log("合計:", total); // 合計: 3396
```

<br />

JavaScriptでは多くの処理が書けますが、`for`文だけは例外的に特殊な書き方をしています。

`初期値; 継続条件; 1ループ終了時の処理`の3つの部分に分かれていて、それぞれを`;`で区切る必要があります。

```js
for (初期値; 継続条件; 1ループ終了時の処理) {
  繰り返し処理の内容
}
```

今回の例では、以下のようになっています。

**初期値**

配列の先頭から末尾までの金額をすべて足したいので、先頭を表す`0`を指定しています。
これを`let index = 0`と指定しています。

この`index`は値を変化させる必要があるため、`let`で宣言しています。

**継続条件**

例えば要素数が3の場合、取りうるindexは`0`、`1`、`2`の3つです。  
これらはすべて要素数である`3`より小さい値なので、それを判定する`index < prices.length`と指定しています。

**1ループ終了時の処理**

例えば要素数が3の場合、取りうるindexは`0`、`1`、`2`の3つです。  
配列の中身をすべて取り出すには、このindexの値を1つずつ増やしていくのが最も簡単です。

`index = index + 1`などと書くこともできますが、同様に値を1だけ増やすという意味である、`index++`と書くことが一般的です。

### for-of (新しい書き方)

```js
const prices = [1290, 859, 1247];

for (const price of prices) {
  console.log("価格:", price);
}
```

### forEach (配列のメソッド)

```js
const prices = [1290, 859, 1247];

prices.forEach((price) => {
  console.log("価格:", price);
});
```