こんにちは！TypeScriptの世界へようこそ。
フロントエンドの最前線でコードを書き続けていると、たまに「型定義って、ただの縛り付けじゃないの？」と感じる瞬間があるかもしれませんね。でも大丈夫。TypeScriptの「型」は、実はあなたのコードを支えてくれる、頼もしい相棒なんです。
今日は、その中でも少しだけテクニカルな香りがする「タプル（Tuple）」の魔法についてお話しします。
—
タプルって何？：お弁当箱の仕切り
まずは基本から。普通の「配列（Array）」は、同じ種類のおかずがドサッと入った大きな箱のようなものです。「これ全部、唐揚げだよね！」と、中身が全部同じルールで扱えます。
一方で「タプル」は、決まった位置に、決まったものが入る「お弁当箱」だと思ってください。
// 0番目は名前(string)、1番目は年齢(number)という「お弁当箱」
type User = [string, number];
const person: User = [“田中さん”, 25];
// もし順番を間違えると？
// const wrong: User = [25, “田中さん”]; // 怒られます！「そこは名前を入れる場所だよ！」って。
この「決まった場所に、決まったルールがある」というのがタプルの心地よさです。
—
「infer」で中身をこっそり覗き見する
さて、ここからが本題。タプルという「お弁当箱」の中に、何が入っているのかを自動で取り出す魔法のキーワード`infer`を紹介します。
「infer」は英語で「推論する」という意味です。TypeScriptに「このタプルの型、バラしたら何が入ってるか君が調べてくれない？」とお願いするイメージですね。
// タプルの「中身の型」を取り出す型を作ってみましょう
type GetFirst
// 使い方
type Name = GetFirst<[string, number]>; // 結果は string になる！
type Age = GetFirst<[number, boolean, string]>; // 結果は number になる！
なぜこんなことが必要なの？
現場では、APIから「名前と年齢とIDがセットになったデータ」が飛んでくることがよくあります。その中から「名前の部分だけ型として抜き出したい」という時に、いちいち手書きで `string` と書くのは面倒ですよね？ `infer` を使えば、「構造さえ合っていれば、TypeScriptが勝手に中身を抽出してくれる」という自動化ができるんです。
—
タプルを普通の配列に広げる（展開）
タプルは「順番が大事」というルールがありますが、時々そのルールを解除して、普通の配列として扱いたくなることがあります。そんな時は「スプレッド構文（`…`）」を使います。
お弁当箱の仕切りをパカッと外して、中身を一つの大きなボウルに混ぜるイメージです。
const myTuple: [string, number] = [“りんご”, 100];
// スプレッド構文を使って配列に変換
const myArray = […myTuple];
// これで myArray は (string | number)[] になります。
// 「順番」という縛りが消えて、中身が混ざり合った配列になりました。
—
つまずきやすいポイント：`any` と `unknown` の違い
タプルを扱う際、中身がわからない時に `any` を使いたくなる誘惑に駆られませんか？ 気持ちはすごくわかります！でも、少しだけ待ってください。
- `any`: 「何でもいいよ！」という無責任な許可証。型チェックが完全に停止します。
- `unknown`: 「今は中身がわからないから、使う前にちゃんと確認してね！」という慎重なガードマン。
現場のアーキテクチャとしては、`any` は最終手段、まずは `unknown` を使うのが鉄則です。
// 中身が不明なタプルを受け取った時
function process(data: [unknown, unknown]) {
// data[0].toUpperCase(); // これだと「本当に文字列？」と怒られる
if (typeof data[0] === “string”) {
console.log(data[0].toUpperCase()); // 「なるほど、ここが文字列ならOKだね！」と納得してくれる
}
}
—
最後に：型と仲良くなるコツ
TypeScriptの型定義を勉強していると、パズルみたいで疲れてしまうことがあるかもしれません。そんな時は、一度コードから離れて「このデータは、どんな箱に入っていて、どういう順番で取り出したいんだっけ？」と、身近な道具に置き換えて考えてみてください。
タプルは、データの「住所」と「中身」を厳格に管理してくれる、とても頼もしいパートナーです。最初は難しく感じるかもしれませんが、一度このリズムを掴んでしまえば、あなたの書くコードは驚くほど堅牢で、かつ柔軟なものに変わります。
もし途中でエラーが出ても、それはTypeScriptが「もっと良い書き方があるよ！」と教えてくれているサインです。焦らず、一歩ずつ進んでいきましょう。
また何か詰まったら、いつでも聞きに来てくださいね。一緒にコードの山を登っていきましょう！
コメント