こんにちは！TypeScriptの世界へようこそ。チーフアーキテクトの私です。
新しい技術を学び始めるときって、なんだかワクワクする反面、「この記号、なんだか難しそう…」「エラーが出たらどうしよう…」って、ちょっぴりドキドキしちゃいますよね。でも、どうぞ安心してください。今日は、TypeScriptの基本中の基本でありながら、実務の現場でもめちゃくちゃお世話になる「`typeof`（タイプオフ）による型ガード」について、一緒にゆっくり紐解いていきましょう。
難解な専門用語はなるべく使わずに、身近な例えを交えながらお話ししますね。コーヒーでも飲みながら、リラックスした気持ちで読んでいってください。
—
そもそも「型ガード」ってなに？
TypeScriptを書いていると、たまにこんなエラーに出会ったことはありませんか？
> 「Property ‘toUpperCase’ does not exist on type ‘string | number’.（そんなプロパティ、文字列か数値かわからないから使えないよ！）」
私たちは人間なので、コードを見た瞬間に「あ、ここは文字が入るんだな」と直感的にわかります。でも、コンピュータ（TypeScript）はとっても真面目（というか、ちょっと融通が利かない子）です。
「この箱（変数）の中身、今は文字かもしれないし、数字かもしれない。もし数字だったら文字を大文字にする機能（`toUpperCase`）なんて持ってないから、エラーにしておいた方が安全だよね！」と、心配性を発揮してしまうんです。
ここで登場するのが「型ガード」という仕組みです。
これは、プログラムが動いている最中（実行時）に、「今、この箱の中身って何だっけ？」と確認して、TypeScriptに「ねえ、今の中身は文字列だから安心して！」と教えてあげるための、いわば「身分証明書のチェックポイント」のようなものです。
—
身近な例え：おもちゃの仕分けボックス
イメージしてみてください。
あなたの目の前に、いろんな形のおもちゃを放り込む「なんでもボックス」があります。中身は、丸い積み木（文字列）かもしれませんし、数字のブロック（数値）かもしれません。
目隠しをした状態で、「よし、中身を取り出して遊ぶぞ！」としたとき、いきなり積み木だと思って型にはめようとすると、数字だった場合に怪我をしてしまいますよね（これがTypeScriptのエラーです）。
だから、遊ぶ前に一回、手に持って触ってみるのです。
「あ、これはツルツルした丸い積み木だから、文字用の遊び方ができるな」
「こっちはカチカチした数字のブロックだから、計算に使おう」
この「触って確かめる」という動作が、TypeScriptにおける `typeof` を使った型ガードそのものです。
—
`typeof` を使ってみよう
では、実際にコードを見てみましょう。
JavaScriptやTypeScriptには、変数のデータ型を文字列で返してくれる `typeof` という演算子があります。これを使うと、次のように書くことができます。
// 文字列かもしれないし、数値かもしれないデータを受け取る関数を作ります
function printData(data: string | number) {
// ここで「typeof」を使って、今の中身が「string（文字列）」かどうかチェック！
if (typeof data === “string”) {
// TypeScriptは、この中に入った瞬間、「おっ、ここは確実に文字列だな！」と理解します
// だから、文字列専用の便利な機能（例：全部大文字にする）を怒られずに使えるんです！
console.log(data.toUpperCase());
} else {
// 上の「if」で文字列じゃないことが確定したので、ここに来るのは「number（数値）」だけです
// だから、数値専用の計算（例：10を足す）が安心してできます！
console.log(data + 10);
}
}
// 使ってみる
printData(“hello”); // 実行結果: HELLO （大文字に変換されるよ！）
printData(5); // 実行結果: 15 （5に10が足されるよ！）
どうでしょう？ `if (typeof data === “string”)` というたった一行のガードを置くだけで、TypeScriptが私たちの意図を汲み取って、安全に処理を進めてくれるようになります。これが、実行時のチェックと型推論の同期です。すごいですよね！
—
つまずきやすいポイントと、温かいアドバイス
TypeScriptを学び始めたばかりの頃は、こういうエラーや仕組みに出会うと「なんだか怒られているみたいで怖いな…」と感じてしまうかもしれません。実務の現場でバリバリコードを書いている私たちプロでも、最初はたくさんの赤線（エラー）に頭を抱えていました。
ここで、初心者の方向けにいくつか「知っておくと心が軽くなるコツ」をお伝えしますね。
1. `typeof` で判定できるのは「プリミティブ型」がメイン
`typeof` は、`string`（文字列）、`number`（数値）、`boolean`（真偽値）、`symbol` などの基本的な型（プリミティブ型）を調べるのが得意です。
一方で、自分で作った複雑なデータ構造や、配列（Array）を調べるときは、`typeof` だと「ただの object だよ」と返されてしまって、うまく区別できないことがあります（配列を調べたいときは `Array.isArray()` という別の優しい仲間がいます）。
「まずは基本の4つの型を調べるときに使うんだな」と覚えておけば、それだけで十分です！
2. エラーは「親切な警備員さん」だと思ってね
コードに赤い波線が出ると、どうしても「自分が失敗した」と落ち込みがちになります。でも、そう思わないでください。
その赤線を出してくれているTypeScriptは、あなたの敵ではなく、「ねえねえ、このままだと動かなくなっちゃうかもしれないから、事前に教えてあげるね！」と優しく教えてくれる親切な警備員さんです。
—
まとめ
いかがでしたでしょうか？
`typeof` による型ガードは、一見難しそうに見えても、要するに「プログラムの中で『これって何だっけ？』と確認して、安全に安心してお仕事を進めるための知恵」です。
Web制作やアプリケーション開発の現場でも、ユーザーから送られてきたデータが「文字なのか数字なのかわからない」という場面は本当によくあります。そんなとき、今日お伝えした `typeof` を思い出してもらえたら、きっとあなたの味方になってくれますよ。
もし分からないところがあっても、焦らなくて大丈夫。一歩ずつ、ご自身のペースで楽しくコード書いていきましょう！
それでは、また次回の記事でお会いしましょう。チーフアーキテクトの私でした！
コメント