こんにちは。フロントエンドの現場でTypeScriptと格闘していると、時々「型ってなんて融通が利かないんだ！」と叫びたくなる夜がありますよね。でも、その厳しさこそが、私たちのコードを「壊れにくい宝物」にしてくれるんです。
今日は、TypeScriptの「タプル（Tuple）」という、ちょっとした箱のルールについてお話しします。特に、「これ、なくてもいいよね？」というオプショナル（省略可能）な要素の扱いについて、一緒に紐解いていきましょう。
—
タプルってそもそも何？「お弁当箱」で考えてみよう
TypeScriptのタプルとは、「決まった場所には、決まった型のデータが入る」という約束をしたリストのことです。
例えば、「名前（文字列）」と「年齢（数値）」が必ずこの順番で入る箱があったとします。
`[string, number]` と書くと、「1番目は名前、2番目は年齢ね！」とTypeScriptに教えることができます。
// 名前と年齢を格納するタプルの例
let userInfo: [string, number] = [“田中太郎”, 25];
これは完璧な並び順です。でも、現実の世界では「年齢はまだ決まってないから、後で教えるね」なんてこと、よくありますよね？
—
「？」をつける魔法：オプショナル要素
ここで登場するのが、おなじみの `?` （クエスチョンマーク）です。これをタプルの要素につけると、「ここはあってもなくてもいいよ（省略可能だよ）」という印になります。
例えば、「名前、年齢、そしてもしあればニックネーム」という3人セットを作りたいとしましょう。
// ニックネームだけは「？」をつけて省略可能に！
let userProfile: [string, number, string?] = [“佐藤花子”, 30];
// これでもエラーにはなりません。賢いですね！
let userProfileWithNick: [string, number, string?] = [“鈴木一郎”, 22, “いっちー”];
ここで注意！「ルールは厳しい」という現実
ここで一つ、初心者が一番つまずきやすいポイントがあります。それは、「オプショナル（?）な要素の後ろには、必須の要素を置いてはいけない」という鉄の掟です。
なぜか？ TypeScript君は、「どれが必須で、どれが省略可能か」を順番通りに判断しないと混乱してしまうからです。
例えるなら、お弁当箱の仕切りで、「おかずはあってもなくてもいいけど、ご飯は絶対入れてね」というルールがあったとき、「ご飯の場所を飛び越えて、おかずの場所を特定する」のは難しいですよね。
// ❌ ダメな例：? の後に必須の型が来るとTypeScriptは怒ります
// let invalidTuple: [string, number?, boolean] = [“田中”, 20, true];
// エラーメッセージ：「オプショナル要素の後に必須要素は置けません！」
「オプショナル」にするなら、それはリストの末尾側に寄せてあげるのが、TypeScriptと仲良くするコツです。
—
実践：なぜこの仕組みが現場で役に立つの？
実際の開発現場では、APIから送られてくるデータが「たまに空っぽ」なんてことは日常茶飯事です。そんな時、タプルを使って「基本の3つは絶対あるけど、4つ目はたまに欠けているデータ」を定義しておくと、バグを未然に防げます。
// APIから来る「座標データ」のイメージ
// [X座標, Y座標, (あれば)Z座標]
type Point = [number, number, number?];
const movePlayer = (pos: Point) => {
const [x, y, z] = pos;
// z がある時だけ処理をする、という安全な書き方ができます
if (z !== undefined) {
console.log(`3次元移動：x=${x}, y=${y}, z=${z}`);
} else {
console.log(`2次元移動：x=${x}, y=${y}`);
}
};
movePlayer([10, 20]); // 2次元移動
movePlayer([10, 20, 5]); // 3次元移動
—
最後に：つまずいても大丈夫
TypeScriptの型定義は、最初はパズルのように感じるかもしれません。「なんでこんなに細かく指定しなきゃいけないの？」と思うこともあるでしょう。
でも、この `?` を使って「ここはなくてもいいですよ」と明記しておくことは、未来の自分への優しさです。半年後のあなたがそのコードを見たとき、「ああ、ここはデータが空でもエラーにならないんだな」とすぐに理解できるはずですから。
まずは怖がらずに、`?` を一つ、ポンと置いてみてください。TypeScriptという相棒が、あなたのコードをしっかり支えてくれるようになりますよ。
それでは、良いコーディングライフを！
コメント