TypeScript：配列操作と型

出力 == ノートPC, マウス

map で name を取り出す。結果は string[] になるので join できる。

type Product = { name: string; price: number };

const items: Product[] = [
  { name: "ノートPC", price: 128000 },
  { name: "マウス", price: 3200 },
];

console.log(items.map((i) => i.name).join(", "));

map で型が Product[] から string[] に変わる。だから join が使える——もし数値を返していたら number[] になり、join の挙動も変わる。

解答 == A

filter は要素を減らすだけで、変換はしない。

A

filter は件数を減らすが型は変えない。だから null を除外しても、型の上では null が残ったままになる——ここが落とし穴。

出力 == 2

filter で条件に合うものだけを残し、length で数える。

type Product = { name: string; price: number };

const items: Product[] = [
  { name: "ノートPC", price: 128000 },
  { name: "マウス", price: 3200 },
  { name: "キーボード", price: 8500 },
];

console.log(items.filter((i) => i.price < 10000).length);

filter の中の i は Product と推論される。i.pric のような打ち間違いは、その場でエラーになる。

const prices = [128000, 3200, 8500];

const total = prices.____((sum, p) => sum + p, 0);

console.log(total);

出力 == 139700

配列を1つの値にまとめるメソッド。小文字6文字。

reduce

初期値の 0 が number なので、結果も number と推論される。初期値を "" にすれば文字列の連結になる。

解答 == B

見つからない場合がある。

B

find は見つからないと undefined を返す。そのまま .name と書くとエラーになるので、?. や条件分岐が必要（TS08）。

出力 == PC:1, 周辺機器:2

reduce> と型引数を明示する。初期値は {}。

type Product = { name: string; category: string };

const items: Product[] = [
  { name: "ノートPC", category: "PC" },
  { name: "マウス", category: "周辺機器" },
  { name: "キーボード", category: "周辺機器" },
];

const counts = items.reduce<Record<string, number>>((acc, i) => {
  acc[i.category] = (acc[i.category] ?? 0) + 1;
  return acc;
}, {});

console.log(
  Object.entries(counts)
    .map(([k, v]) => `${k}:${v}`)
    .join(", ")
);

型引数を書かないと、初期値の {} から「空オブジェクト」と推論されてエラーになる。reduce でオブジェクトを組み立てるときは型引数の明示が定石。

const mixed: (string | null)[] = ["a", null, "b"];

const strs = mixed.filter((v): v ____ string => v !== null);

console.log(strs.join(","));

出力 == a,b

型ガード関数の書き方（TS09）。2文字のキーワード。

is

これを書かないと (string | null)[] のまま。null を除いたつもりでも型が変わらないので、join の前にエラーになることがある。

解答 == B

sort は破壊的メソッド（JS06）。

B

元の配列が書き換えられる。元の順序を保ちたいなら [...items].sort(…) とコピーしてから並べ替える。

出力 == ノートPC

[...items].sort((a, b) => b.price - a.price) とコピーしてから並べ替える。

type Product = { name: string; price: number };

const items: Product[] = [
  { name: "ノートPC", price: 128000 },
  { name: "マウス", price: 3200 },
  { name: "モニター", price: 45000 },
];

const sorted = [...items].sort((a, b) => b.price - a.price);

console.log(sorted[0].name);

スプレッド構文でコピーを作るのが安全な作法。元の配列を並べ替えてしまうと、他の場所での処理に影響が出る。

出力2行。true / true

some と every を使う（JS09）。どちらも boolean を返す。

type Product = { name: string; price: number };

const items: Product[] = [
  { name: "ノートPC", price: 128000 },
  { name: "マウス", price: 3200 },
];

console.log(items.some((i) => i.price > 100000));
console.log(items.every((i) => i.price >= 1000));

some は「1つでもあれば true」、every は「全部満たせば true」。条件チェックを簡潔に書ける。

出力3行が完全一致

map で売上を含む配列を作り、sort で並べ替え、forEach で番号付きで出力する。

type Item = { name: string; price: number; qty: number };

const items: Item[] = [
  { name: "ノートPC", price: 128000, qty: 3 },
  { name: "マウス", price: 3200, qty: 15 },
  { name: "モニター", price: 45000, qty: 1 },
];

const sales = items
  .map((i) => ({ name: i.name, total: i.price * i.qty }))
  .sort((a, b) => b.total - a.total);

sales.forEach((s, index) => {
  console.log(`${index + 1}位 ${s.name}：${s.total.toLocaleString()}円`);
});

map で新しい形のオブジェクトに変換している。{ name: string; total: number }[] という型が自動で推論されるので、sort の中でも a.total が使える。

出力 == PC:173,000円 / 周辺機器:11,700円

reduce> で金額を加算していく。

type Product = { name: string; category: string; price: number };

const items: Product[] = [
  { name: "ノートPC", category: "PC", price: 128000 },
  { name: "マウス", category: "周辺機器", price: 3200 },
  { name: "モニター", category: "PC", price: 45000 },
  { name: "キーボード", category: "周辺機器", price: 8500 },
];

const totals = items.reduce<Record<string, number>>((acc, i) => {
  acc[i.category] = (acc[i.category] ?? 0) + i.price;
  return acc;
}, {});

console.log(
  Object.entries(totals)
    .map(([k, v]) => `${k}:${v.toLocaleString()}円`)
    .join(" / ")
);

SQL07のGROUP BYと同じことをしている。?? 0 で初回の未定義に対処するのは、SQL05のCOALESCEと同じ発想。

出力 == 600

filter((v): v is number => v !== null) と書く。これで number[] になり reduce できる。

const values: (number | null)[] = [100, null, 200, null, 300];

const numbers = values.filter((v): v is number => v !== null);
const total = numbers.reduce((sum, n) => sum + n, 0);

console.log(total);

型ガードを書かないと (number | null)[] のままで、reduce の中で sum + n がエラーになる。null が混ざる可能性を型が覚えているため。

出力3行が完全一致

filter で在庫ありと要発注を分ける。合計は reduce。

type Item = { name: string; stock: number };

const items: Item[] = [
  { name: "ノートPC", stock: 5 },
  { name: "マウス", stock: 42 },
  { name: "モニター", stock: 7 },
  { name: "サンプル", stock: 0 },
];

const inStock = items.filter((i) => i.stock > 0);
const lowStock = items.filter((i) => i.stock > 0 && i.stock < 10);
const total = items.reduce((sum, i) => sum + i.stock, 0);

console.log(`全${items.length}件／在庫あり${inStock.length}件`);
console.log(
  `要発注：${lowStock.map((i) => `${i.name}(${i.stock})`).join(", ")}`
);
console.log(`在庫総数：${total}個`);

同じ配列に対して複数の集計を行う典型パターン。filter は元の配列を変えないので、何度でも別の条件で絞り込める。

出力2行。マウス：3,200円 / 該当なし

find の戻り値は Product | undefined。?. と ?? を組み合わせる（TS08）。

type Product = { name: string; price: number };

const items: Product[] = [
  { name: "ノートPC", price: 128000 },
  { name: "マウス", price: 3200 },
];

function findByName(name: string): Product | undefined {
  return items.find((i) => i.name === name);
}

for (const name of ["マウス", "存在しない商品"]) {
  const found = findByName(name);
  console.log(
    found ? `${found.name}：${found.price.toLocaleString()}円` : "該当なし"
  );
}

find の戻り値を素直に | undefined で表現している。呼び出し側は必ず存在チェックを迫られるので、確認漏れが起きない。