サンプルコードで身につける: タプル型

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1名前と年齢の組

[string, number] という「位置ごとに型が決まった配列」の最も基本の形です。0番目は必ず文字列、1番目は必ず数値で、順序を入れ替えるとエラーになることを確かめます。

TypeScript

const person: [string, number] = ["Taro", 28];

console.log(person[0]); // string
console.log(person[1]); // number

// const wrong: [string, number] = [28, "Taro"]; // 順序が違うとエラー

2座標をタプルで表す

x と y の2つの数値を [number, number] の組として持つ例です。座標やサイズ(幅と高さ)のように「2つで1つの意味になる値」はタプルの典型的な使いどころです。

TypeScript

const pointA: [number, number] = [3, 4];
const pointB: [number, number] = [0, 0];

const diffX = pointA[0] - pointB[0];
const diffY = pointA[1] - pointB[1];
const distanceValue = Math.sqrt(diffX * diffX + diffY * diffY);

console.log("2点間の距離: " + distanceValue);

3分割代入で受け取る

タプルは分割代入と組み合わせると、それぞれの要素に名前を付けて取り出せます。取り出した変数にも位置どおりの型(string と number)が引き継がれるのがポイントです。

TypeScript

const menuEntry: [string, number] = ["カフェラテ", 520];

// 分割代入すると、位置ごとの型もそのまま引き継がれる
const [drinkName, drinkPrice] = menuEntry;

console.log(drinkName); // string
console.log(drinkPrice); // number
console.log(drinkName + "は" + drinkPrice + "円です");

4タプルの配列で対応表を作る

[string, number][] とすれば「商品名と在庫数の組」を並べた一覧を表せます。for...of のループ内で直接分割代入する書き方は、CSV のような行データの処理でよく使われます。

TypeScript

const stockEntries: [string, number][] = [
  ["コーヒー", 10],
  ["紅茶", 25],
  ["ジュース", 8],
];

// ループの中で分割代入しながら処理できる
for (const [itemLabel, stockValue] of stockEntries) {
  console.log(itemLabel + ": 残り" + stockValue + "個");
}

5最小値と最大値を組で持つ

集計で得られる「最小値と最大値」のような2つで1組の結果をタプルにまとめる実務寄りの例です。位置に意味があるので、受け取る側は分割代入で意図の伝わる名前を付けられます。

TypeScript

const examScores: number[] = [67, 92, 80, 45, 88];

// 最小値と最大値という「2つで1組」の結果をタプルにまとめる
const scoreRange: [number, number] = [
  Math.min(...examScores),
  Math.max(...examScores),
];

const [lowestScore, highestScore] = scoreRange;
console.log("最低点: " + lowestScore);
console.log("最高点: " + highestScore);