TypeScriptを勉強していると目にする「タプル（Tuple）」という言葉。
「配列（Array）と何が違うの？」「どういう時に使うの？」と疑問に思っている方も多いのではないでしょうか。
今回は、プログラム初心者の方に向けて、タプルを「中身が決まっているお弁当箱」に例えてわかりやすく解説します！
1. タプルを一言で言うと？
タプルを一言で表すと、「入れる順番と要素の型（種類）がかっちり決まった特別な配列」です。
通常の配列とタプルを、身近なもので例えてみましょう。
- 通常の配列：
バイキングのお皿好きな食べものを、好きな順番で、何個でも載せられます。「全部お肉」「フルーツだけ」でもOKです。 - タプル：仕切りが決まっている専用弁当箱
「1つ目の仕切りにはご飯（文字列）、2つ目の仕切りにはハンバーグ（数値）」のように、「どこに何を入れるか」があらかじめ厳密に決まっている状態です。
2. コードで見る「配列」と「タプル」の違い
実際にTypeScriptのコードで違いを見てみましょう。
通常の配列（Array）
// 文字列と数値が混ざった配列
const user: (string | number)[] = ["田中", 25];
// 順番を入れ替えてもエラーになりません
const user2: (string | number)[] = [25, "田中"];
// 要素をいくらでも増やせます
user.push("Tokyo"); 通常の配列（Union型）の場合、要素に文字列と数値が入ることは指定できますが、「どちらが先か」や「要素の数」までは縛れません。
タプル（Tuple）
// 1番目はstring（名前）、2番目はnumber（年齢）と厳密に指定
const user: [string, number] = ["田中", 25];
// 順番を逆にするとエラーになります！
// エラー: 型 'number' を型 'string' に割り当てることはできません。
const user2: [string, number] = [25, "田中"];
// 決まった数（この場合は2つ）と違うとエラーになります！
// エラー: 型 '[string, number, string]' を型 '[string, number]' に割り当てることはできません。
const user3: [string, number] = ["田中", 25, "Tokyo"]; このように、[string, number] と書くことで、「要素数は2つで、1番目は文字列、2番目は数値」というルールを強制できます。
3. タプルはどんな時に使うの？
「オブジェクト（{ name: "田中", age: 25 }）を使えばいいのでは？」と思うかもしれません。確かに普段の開発ではオブジェクトを使う場面が多いですが、タプルは次のようなケースで活躍します。
① Reactの useState のような戻り値を作りたいとき
Reactの useState を使ったことがある方は、知らず知らずのうちにタプルを使っています。
// useStateの返り値は [値, 更新用関数] というタプルになっている
const [count, setCount] = useState(0);「1番目に現在の状態、2番目にそれを更新する関数」という順番に意味があるペアを返すときに、タプルは最適です。
② 座標データ（X, Y）や緯度・経度を扱うとき
// [x座標, y座標]
const point: [number, number] = [10, 20];
// [緯度, 経度]
const location: [number, number] = [35.6812, 139.7671];わざわざ { x: 10, y: 20 } とプロパティ名を書くまでもない、短くシンプルなペアを表現したい場合に便利です。
4. 知っておきたい「読み取り専用（readonly）」の注意点
実は、TypeScriptの標準のタプルには「push や pop で要素を追加・削除できてしまう」というちょっとした穴があります。
完全に変更を防止したい場合は、readonly を頭につけるのがおすすめです！
// readonlyをつけることで完全に変更不可にする
const point: readonly [number, number] = [10, 20];
// エラーになって守られる！
point.push(30); // Property 'push' does not exist on type 'readonly [number, number]'.まとめ
- 配列：同じ型のデータをたくさん並べるのに適している（サイズは可変）
- タプル：型と順番が決まった少数のデータをまとめるのに適している（サイズ・型が固定）
タプルを使うことで、データの順番間違いや無効なデータの追加を防ぎ、より安全なコードを書くことができます。ペアや決まった形式のデータを扱う際は、ぜひ使ってみてください！
コメント