こんにちは。フロントエンドの現場で日々コードと格闘しているチーフアーキテクトです。
TypeScriptを学び始めると、「型」という堅苦しいルールに縛られているような窮屈さを感じることがありますよね。「せっかく柔軟なJavaScriptを使っているのに、なんでこんなにガチガチなの？」と溜息をつきたくなる気持ち、痛いほど分かります。
でもね、実はTypeScriptには「型を魔法のように操って、コードを劇的に効率化する」という、ちょっとずるいテクニックが存在するんです。今日はその中でも、特に強力な「Mapped Types（マップ型）のキー再マッピング」という技を、お買い物の流れに例えて紐解いていきましょう。
—
そもそも「Mapped Types」って何？
Mapped Typesを一言で言うなら、「既存のオブジェクトをテンプレートにして、新しい型を大量生産する工場」です。
例えば、お買い物リストがあるとして、それを「すべて読み取り専用にする」とか「すべて任意項目（あってもなくてもいい項目）にする」といった変更を一括で適用したいとき、一つずつ書き直していたら日が暮れてしまいますよね。そんなとき、Mapped Typesという「型変換の型」を使えば、一瞬で解決できるんです。
「as」を使ったキーの再マッピング：名前を書き換える魔法
今回紹介する `as` キーワードは、そんな「型変換工場」の中で「ラベルの貼り替え」を行うための機能です。
想像してみてください。あなたは今、オンラインショップのデータベースを整理しています。元々のデータには `name`（名前）や `price`（値段）というキーが付いていますが、フロントエンドで表示する都合上、これらをすべて「大文字のプレフィックス付き（例：`GET_NAME`）」に一括変換したいとします。
そんな時、`as` を使うとこんなことができるんです。
// 元となるオブジェクトの型
type Product = {
name: string;
price: number;
};
// Mapped Typesでキーを魔法のように書き換える
// [K in keyof Product] で元のキーを一つずつ取り出し、
// as `GET_${Uppercase
type Getters = {
[K in keyof Product as `GET_${Uppercase
};
/
- 結果として生成される型はこれ：
- {
- GET_NAME: () => string;
- GET_PRICE: () => number;
- }
/
// 実際に使ってみる例
const productActions: Getters = {
GET_NAME: () => “美味しいリンゴ”,
GET_PRICE: () => 150,
};
console.log(productActions.GET_NAME()); // “美味しいリンゴ”
何が起きているのか？
1. `[K in keyof Product]`：まず、`name` と `price` というキーを取り出します。
2. `as`：ここで「今のキーを別の名前に変えるよ！」と宣言します。
3. “ `GET_${Uppercase
これだけで、手動で一行ずつ書き直す必要は一切なくなります。もし将来、`Product` 型に `stock`（在庫）という項目が増えても、この `Getters` 型は自動的に `GET_STOCK` を生成してくれます。これがTypeScriptの強さなんです。
—
つまずきやすいポイント：焦らなくて大丈夫
初めてこのコードを見たとき、「うわっ、記号の羅列だ…」と拒絶反応が出るのは当然です。特に `Uppercase
でも、全部を一度に覚えようとしなくて大丈夫です。
- 「`keyof` は、オブジェクトのキーを抜き出す魔法の言葉なんだな」
- 「`as` は、抜き出したキーを別の名前に書き換えるためのペンなんだな」
まずはこれくらいの理解で十分。現場のコードも、こうした小さな工夫の積み重ねでできています。最初は写経するだけでいいんです。エディタに打ち込んでみて、VSCodeが「あ、型が変換された！」と補完を出してくれる瞬間を体験してみてください。その瞬間に、きっと「なるほど！」という感動があるはずです。
—
最後に：TypeScriptは「君の味方」
TypeScriptは、あなたを縛り付けるための檻ではありません。むしろ、将来の自分が書く「バグ」という名の落とし穴から守ってくれる、頼もしいガイドです。
`as` を使ったキーの再マッピングは、中級者への入り口です。これが使えるようになると、APIから返ってきたデータをフロントエンドで使いやすい形に整える際、驚くほどコードがスッキリします。
ぜひ今日、自分のプロジェクトで試してみてください。「あ、これを使えばあの面倒な型定義、全部消せるかも！」と気づいたとき、あなたはもう一つ上のレベルのエンジニアになっていますよ。
もし分からないことがあれば、いつでもまた聞きに来てくださいね。あなたの成長を心から応援しています！
コメント