【入門編】 型レベルの文字列操作 – TypeScript実践ガイド

文字列だって、型で自在に操っちゃおう！TypeScriptのTemplate Literal Typesがすごい！

やっほー！フロントエンドの世界へようこそ！😊
今日はね、TypeScriptのちょっとクールな機能、「Template Literal Types」についてお話しするよ。

「え？文字列を型で操作するって、どういうこと？」って思った？
大丈夫、大丈夫！難しい話じゃないんだ。むしろ、これを知ると、コードを書くのがもっと楽しくなるし、ミスも減るんだから！

そもそも「型」って何だっけ？ 🤔

まず、TypeScriptの「型」について、ちょっとだけおさらい。
型っていうのは、変数とか、関数の引数とか、返り値とかが「どんな種類のデータなのか」を教えてくれる、いわば「データのプロフィール帳」みたいなもの。

例えば、

• `string`：これは「文字列」だよ、って教えてくれる。
• `number`：これは「数字」だよ、って教えてくれる。
• `boolean`：これは「真偽値」（trueかfalse）だよ、って教えてくれる。

これらのおかげで、TypeScriptは「あれ？この変数、文字列が入るはずなのに、数字入れちゃってるよ！」って、コードを書いている途中で教えてくれるんだ。これが、TypeScriptの超便利なところだよね！

今日のお目当て！Template Literal Typesって何？ ✨

さて、今日の本題「Template Literal Types」！
これは、JavaScriptでおなじみの「テンプレートリテラル」っていう、バックク（\` \`）で囲んで、中に `${変数}` って書くヤツ、あれを「型」の世界で使えるようにしたものなんだ。

「型でテンプレートリテラル？ まだピンとこないな…」って？
大丈夫！例え話で考えてみようか。

例え話：お買い物リストを作ってみよう！ 🛍️

例えば、お買い物に行くとする。
「牛乳」と「パン」と「卵」を買いたいなーって思ったとするよね。

これを、普通の文字列で書くと、こうなる。

const shoppingList = “牛乳, パン, 卵”;

でも、もし「牛乳」と「パン」と「卵」が、それぞれ別の「商品名」っていう型だったらどうなる？
そして、それを「, 」でつなげて、一つの「お買い物リスト」っていう型を作れたら、もっと便利じゃない？

Template Literal Typesは、まさにそんなことができるんだ！

文字列を「型」として扱うって、どういうこと？ 🤯

Template Literal Typesを使うと、文字列の「形」を型として定義できるんだ。
例えば、こんな風に。

type Greeting = `Hello, ${string}!`;

これ、どういう意味かわかる？
「`Hello, `」っていう文字列の後に、どんな文字列でもいいから、何か一つ文字列がくっついたものが「Greeting」っていう型だよ！って言ってるんだ。

つまり、

• `”Hello, World!”` は「Greeting」型 OK！ 👍
• `”Hello, TypeScript!”` も「Greeting」型 OK！ 👍
• `”Good morning, everyone!”` は「Greeting」型 NG！ ❌ (だって “Hello, ” で始まってないからね)

こんな風に、文字列の「パターン」を型として指定できるんだ。

具体的に何ができるの？ 🛠️

Template Literal Typesを使うと、色々な文字列操作が「型レベル」でできるようになるんだ。
「型レベル」っていうのは、コードを実行する前（コンパイル時）に、TypeScriptがチェックしてくれるってこと。実行時には影響しない、まさに「設計図」を作るようなイメージだよ。

1. 文字列の結合（くっつける！）🔗

さっきの例え話にも少し出てきたけど、複数の文字列型を組み合わせて、新しい文字列型を作ることができる。

例えば、名前と苗字を組み合わせて、フルネームの型を作ってみよう。

type FirstName = “Alice”;
type LastName = “Smith”;

// 苗字と名前をスペースで区切って結合する型
type FullName = `${LastName}, ${FirstName}`; // “Smith, Alice” という型になる

// 実際に使ってみよう
const personName: FullName = “Smith, Alice”; // OK!
// const invalidName: FullName = “Alice Smith”; // Error! 型が違うよと怒られる

どう？「`Smith, `」っていう文字列と、「`Alice`」っていう文字列が、型の上でくっついて、「`Smith, Alice`」っていう新しい型ができたのがわかるかな？
これなら、うっかり「Alice Smith」みたいに順番を間違えたり、スペースを入れ忘れたりするミスを防げるんだ。

2. 文字列の分割（バラバラにする！）✂️

結合の逆で、特定のパターンにマッチする文字列を、型レベルで分割することもできるんだ。

例えば、日付の文字列 “YYYY-MM-DD” を、年、月、日に分割する型を作ってみよう。

type DateString = “2023-10-27”;

// “YYYY-MM-DD” のパターンにマッチさせて、年、月、日を抽出する型
type Year = T extends `${infer Y}-MM-DD` ? Y : never;
type Month = T extends `${infer Y}-${infer M}-DD` ? M : never;
type Day = T extends `${infer Y}-MM-${infer D}` ? D : never;

// 実際に使ってみよう
type ExtractedYear = Year; // “2023” という型になる
type ExtractedMonth = Month; // “10” という型になる
type ExtractedDay = Day; // “27” という型になる

// 型の確認 (実際にはコード上で確認できます)
const year: ExtractedYear = “2023”; // OK
const month: ExtractedMonth = “10”; // OK
const day: ExtractedDay = “27”; // OK

この `infer` っていうのがちょっと魔法みたいなんだけど、これは「この部分にマッチする文字列を、一時的に `Y` とか `M` とかっていう型変数に名前をつけて、後で使えるようにするよ！」っていう意味なんだ。
まるで、定規で測って「この部分は何センチかな？」って調べるみたいだよね。

3. 大文字・小文字変換（気分転換！）🔄

文字列の大文字・小文字を変換する機能も、最近のTypeScriptでは追加されているんだ。
これは、特定のフォーマットに合わせたい時なんかにすごく便利。

例えば、APIから受け取ったスネークケース（`user_id` みたいにアンダースコアで区切る）の文字列を、キャメルケース（`userId` みたいに最初の単語を小文字、二つ目以降を大文字で始める）に変換する型を作ってみよう。

// まずは、スネークケースからキャメルケースに変換する型ヘルパー
type SnakeToCamelCase =
S extends `${infer First}_${infer Rest}`
? `${First}${Capitalize>}`
: S;