こんにちは。TypeScriptの世界へようこそ！
「型定義」なんて言葉を聞くと、なんだか冷たくて難しそうな壁を感じてしまうかもしれませんね。でも大丈夫です。実はTypeScriptの型は、あなたのコードを守ってくれる「頼もしい相棒」なんです。
今日は、TypeScriptの基本中の基本でありながら、現場でも毎日必ず使う「配列とタプルの分割代入」について、お買い物に例えてお話ししますね。
—
1. 配列とタプル、どう使い分ける？
まず、この2つの違いをイメージしましょう。
- 配列（Array）： 「カゴの中身」。リンゴが何個入っていても、全部「フルーツ」として扱います。
- タプル（Tuple）： 「お弁当箱」。1番目はメインのおかず、2番目はご飯、3番目はデザート……と、「順番と中身」が決まっているのが特徴です。
TypeScriptで書くとこうなります。
// 配列：数字なら何個入っていてもOK
const numbers: number[] = [1, 2, 3, 4, 5];
// タプル：1番目は文字列、2番目は数字と決まっている
const item: [string, number] = [“りんご”, 150];
—
2. 分割代入で「中身を取り出す」ときの話
お買い物カゴから商品を取り出すとき、「これなんだっけ？」と迷うことはありませんよね。コードでも同じで、中身を一つずつ変数に取り出す「分割代入」というテクニックが便利です。
配列の分割代入
配列は中身が同じ種類なので、取り出すときも比較的シンプルです。
const prices: number[] = [100, 200, 300];
// カゴから順番に取り出すイメージ
const [cheap, normal, expensive] = prices;
console.log(cheap); // 100
タプルの分割代入（ここが重要！）
タプルは「順番」に意味があるからこそ、取り出すときも型を意識する必要があります。
// [商品名, 価格] というルール
const product: [string, number] = [“コーヒー”, 300];
// 名前をつけて取り出す
const [name, price] = product;
// TypeScriptは「nameはstringだな」「priceはnumberだな」と完璧に把握しています
console.log(`${name}は${price}円です。`);
もしここで、`price`を計算に使おうとして文字を足そうとすると、TypeScriptが「それは数字だから計算できるよ！」あるいは「文字列と数字を混ぜるのは危ないよ！」と、優しく止めてくれます。これが型定義の魔法なんです。
—
3. 「デフォルト値」という予備の準備
お買い物をしているとき、「もし在庫がなかったら代わりのものを…」と考えることがありますよね。コードでも、値がなかったときのために「デフォルト値」を設定できます。
// 2番目の要素（価格）がなかったら、0円として扱うという設定
const data: [string, number?] = [“おにぎり”]; // 2番目はあってもなくても良い（?を付ける）
const [itemName, itemPrice = 0] = data;
console.log(itemPrice); // 値がないので、自動的に 0 が代入されます
この `itemPrice = 0` のように書くことで、「もしデータが届かなくても、0円ということにしておこう」という安全策を張れるんです。これがあれば、プログラムがいきなりエラーで止まってしまう事故を未然に防げます。
—
4. 最後に：つまずいたあなたへ
TypeScriptの型定義を初めて見ると、「いちいち型を書くなんて面倒だな」と感じるかもしれません。でも、これは「未来の自分へのプレゼント」なんです。
数ヶ月後にこのコードを見返したとき、「あれ、この配列の1番目ってなんだっけ？」と悩まなくて済むように、今のあなたがヒントを残してあげているんです。
最初は `any`（なんでもいい型）に逃げたくなる気持ちもわかります。でも、少しずつ「これは文字列」「これは数字」と型を指定する癖をつけていくと、だんだんとTypeScriptがあなたの意図を完璧に汲み取ってくれるようになります。
焦らなくて大丈夫。エラーが出たら、「TypeScriptがまた一つ、自分の間違いを教えてくれたぞ。ありがとう！」くらいの気持ちで、一つひとつ解決していきましょう。
あなたのエンジニアライフが、TypeScriptと共に少しでも快適で楽しいものになりますように！応援しています。
コメント