ts002

紅茶カップで学ぶ型注釈と推論|第2回 TypeScript入門

著者: 管理者 / 2025-08-20 (更新: 2025-08-20)

user01 Calm
先生、第1回では「型とはなにか」を知って、とても安心感を覚えましたの✨
今日はもっと具体的に…「型をどうやって使うのか」を教えていただきたいですわ。
user02 Calm
承知しました。では今回は 「型注釈」と「型推論」 について学んでまいりましょう。
紅茶のカップを例にすれば、すぐにイメージできますよ。

📝 解説:型注釈とは?

型注釈 (Type Annotation) は「この変数には〇〇しか入りません」と、先にルールを添えておくことです。

  • 例:

    • 「このカップは紅茶専用」

    • 「このグラスはジュース専用」

コードに置き換えるとこうなります:

let tea: string = "アールグレイ";
let sugar: number = 2;
  • : string → 文字列しか入れられません。
  • : number → 数値しか入れられません。

user01 Surprised
まあ!まるで「紅茶カップには紅茶」「砂糖スプーンには砂糖」と決めておくようなものですわね☕🍬
これなら、間違えてスプーンに紅茶を注ぐこともありませんわ。
user02 Happy
おっしゃる通りです。ルールを先に決めることで、使い方を間違えにくくなるのです。

📝 解説:型推論とは?

型推論 (Type Inference) は「わざわざ書かなくても、TypeScriptが自動で判断してくれる」仕組みです。

let cup = "ダージリン";   // string型と判断される
let sugarCube = 3;       // number型と判断される

ここでは : string: number と書いていませんが、
TypeScriptは「これは文字列だな」「これは数値だな」と自動的に見抜きます。


user01 Calm
まあ、すごいですわ!
まるで執事さんが「この器は紅茶用、この小皿は砂糖用」と察して並べてくださるみたいですのね。✨
user02 Happy
素晴らしいたとえです。つまり 型注釈は自分で明示する型推論はTypeScriptが気を利かせて判断してくれる、という違いです。

📝 解説:どちらを使うべき?

  • 型注釈を使うと良い場合

    • 他の人に「この変数の役割は〇〇です」と伝えたいとき

    • 関数の引数や戻り値をはっきりさせたいとき

  • 型推論に任せてよい場合

    • 変数にすぐ値を入れて、その型が明確なとき

つまり、紅茶カップのラベルは貼るべきところにだけ貼ればよいのです。


user01 Troubled
では先生、わたくし、どこまでラベルを貼るべきか迷ってしまいますわ…。
全部に「紅茶」「砂糖」「ミルク」と書いたら、なんだか堅苦しくなってしまいそうですし💦
user02 Serious
良い疑問です。基本は 「必要なところだけ注釈し、残りは推論に任せる」 というバランスです。
特に関数の引数と戻り値は明示すると分かりやすくなりますよ。

📝 解説:関数での型指定

例えば「砂糖を何杯入れるか」を決める関数なら:

function addSugar(cups: number): string {
  return `${cups}杯の砂糖を加えました`;
}
  • cups: number → 引数は数値

  • : string → 戻り値は文字列

このように、関数では型注釈がとても役立ちます。


user01 Happy
まあ!これなら「砂糖を二杯」と頼んで、急に「レモンを入れました」と返される心配もありませんのね🍋❌
user02 Happy
ええ、その通りです。約束を守るからこそ、安心してお茶会ができますね。

✨ 本日のまとめ

  • 型注釈:自分で「この変数は〇〇」と明示する

  • 型推論:TypeScriptが自動で「これは〇〇だ」と判断してくれる

  • 使い分け:重要な部分(特に関数)には注釈、それ以外は推論でOK

  • 比喩:紅茶カップにラベルを貼るか、執事に任せるかの違い


☕ 次回予告

次回は「ドレスコードのような型:オブジェクトと配列」。
複数のデータをまとめるとき、どのように型を整えるのかを学んでまいります。👗📦