【入門編】 Intrinsic String Manipulation Typesの全容 – TypeScript実践ガイド

こんにちは！TypeScriptの世界へようこそ。チーフアーキテクトの私です。

TypeScriptを書き始めると、「型定義」ってなんだか堅苦しくて、ロボットのような厳格なルールに縛られているように感じてしまうこと、ありませんか？「エラーが出たらどうしよう…」と、赤く光る波線にビクビクしてしまうその気持ち、痛いほどよく分かります。私も昔はそうでした。

でも、安心してください。TypeScriptの型は、あなたを縛るためのものではなく、「あなたのコードのうっかりミスを優しく見守ってくれる、頼もしい相棒」なんです。

今日は、その相棒が持っている隠し技の一つ、「Intrinsic String Manipulation Types（組み込みの文字列操作型）」についてお話しします。「名前が呪文みたいで難しそう…」と思いましたか？大丈夫、中身はとってもシンプルで、私たちの身の回りにある「文字のカタチを変えるスタンプ」のようなものですよ。

それでは、一緒に見ていきましょう！

—

1. 文字列を自由自在に変える「文字のスタンプ屋さん」

みなさんは、お買い物をしたときのレシートや、Webサイトの入力フォームでこんな経験はありませんか？

「ぜんぶ大文字で入力してください！」と言われたり
「頭文字だけは大文字にしてね」と怒られたり

TypeScriptの世界でも、「文字列の見た目をちょっとだけ加工したい！」という場面に出くわします。例えば、APIから返ってきたユーザー名や、CSSのクラス名などを一定のルールに揃えたいときですね。

そんなとき、わざわざJavaScriptのプログラムを動かして文字列を変換しなくても、「型（かたち）のレベル」で文字を大変身させちゃうのが、今回紹介する4つの魔法のスタンプです。

1. `Uppercase`：ぜんぶ大文字にするスタンプ
2. `Lowercase`：ぜんぶ小文字にするスタンプ
3. `Capitalize`：先頭の文字だけ大文字にするスタンプ
4. `Uncapitalize`：先頭の文字だけ小文字にするスタンプ

「なんだ、これだけ？」と思いましたよね。そうです、これだけなんです！でも、これが実務の現場ではものすごく良い仕事をしてくれるんですよ。

—

2. 4つのスタンプの使い心地を覗いてみよう

百聞は一見にしかず。実際にコードを書いて、このスタンプたちがどう動くのかを覗いてみましょう。

お手元のエディタにコピペして試せるように書いておきますね。

// ==========================================
// 1. Uppercase：すべてを大文字にするスタンプ
// ==========================================
// 「hello」という文字の型を、強烈にシャウトさせます！
type NormalGreeting = “hello”;
type ShoutGreeting = Uppercase;
// 結果の型: “HELLO” （全部大文字になります）

// ==========================================
// 2. Lowercase：すべてを小文字にするスタンプ
// ==========================================
// 「WARNING」という叫び声を、優しくささやくような小文字にします。
type LoudAlert = “WARNING”;
type WhisperAlert = Lowercase;
// 結果の型: “warning” （全部小文字になります）

// ==========================================
// 3. Capitalize：先頭の文字だけ大文字にするスタンプ
// ==========================================
// 英語の文法でおなじみ、先頭だけをピシッとさせます。
type userName = “tanaka”;
type ProperName = Capitalize;
// 結果の型: “Tanaka” （最初の ‘t’ だけ ‘T’ に変身！）

// ==========================================
// 4. Uncapitalize：先頭の文字だけ小文字にするスタンプ
// ==========================================
// 先頭だけをちょっとお辞儀させるように小さくします。
type ClassName = “ButtonComponent”;
type VariableName = Uncapitalize;
// 結果の型: “buttonComponent” （最初の ‘B’ だけ ‘b’ に変身！）

どうですか？「おっ、ちゃんと狙ったところが変身してるな」というのが感覚的に伝わったのではないでしょうか。

—

3. 「これ、いつ使うの？」実践的なお話

「文字の見た目を変えられるのは分かったけど、ぶっちゃいつ使うの？」という声が聞こえてきそうですね。

実は、この機能が真価を発揮するのは、「イベントの型定義」や「自動生成されるコード」を作るときです。

例えば、Webアプリを作るときによくある「ボタンをクリックしたとき」「マウスが乗ったとき」のようなアクション（イベント）の名前を型で管理したいとしましょう。

// アプリで使う基本の操作（名詞）
type Action = “click” | “hover” | “focus”;

// 「on〇〇」というイベントハンドラーの型を自動で作りたい！
// 例：”onClick” | “onHover” | “onFocus”
type EventHandlerName = `on${Capitalize}`;

// ほら、一発で綺麗なイベント名が完成しました！
type MyEventHandlers = EventHandlerName;
// 結果の型: “onClick” | “onHover” | “onFocus”

テンプレートリテラル型（バッククォート “ ` “ で型を囲む書き方）と組み合わせることで、「ベースとなる単語」から「関連する別の言葉」を自動的に組み立てることができるんです。

手作業で一つひとつ書く必要がないので、将来「あ、新しいアクション増やそう」となったときも、ベースの `Action` に追加するだけで、イベントの型も自動で連動してくれます。これが、私たちエンジニアが涙を流して喜ぶ「保守性の高いコード」の正体です。

—

4. つまずきやすいポイントと、優しく温かいアドバイス

ここで、初心者の人がよくハマりがちな「落とし穴」をこっそりシェアしておきますね。もしここで躓いても、自分を責めないでください。みんな通る道ですから！

⚠️ 注意点：文字列以外のものを渡すと怒られちゃう

これらのスタンプは、あくまで「文字列（string）」専用のスタンプです。
なので、数字（number）や真偽値（boolean）をそのまま突っ込むと、TypeScriptの先生に「それは文字列じゃないよ！」と優しく怒られてしまいます。

// ダメな例：数字をそのまま大文字にしようとすると…
// type Oops = Uppercase<123>; // ❌ エラーになります！

// 正しい例：一度文字列に変えてからスタンプを押そう！
type SafeNumber = Uppercase<`${123}`>; // ⭕ “123” になります

「もし数字を加工したくなったら、バッククォートで文字にしてあげればいいんだな」と覚えておいてくださいね。

—

まとめ

今日は、TypeScriptのちょっとした魔法「Intrinsic String Manipulation Types」についてお話しました。

Uppercase / Lowercase / Capitalize / Uncapitalize は、型の中で文字列を自由に変形できるスタンプ。
テンプレートリテラル型と組み合わせることで、重複したコードを書かずにスマートな型設計ができる。
文字列以外を渡すときは、バッククォートで囲って文字にしてあげる優しさを忘れないこと。

TypeScriptの型システムは、最初は少し冷たく見えるかもしれませんが、使いこなせばこなすほど、あなたの開発を強力にバックアップしてくれる最高の相棒になってくれます。

焦らず、自分のペースで、ひとつずつ引き出しを増やしていきましょう。
今日のあなたのプログラミングライフが、少しでも楽しく、ワクワクするものになりますように！それではまた次の記事でお会いしましょう！