配列とオブジェクト — データを入れて扱う

1.配列 — 順番のあるリスト

これまでは変数一つに値を一つ入れてきました。けれども、生徒30人の点数を30個の変数に入れるわけにはいきません。配列は、複数の値を順番どおりに一つの名前の下に入れるデータ型です。角かっこの中に値をカンマで並べて [70, 85, 90] のように作ります。第4講で for...of を使って一つずつ取り出したあのリストが配列です。

配列の値は、位置の番号であるインデックスで取り出します。インデックスは1ではなく0から始まるので、最初の値は arr[0]、二番目の値は arr[1] です。値の個数は arr.length で、最後の値のインデックスはいつも arr.length - 1 です。第4講で見た off-by-one の失敗は、まさにここで起きます。

存在しないインデックスを読んでもエラーにはならず、undefined が出てきます。長さが3の配列で arr[3] や arr[-1] を読むと、どちらも undefined です。後ろから数えたいときは arr.at(-1) を使えば最後の値が出てきます。配列には数値・文字列・真偽値を混ぜて入れることもできますが、実際には同じ種類の値を入れたほうが扱いやすくなります。

const fruits = ['りんご', 'なし', 'みかん'];
console.log(fruits[0], fruits[2]);
console.log(fruits.length);
console.log(fruits[fruits.length - 1]);
console.log(fruits[3]);
console.log(fruits.at(-1));

りんご みかん
3
みかん
undefined
みかん

2.配列を変える・探す — `push`、`pop`、`includes`、`indexOf`

push は配列の末尾に値を追加し、pop は末尾の値を取り出して返しながら配列から取り除きます。arr[1] = 'ぶどう' のようにインデックスへ直接入れて値を変えることもできます。ここで混同しやすい点があります。const で作った配列でも、中身は変えられるのです。const が防ぐのは「その名前に別の配列を入れ直すこと」であって、配列の中のマスを変えることではありません。

値が入っているかを確かめるときは、includes が真偽を、indexOf が位置を返します。indexOf は見つからなければ -1 を返します。第4講で「見つからない」を -1 で表したのと同じ約束です。そのため if (arr.indexOf(x)) のように書くと、最初のマス（0）にあるときに偽になり、見つからなかった場合（-1）は真になってしまいます（第3講の truthy・falsy）。あるかどうかだけを知りたいなら includes を使いましょう。

配列を別の変数に入れると、コピーではなく「同じ配列を指す名前」がもう一つできます。下のコードで b に push すると、a も変わります。同じ家の住所を二人で分け合ったようなものです。本当に別のコピーが必要なら、[...a] のように展開して新しい配列を作ります。オブジェクトもまったく同じように動きます。

const cart = ['牛乳', 'パン'];
cart.push('卵');
console.log(cart, cart.length);
const last = cart.pop();
console.log(last, cart);
console.log(cart.includes('パン'), cart.indexOf('パン'));
console.log(cart.indexOf('海苔'));

[ '牛乳', 'パン', '卵' ] 3
卵 [ '牛乳', 'パン' ]
true 1
-1

const a = [1, 2];
const b = a;
b.push(3);
console.log(a);
const c = [...a];
c.push(4);
console.log(a, c);

[ 1, 2, 3 ]
[ 1, 2, 3 ] [ 1, 2, 3, 4 ]

3.オブジェクト — 名札の付いたマス

配列が「何番目か」で値を探すなら、オブジェクトは「名前」で値を探します。波かっこの中に キー: 値 をカンマで並べて、{ name: '健太', age: 20 } のように作ります。キーと値の組の一つひとつをプロパティと言います。会員一人、商品一つのように、いくつもの情報が集まって一つの対象を成すときにオブジェクトがよく合います。

プロパティは user.name のようにドットで読むのがふつうで、キーの名前が変数に入っているときは user[key] のように角かっこで読みます。存在しないプロパティを読むと、配列の存在しないマスと同じく undefined が出てきます。ところが、その undefined からさらにプロパティを読もうとすると、今度は TypeError が出ます。下のコードがその例で、キーの名前を nmae と打ち間違えたことが原因です。メッセージの正確な文言はブラウザーによって少しずつ違います。

このエラーは、AIが書いたコードを実際のデータにつないだときに、もっともよく見るエラーの一つです。たいていは、データにあるキーの名前とコードが期待したキーの名前が違うか、一部の項目だけにそのプロパティが欠けているときに起きます。エラーメッセージのかっこ内の (reading 'length') は「何を読もうとして失敗したか」を教えてくれるので、そのすぐ前の値がなぜ undefined なのかをさかのぼって探せばよいのです（第8講）。

const user = { name: '健太', age: 20 };
console.log(user.name, user.age);
user.age = 21;
user.city = '大阪';
console.log(user);
const key = 'name';
console.log(user[key]);
console.log(user.email);

