やあ。TypeScriptの世界へようこそ。
初めてこの言語に触れたとき、「型定義って、なんだか堅苦しいルールを押し付けられているみたいだな」と感じたことはないかな？
でも、安心してほしい。TypeScriptの「型」は、君の自由を奪う鎖じゃない。むしろ、君が書いたコードのミスを先回りして見つけてくれる、頼もしい相棒なんだ。
今日は、そんな相棒が持っている「魔法の杖」のような機能、「組み込み文字列操作型（Template Literal Types）」についてお話しするよ。
—
文字列を「型」で自由自在に操る魔法
普段、JavaScriptで文字列を扱うとき、`.toUpperCase()`や`.toLowerCase()`を使ったりするよね。あれと同じことを、プログラムを実行する前の「型定義の段階」でやっちゃおう、というのが今回のテーマだ。
想像してみてほしい。君が注文したお弁当のラベルを、お店の人が自動で「大文字」や「小文字」に変換して整えてくれる光景を。そんな気の利いたサポートを、TypeScriptが型の中でやってくれるんだ。
1. Uppercase（すべて大文字にする）
まずは、小文字のテキストを情熱的な「大文字」に変換するやつだ。
// ‘hello’ という型を、強制的に ‘HELLO’ という型に変換する
type Shout = Uppercase<"hello">;
const myMessage: Shout = “HELLO”; // 大丈夫！
// const error: Shout = “hello”; // エラー！「小文字は受け付けないよ」と怒られます
2. Lowercase（すべて小文字にする）
今度は逆に、どんなに勢いのある大文字も、優しく小文字に整えてくれる。
type Whisper = Lowercase<"HELLO_WORLD">;
const softMessage: Whisper = “hello_world”; // 完璧だね
3. Capitalize（先頭を大文字にする）
これが一番のお気に入りかもしれない。英語の文章の書き出しのように、一番最初だけを大文字にしてくれるんだ。変数の命名規則（キャメルケース）を作るときなんかに、めちゃくちゃ役に立つ。
type Title = Capitalize<"typescript">; // “Typescript” に変換されます
4. Uncapitalize（先頭を小文字にする）
最後は、先頭を小文字に戻すやつだ。あまり頻繁には使わないかもしれないけれど、APIから受け取ったデータの形式を整えたいときには、これが救世主になる。
type SmallStart = Uncapitalize<"Hello">; // “hello” に変換されます
—
なぜ、わざわざ「型」でやる必要があるの？
「そんなの、コードの中で `.toUpperCase()` すればいいじゃん！」と思うかもしれないね。その直感は正しい。でも、型でやっておくことには、「未来の自分を守る」という大きなメリットがあるんだ。
例えば、Webサイトの「ボタンの種類」を定義するとしよう。
type ButtonAction = “submit” | “cancel” | “reset”;
// ボタンのIDを「アクション名 + _btn」というルールで自動生成したいとき
type ButtonId = `${Uppercase
// これだけで、自動的に以下の型が出来上がる！
// “SUBMIT_BTN” | “CANCEL_BTN” | “RESET_BTN”
もし君が間違えて `SUBMIT_BTN` と書くべきところを `sub_btn` と書いてしまっても、TypeScriptは即座に「そんなボタンIDは存在しないよ！」と教えてくれる。
これ、すごくないかな？ 実行する前にミスがわかる。つまり、「動かしてみるまでバグに気づかない」という一番怖い時間をゼロにできるんだ。
—
最後に：つまずいても大丈夫だよ
最初は、`< >` の記号が並んでいるだけで「うわっ」となるかもしれない。でも、これらは単に「文字列を加工するための道具箱」だと思えばいい。
まずは、コードエディタを開いて、適当な型を作って遊んでみてほしい。「あれ、これ大文字にしたらどうなるんだろう？」と試すことこそが、最強の上達の近道だよ。
もしエラーが出ても、それは相棒が「君のコードをより良くしよう」と一生懸命語りかけてくれている証拠だ。ひとつずつ紐解いていけば、必ず仲良くなれる。
君のTypeScriptライフが、今日から少しだけ楽しくなりますように。またいつでも相談してね！
コメント