やあ、TypeScriptの世界へようこそ。フロントエンドの現場で「型」という武器を使いこなすチーフアーキテクトだ。
TypeScriptを学び始めたとき、一番身近で、でも実は奥が深いのが「文字列（string）」というやつなんだ。今日は、この文字列をただの箱として使うだけでなく、テンプレートリテラル型という「魔法の杖」を使って、型を自在に操る楽しさを伝授しようと思う。
肩の力を抜いて、リラックスして読んでくれ。
—
1. 文字列は「名前のタグ」だと思えばいい
まずは基本中の基本、`string`型だ。
JavaScriptでは何でもかんでも変数に入れられたけれど、TypeScriptは「これは文字列だよ！」と厳格に管理する。
例えるなら、「荷物に貼る名前ラベル」だ。ダンボール（変数）に「これは服です」「これは本です」とラベルを貼ることで、間違えて開けて中身をぶちまける事故を防ぐんだね。
// 名前という変数には、必ず文字列しか入れさせないぞ！
const userName: string = “たなか”;
// もしここに数字を入れたら？
// const age: string = 25; // 怒られる！「それは数字だよ」ってね。
もし「ここに何が入るかわからない！」という不安な場面があるなら、`unknown`型を使って一旦「中身未確認の箱」として受け取るのがプロの作法だ。`any`は便利すぎて麻薬のようなものだから、なるべく使わないのが僕たちの掟だよ。
—
2. テンプレートリテラル型：文字列を「型レベル」で組み立てる
さて、ここからが本題だ。JavaScriptにはバッククォート（` `）で囲んで `${}` を使う「テンプレートリテラル」があるよね。TypeScriptでは、これを「型そのもの」として定義できるんだ。
例えば、Webサイトでよくある「IDの形式」を考えてみよう。
「ユーザーIDは必ず `user_` から始まる」というルールがあるとする。
// 「user_」で始まる文字列型を定義する
type UserId = `user_${string}`;
const id1: UserId = “user_001”; // これはOK！
const id2: UserId = “admin_001”; // これはダメ！エラーが出るよ。
これの何がすごいか分かるかい？
コードを書いている最中に、「あ、このIDはルール違反だ！」とエディタがその場で教えてくれるんだ。プログラムを実行してエラーになる前に、開発者が自分のミスに気づける。これがTypeScript最大の恩恵さ。
—
3. 実践：お買い物アプリの「型」を作ってみよう
もう少し具体的なイメージをしてみよう。ネットショッピングで「注文ID」を作るシチュエーションだ。
// 注文IDのルール：’ORD-‘ から始まり、数字が続く
type OrderId = `ORD-${number}`;
const myOrder: OrderId = “ORD-12345”;
// もし、文字が混ざったらどうなる？
// const badOrder: OrderId = “ORD-ABCDE”;
// → 「number型じゃないよ！」と優しく諭してくれるはずだ。
このように、型をルール化しておけば、将来誰かがこのコードを触ったときに「えっと、このIDの形式なんだっけ？」と悩まなくて済む。コードそのものがドキュメント（説明書）になるわけだね。
—
つまずきやすいポイント：焦らなくて大丈夫
ここまで読んで「型って意外と厳しいな…」と感じたかもしれない。でも、安心してほしい。最初はみんな、エディタに赤い波線を引かれて「ああ、また怒られた！」と苦笑いするものだ。
- 「なぜエラーが出るのか？」 を考えるのは、君がプログラムと対話している証拠だよ。
- 「テンプレートリテラル」は、最初は難しく見えるかもしれない。まずは `type MyString = “Hello” | “World”` のように、固定の文字列を組み合わせることから始めてみてほしい。
TypeScriptは君を縛るための鎖じゃない。君が書いたコードが、いつまでも健全で、他の誰が読んでも理解できる「資産」になるように支えてくれる、頼もしいパートナーなんだ。
—
今日のまとめ
1. `string`型は、データの「ラベル」。しっかり貼ることで事故を防ごう。
2. テンプレートリテラル型を使うと、文字列の「ルール（フォーマット）」を型として定義できる。
3. エディタの警告は敵じゃない。君のミスを未然に防いでくれる、優秀な助手だと思って仲良くしよう。
最初は小さな一歩でいい。まずは自分の名前や、ちょっとしたIDのルールを型にしてみることから始めてみてくれ。それができたら、君はもう立派なTypeScriptエンジニアの仲間入りさ。
何か分からないことがあったら、いつでも聞いてほしい。現場の最前線から、いつでも応援しているよ。それでは、良いコードライフを！
コメント