健太 20
{ name: '健太', age: 21, city: '大阪' }
健太
undefined

const user = { name: '健太' };
console.log(user.nmae);
console.log(user.nmae.length);

undefined
TypeError: Cannot read properties of undefined (reading 'length')

4.オブジェクトの配列 = 表

実際のデータの大半は「オブジェクトの配列」の形をしています。配列の各マスが表の一行で、オブジェクトのキーが列の名前です。Excel のようなスプレッドシートの表一枚をコードに移したものだと考えればよいでしょう。下の表とコードは、同じ架空の販売記録を二通りに表したものです。

この形なら、第4講の繰り返し文といま学んだプロパティの読み取りを組み合わせるだけで、ほとんどの計算ができます。行を一つずつ取り出し（for...of）、必要な列を読み（row.qty）、積み上げたり数えたりします。第9講では、テキストで書かれた表をこの形に変えて、合計・平均・グループ別の合計を実際に求めてみます。

const sales = [
  { item: 'ノート', price: 1500, qty: 4 },
  { item: '鉛筆', price: 500, qty: 10 },
  { item: '消しゴム', price: 800, qty: 3 },
];
let revenue = 0;
for (const row of sales) {
  revenue += row.price * row.qty;
}
console.log(revenue);

13400

5.`map`・`filter`・`reduce` 入門

配列には、繰り返し文の代わりになるメソッドがあります。もっともよく使う三つが map・filter・reduce です。三つとも第5講のアロー関数を受け取り、配列の値ごとにその関数を呼び出してくれます。map は値ごとに変換した結果で新しい配列を作り（長さは同じ）、filter は関数が真を返した値だけを選んで新しい配列を作り（長さは同じか短い）、reduce は値をたたみ込んで合計のような値一つを作ります。

大事なのは、map と filter が元の配列を変えずに新しい配列を返すという点です。第5講の純粋関数と同じ性質なので、結果を予測しやすくなります。reduce には二番目の引数として初期値を必ず渡しましょう。reduce((s, x) => s + x, 0) の 0 が、第4講の累積パターンの let sum = 0 にあたります。初期値を省くと、空の配列で TypeError が出ます。

はじめは繰り返し文のほうが読みやすいかもしれませんが、それでかまいません。繰り返し文でできることを短く書く方法にすぎないからです。ただ、AIが書いたコードにはこの三つが鎖のようにつながって出てくることが多いので、一段ずつ区切って途中の結果を出力しながら読む練習をしておくとよいでしょう。

const prices = [1500, 500, 800, 12000];
const withTax = prices.map((p) => p * 1.1);
console.log(withTax.map((p) => Math.round(p)));
const cheap = prices.filter((p) => p < 1000);
console.log(cheap);
const total = prices.reduce((s, p) => s + p, 0);
console.log(total);
console.log(prices);

[ 1650, 550, 880, 13200 ]
[ 500, 800 ]
14800
[ 1500, 500, 800, 12000 ]

6.JSON — データをやり取りするための文字の形式

JSONは、オブジェクトや配列を文字（文字列）で書き表す形式です。名前は JavaScript から来ていますが、いまではほとんどすべてのプログラミング言語やウェブサービスがデータのやり取りに使っています。設定ファイル、サーバーの応答、アプリが保存するデータの多くがJSONです。JSON.stringify は値をJSONの文字に変換し、JSON.parse はJSONの文字を値に戻します。

JSONは JavaScript のオブジェクトの書き方に似ていますが、より厳格です。キーは必ずダブルクォートで囲み、文字列もダブルクォートしか使えません。最後の項目のあとのカンマは許されず、コメントも書けません。関数や undefined は入れられないので、stringify すると、オブジェクトのプロパティなら抜け落ち、配列の中なら null に変わります。規則を一つでも破ると、JSON.parse が SyntaxError を出します。

JSONが長い一行につながっていると読みにくいものです。そんなときはJSONフォーマッターのツールに貼り付ければインデントを付けてくれ、規則が崩れている場所を指摘してくれることもあります。ただし、実際の会員情報のように個人情報が入ったデータは外部のツールやAIに貼り付けず、構造だけが同じ架空のデータに置き換えて確かめてください（第10講）。

const item = { name: 'ノート', price: 1500, tags: ['文房具'] };
const text = JSON.stringify(item);
console.log(text);
console.log(typeof text);
const back = JSON.parse(text);
console.log(back.price + 500);

{"name":"ノート","price":1500,"tags":["文房具"]}
string
2000

const bad = "{ name: 'ノート' }";
console.log(JSON.parse(bad));

SyntaxError: Expected property name or '}' in JSON at position 2 (line 1 column 3)