こんにちは。TypeScriptの世界へようこそ。
「型定義」なんて言葉を聞くと、なんだか数学の授業みたいで身構えてしまうかもしれませんね。でも大丈夫です。TypeScriptは、あなたのコードの「お守り」のようなもの。書いている最中に「それ、使い方がちょっと違いますよ！」と優しく教えてくれる、頼れる相棒だと思ってください。
今回は、TypeScriptの中でも特に使用頻度が高く、かつ非常に強力な「ユニオン型（Union Types）」について、現場の知見を交えながら紐解いていきましょう。
—
ユニオン型は「マルチプレイヤー」のチケット
ユニオン型を一言でいうなら、「この変数には、この型か、あの型のどちらかを入れていいよ」という『選択肢のチケット』です。パイプ記号 `|` を使って表現します。
例えば、Webサイトのお問い合わせフォームにある「連絡手段」をイメージしてみてください。
// 連絡手段は「メールアドレス」か「電話番号」のどちらかである必要がある
type ContactMethod = string | number;
let myContact: ContactMethod;
myContact = “info@example.com”; // 文字列なのでOK！
myContact = 09012345678; // 数値なのでこれもOK！
// myContact = true; // おっと！真偽値(boolean)は許可していないのでエラーになります
この `|` は、まさに「OR（または）」の役割を果たします。これによって、一つの変数に柔軟性を持たせることができるんですね。
—
なぜ「型ガード」が必要なの？
さて、ここで一つ壁にぶつかります。ユニオン型で「どっちも入れていいよ」と許可したはいいものの、「今、中身がどっちの型なのか？」をプログラムが判断できないと、いざ使うときに困ってしまうんです。
例えば、さっきの `myContact` を使って文字数をカウントしようとしたらどうなるでしょう？
function getLength(value: string | number) {
// value.length を使いたいけど、数値の時には .length なんて存在しない！
// TypeScriptは「数値かもしれないのに、そんなことしたらエラーになるよ！」と怒ります
return value.length; // ここでエラー！
}
この「怒り」を収めるために使うのが「型ガード（Type Guard）」です。これは、プログラムに「今、中身を確認するからちょっと待ってね」と伝えるプロセスです。
最も身近な「typeof」を使った型ガード
一番シンプルで確実なのが、`typeof` を使う方法です。お買い物で「これ、食べ物かな？ 雑貨かな？」とラベルを確認するようなものですね。
function printInfo(value: string | number) {
// ここで「もし中身が文字列なら…」と確認（型ガード）する
if (typeof value === “string”) {
// このブロックの中では、TypeScriptは value を「確実に文字列だ」と認識します
console.log(“メールアドレスですね。長さは: ” + value.length);
} else {
// ここに来るということは、残りの「数値」であると自動的に絞り込まれます
console.log(“電話番号ですね。数字の合計桁数は: ” + value.toString().length);
}
}
このように、`if` 文で「確認」してあげるだけで、TypeScriptはまるで魔法のようにその後のコードを安全に守ってくれるようになります。
—
初学者がつまずきやすい「沼」
よくあるのが、「とりあえず何でも入るように `any` 型を使っておこう」という誘惑です。`any` は何でも受け入れてくれる「魔法のチケット」ですが、同時に「TypeScriptの安全装置をすべて外す」という禁断の魔法でもあります。
`any` を多用すると、後から「あれ、このデータ本当は何型だっけ？」と混乱し、バグの温床になります。
「ユニオン型で明示的に範囲を絞る」ことこそが、TypeScriptを使いこなす第一歩です。
「なんでもいい（any）」ではなく、「これか、これのどちらか（string | number）」と書くことで、あなたのコードは格段に読みやすく、そして頑丈になります。
—
最後に：完璧を目指さなくて大丈夫
現場のベテランエンジニアでも、最初から完璧に型を設計できるわけではありません。最初は「とりあえず動けばいいや」で進めて、後から「あ、ここは文字列か数値のどっちかだな」と気づいた時に、型を定義し直す。それで十分です。
TypeScriptは、あなたを縛り付けるための道具ではなく、「将来の自分を助けるためのメッセージ」を残す場所です。
まずは `|` を使って、変数の可能性を広げることから始めてみてください。きっと、コードを書くのが少しだけ楽しくなるはずですよ！
わからないことがあれば、またいつでも聞きに来てくださいね。応援しています。
コメント