文字列のおしゃれをアップデート！TypeScriptの組み込み型で「大文字」「小文字」を自在に操ろう✨
やっほー！フロントエンドの世界へようこそ！TypeScriptって、なんだか難しそう…って思ってるあなた、大丈夫！今日は、文字列をちょっとおしゃれに、便利に扱うためのTypeScriptの秘密兵器、「組み込みユーティリティ型」について、お買い物に例えながら、わくわくするような冒険に出かけよう！
🛒 お買い物に例えてみよう！文字列の「変身」ってなんだろう？
例えば、お店で T シャツを買いたいとする。でも、欲しいのは「無地の真っ白な T シャツ」じゃなくて、「ちょっとおしゃれなデザインの T シャツ」だったりするよね。
TypeScript の世界でも、文字列って、ただの「文字の羅列」だけじゃなくて、もっと色々な「顔」を持ってるんだ。例えば、
- 「HELLO WORLD」って、全部大文字で元気いっぱい！
- 「hello world」って、全部小文字で控えめ。
- 「Hello World」って、最初の文字だけ大文字で、なんだか丁寧な印象。
- 「hello world」って、最初の文字だけ小文字で、カジュアルな感じ。
こんな風に、文字列の「見た目」をちょっと変えるだけで、コードの意図が伝わりやすくなったり、表示する時にすごく便利になったりするんだ。
まるで、洋服の「色」や「デザイン」を変えるみたいに、TypeScript では文字列の「大文字」「小文字」を自在に変えることができる。それが、今日のお話の主役、「組み込みユーティリティ型」なんだ！
🌟 今日のお買い物リスト：TypeScriptの文字列操作型たち
今日は、この子たちをチェックしていくよ！
- `Uppercase
`: 文字列を全部大文字にしてくれる魔法！ - `Lowercase
`: 文字列を全部小文字にしてくれる魔法！ - `Capitalize
`: 文字列の最初の文字だけ大文字にしてくれる魔法！ - `Uncapitalize
`: 文字列の最初の文字だけ小文字にしてくれる魔法！
どれも、テンプレートリテラル型っていう、TypeScript の「特別な文字列の書き方」と組み合わせて使うのがポイントなんだ。
🛍️ 1. 「全部大文字」って、どんな感じ？ `Uppercase` を見てみよう！
お店で「この T シャツ、全部大文字のロゴにして！」ってお願いするイメージかな？
例えば、商品名なんかを、全部大文字で表示したい時ってあるよね。
// Tシャツの元の名前
type OriginalTShirtName = ‘cool t-shirt’;
// Uppercase を使って、全部大文字にしちゃおう！
type UppercaseTShirtName = Uppercase
// この UppercaseTShirtName は、’COOL T-SHIRT’ っていう文字列になるんだ。
// 実際にどんな型になっているか見てみよう！
type CheckUppercase = UppercaseTShirtName; // “COOL T-SHIRT”
どう？ `Uppercase
🤏 2. 「全部小文字」って、どんな感じ？ `Lowercase` を見てみよう！
今度は、「この T シャツ、全部小文字のロゴにして！」ってお願いするイメージ。
ちょっと控えめなデザインにしたい時なんかに便利だね。
// 商品コードを、全部小文字で管理したい場合
type ProductCode = ‘ABC-123’;
// Lowercase を使って、全部小文字にしてみよう！
type LowercaseProductCode = Lowercase
// この LowercaseProductCode は、’abc-123′ っていう文字列になるよ。
// 型を確認してみよう！
type CheckLowercase = LowercaseProductCode; // “abc-123”
ほら、`’ABC-123’` が `’abc-123’` に、あっという間に変身！
👑 3. 「最初だけ大文字」って、どんな感じ？ `Capitalize` を見てみよう！
これは、ちょっと丁寧にお店の人に話しかける時みたいなイメージかな？
文章の始まりって、ちょっと大文字にするだけで、なんだかきちんとした印象になるよね。
// 挨拶のメッセージ
type Greeting = ‘hello world’;
// Capitalize を使って、最初の文字だけ大文字にしてみよう！
type CapitalizedGreeting = Capitalize
// この CapitalizedGreeting は、’Hello world’ っていう文字列になるんだ。
// 型を確認してみよう！
type CheckCapitalize = CapitalizedGreeting; // “Hello world”
元の `’hello world’` が、 `’Hello world’` に！最初の `’h’` が `’H’` に変わったのがわかるかな？
👟 4. 「最初だけ小文字」って、どんな感じ？ `Uncapitalize` を見てみよう！
これは、お店の人に「あのー、ちょっと聞きたいんですけど…」って、カジュアルに話しかけるイメージかも。
// タイトルを、ちょっとカジュアルにしたい時
type PageTitle = ‘Welcome To Our Shop’;
// Uncapitalize を使って、最初の文字だけ小文字にしてみよう！
type UncapitalizedTitle = Uncapitalize
// この UncapitalizedTitle は、’welcome To Our Shop’ っていう文字列になるよ。
// 型を確認してみよう！
type CheckUncapitalize = UncapitalizedTitle; // “welcome To Our Shop”
元の `’Welcome To Our Shop’` の `’W’` が `’w’` に変わって、なんだか親しみやすい感じになったね！
💡 なんでこんな機能があるの？ 実践的な使い道は？
「ふーん、便利そうだけど、実際どこで使うの？」って思ったあなた！鋭い！
これらの組み込み型は、特に以下のような場面で大活躍するんだ。
- API から受け取ったデータの整形: API から送られてくるデータって、大文字だったり小文字だったり、色々な形式があるよね。それを、自分のコードで使いやすいように、決まった形（例えば、全部小文字とか、最初だけ大文字とか）に変換したい時に便利。
- ファイル名や変数名の生成: コードの中で、動的にファイル名や変数名を生成することがある。その時、決まったルール（例えば、大文字・小文字の使い分け）で名前をつけたい場合に役立つ。
- UI 表示の統一: Web サイトで、商品名やボタンのテキストなどを表示する時に、デザインの統一感を出すために、決まった形式（例えば、全部大文字で強調する）にしたい時。
例えば、こんな風に、API から受け取った商品名を表示する時に、ちょっと加工してから表示する、なんてことができるんだ。
// API から受け取った商品名（例）
interface ApiResponse {
productName: ‘Awesome Gadget’; // 大文字小文字が混ざっている場合
}
// ユーザーに表示する時は、全部大文字にして目立たせたい！
type DisplayProductName = Uppercase
// 表示用の変数に型を付けてみよう
const displayProductName: DisplayProductName = ‘AWESOME GADGET’; // 型が合っているのでOK
console.log(displayProductName); // “AWESOME GADGET” と表示される
API のレスポンスの型定義が `ApiResponse[‘productName’]` になっているから、そこに `Uppercase` を適用することで、`’AWESOME GADGET’` という文字列リテラル型が生まれるんだ。
⚠️ ちょっと待って！つまずきやすいポイント！
ここまで、とっても簡単だったでしょ？でも、ここで一つだけ、みんながちょっと「あれ？」ってなりやすいポイントがあるんだ。
それはね、これらの組み込み型は、「文字列リテラル型」 に対して使うと、その「文字列リテラル型」を、変換された「新しい文字列リテラル型」にしてくれるんだけど、「string 型」（つまり、どんな文字列でも入る可能性のある型）に使うと、そのまま「string 型」になっちゃうってことなんだ。
あれ？どういうこと？って思った？大丈夫！一緒に見ていこう！
// 1. 文字列リテラル型に使う場合 (これが便利！)
type OriginalGreeting = ‘hello’;
type UppercasedGreeting = Uppercase
// 2. string 型に使う場合 (そのまま string 型になっちゃう)
type AnyString = string;
type UppercasedAnyString = Uppercase
// 型をチェックしてみよう！
type CheckLiteral = UppercasedGreeting; // “HELLO”
type CheckString = UppercasedAnyString; // string
console.log(typeof CheckLiteral); // “string” (実行結果は文字列だけど、型としては “HELLO” という具体的な文字列)
console.log(typeof CheckString); // “string” (型としても実行結果としても string)
どうかな？ `Uppercase
つまり、「この文字列は、必ずこの大文字・小文字の形になるよ！」 っていう、より具体的な型情報が欲しい時に、これらの組み込み型は真価を発揮するんだ。
だから、API のレスポンスで、特定の文字列（例えば、ステータスコードとか）が来るのがわかっている場合は、`Uppercase` とかを使って、その文字列を変換した型を定義しておくと、コードがより安全で分かりやすくなるんだよ。
まとめ：文字列の「おしゃれ」をTypeScriptで楽しもう！
今日は、TypeScript の `Uppercase`, `Lowercase`, `Capitalize`, `Uncapitalize` っていう、文字列をちょっとおしゃれに変身させる魔法について学んだね！
- `Uppercase
`：全部大文字に！ - `Lowercase
`：全部小文字に！ - `Capitalize
`：最初だけ大文字に！ - `Uncapitalize
`：最初だけ小文字に！
これらを使いこなせば、コードの意図が伝わりやすくなったり、表示をきれいに整えたり、色々な場面で役立つはずだよ。
最初はちょっと戸惑うかもしれないけど、実際にコードを書いて動かしてみると、「なるほど！」って腑に落ちることがたくさんあるから、ぜひ色々なパターンで試してみてね。
TypeScript の世界は、まるで宝箱みたいに、色々な発見が待っているよ！これからも一緒に、わくわくするようなコードを書いていこうね！またねー！👋
コメント