こんにちは。TypeScriptの世界へようこそ！
現場でバリバリとコードを書き散らしていると、たまに忘れてしまいがちですが、TypeScriptの型システムって最初は本当に「宇宙語」に見えますよね。「なんでわざわざこんな面倒なことをしなきゃいけないの？」と投げ出したくなる気持ち、痛いほどよくわかります。
でも、大丈夫。TypeScriptがあなたを苦しめているのは、あなたの書くコードの未来を誰よりも心配してくれているからなんです。
今日は、その中でも「これを知らないと始まらない！」という基本中の基本、`typeof` 演算子を使った「型ガード」について、おしゃべりするように解説していきますね。
—
「何者かわからない」という不安を消し去る魔法
TypeScriptを書いていると、時々「この変数は数字かもしれないし、文字かもしれない」という、正体不明のデータに出くわすことがあります。これを「ユニオン型」と呼びます。
例えば、Webサイトの入力フォームから受け取るデータ。「年齢」を聞いたのに、誰かが間違えて「二十歳」と文字で入力してくるかもしれない。そんなとき、TypeScriptはこう言います。
「君、そのデータが数字なのか文字なのかわからないまま計算させないでよ！ エラー出しちゃうぞ！」
そう、TypeScriptは非常に慎重なんです。この不安を解消して、「これは絶対に数字だ！」と確定させる仕組みが、今回紹介する型ガードです。
買い物かごの仕分けをイメージしてみよう
想像してみてください。あなたは今、スーパーのレジ打ちスタッフです。目の前には、スキャン待ちの「買い物かご」が流れてきます。かごの中には、リンゴ（number）も入っていれば、メモ書き（string）も入っているかもしれません。
あなたはレジを打つ前に、こう考えますよね。
「これは食べ物か？ それとも単なるメモか？ 見て確認してから処理しよう」
これがTypeScriptにおける `typeof` です。
// 買い物かごの中身（数字かもしれないし、文字かもしれない）
let item: number | string = 100;
// typeofを使って、「君は数字かい？」と確認する
if (typeof item === ‘number’) {
// ここではTypeScriptが「あ、この中は絶対に数字だね」と確信してくれる！
console.log(“お値段は ” + (item + 50) + ” 円です。”);
} else {
// ここでは「じゃあ文字だね」と確定する
console.log(“メモの内容： ” + item.toUpperCase());
}
なぜ `typeof` が必要なの？
もし `typeof` を使わずに、いきなり `item + 50` なんて計算をしようとしたらどうなるでしょう？
もし `item` が「リンゴ」という文字だったら、計算結果は「リンゴ50」という謎の文字列になってしまいますよね。TypeScriptはそんな「事故」を未然に防ぐために、あえて厳しい態度を取っているんです。
`typeof` を使ってあげることで、TypeScriptは「お、確認してくれたんだね！ じゃあ安全だね」と安心し、その先で思い切りコードを書かせてくれるようになります。
—
つまずきポイント：`typeof` が見分けられるもの
初心者の方がよく迷うのが、「`typeof` って何でも見分けられるの？」という点です。
実は、`typeof` が得意なのは、今回挙げたプリミティブ型（基本の型）だけです。
- `”number”`（数字）
- `”string”`（文字）
- `”boolean”`（真偽値：true/false）
- `”undefined”`（まだ値がない状態）
これらは `typeof` で簡単に「あなたは誰？」と尋ねることができます。逆に、配列やオブジェクトのような少し複雑なものになると、`typeof` だけでは少し力不足なんです。でも、まずはこの4つをしっかり使いこなせれば、現場のコードの8割は怖くありませんよ。
—
最後に：TypeScriptはあなたの「相棒」です
TypeScriptの型ガードを書いていると、「面倒くさいな」と感じることもあるでしょう。でも、それはあなたが「丁寧な仕事」をしている証拠です。
型ガードをしっかり書くということは、未来の自分や、一緒に働くチームメンバーに対して「ここはこういうデータが来るから、安心して使ってね」という優しい手紙を残しているのと同じなんです。
最初はエラーと友達になるような感覚かもしれませんが、エラーが出てくれたおかげでバグが防げたと気づいたとき、きっとTypeScriptのことが少しだけ好きになれるはずです。
もしコードを書いていて行き詰まったら、いつでも深呼吸して、「今、このデータは何者なんだろう？」と画面に問いかけてみてください。`typeof` という名の虫眼鏡を使えば、必ず答えは見つかります。
あなたのTypeScriptライフが、今日から少しだけ軽やかで楽しいものになりますように！応援しています。
コメント