こんにちは！TypeScriptの世界へようこそ、チーフアーキテクトの私です。
TypeScriptを書き始めの頃って、「型」の壁にぶつかって、画面が赤く染まると心臓がキュッと縮こまりますよね。「なんだか難しそう……」「JavaScriptのままで気楽に書きたいよ！」なんて思うこともあるでしょう。大丈夫です、最初はみんなそこを通ります。私だって昔は`any`を連発して、後輩のコードレビューで冷や汗をかいたものです。
さて、今回はTypeScriptの中級者への第一歩であり、実務で毎日と言っていいほどお世話になる`Record
難しく聞こえるかもしれませんが、身近な例えを交えながら優しくほどいていくので、肩の力を抜いてコーヒーでも飲みながら読んでいってくださいね。
—
1. `Record`ってなに？ 身近な「ロッカー」で例えてみよう
Web開発をしていると、「特定のキー（名前やIDなど）があって、それぞれにデータが入っているようなオブジェクト」を作りたい場面に幾度となく遭遇します。
例えば、学校の「下駄箱」を想像してみてください。
木製の棚があって、それぞれのマス（キー）に、生徒の靴（値）が入っていますよね。
- キー（K）： 「1年1組」「1年2組」……というラベル
- 値（T）： その中に入っている「靴（または生徒のデータ）」
この「キーと値のペアを綺麗に整理整頓するための型」を作ってくれるのが、TypeScriptが最初から用意してくれている`Record
ざっくり日本語で言うなら、「このキーの組み合わせで、中身はこの型にする！」とビシッと指定できるラベルメーカーのようなものだと思ってください。
—
2. なぜ `Record` を使うの？（普通のオブジェクトじゃダメ？）
「普通にオブジェクトを書いちゃダメなの？」という疑問、とても素晴らしい着眼点です。例えば、ユーザーの権限（ロール）ごとにメッセージを変えたいとき、こんな風に書いたことはありませんか？
// 普通の書き方（これでも動きます）
const messages = {
admin: “管理者さま、こんにちは！”,
user: “一般ユーザーさま、こんにちは！”,
guest: “ゲストさま、こんにちは！”,
};
これでも動くには動くのですが、プロジェクトが大きくなってくると、こんな不安が出てきます。
- 「うっかり `adimn`（タイポ）って書いちゃったらどうしよう……」
- 「新しい権限 `super_admin` が増えたときに、書き忘れないように強制したい！」
ここで登場するのが `Record` です。TypeScriptに「キーはこれだけ！値は全部文字列だよ！」と厳しく、そして優しくルールを教え込むことができます。
—
3. 実践！ `Record` を使ってみよう
百聞は一見にしかず。実際にコードを書いてその便利さを体感してみましょう。コピペして手元のエディタ（VS Codeなど）で動かしてみてくださいね。
基本の使い方：曜日ごとの予定表
まずは、お馴染みの曜日をキーにして、その日の気分を表す文字列を値にするオブジェクトを作ってみましょう。
// 1. まず、使えるキーの範囲（型）をあらかじめ決めておきます
type DayOfWeek = “Monday” | “Tuesday” | “Wednesday” | “Thursday” | “Friday”;
// 2. Recordを使って、「曜日(K)」と「気分(T)」を紐付けます
const myMoods: Record
Monday: “眠い……”,
Tuesday: “まだエンジンがかからない”,
Wednesday: “週の折り返し！”,
Thursday: “あと少しだ頑張れ”,
Friday: “最高！！！”,
};
// もし、土曜日（Saturday）をうっかり入れようとすると……？
// const wrongMood: Record
// …
// Saturday: “休日だー” // ❌ エラー！「DayOfWeek」にSaturdayなんて聞いてないよ！と怒ってくれます
// };
どうでしょう？ 「キーのスペルミス」をTypeScriptが未然に防いでくれるので、バグが入り込む隙がなくなります。これが実務でめちゃくちゃ助かるポイントなんです。
—
4. ちょっとステップアップ：値に「複雑なオブジェクト」を入れてみる
実務のWeb制作では、値（T）がただの文字列ではなく、もっと複雑なオブジェクトであることがほとんどです。例えば、ECサイトでお馴染みの「商品データ」を管理してみましょう。
// 商品のデータ型を定義
type Product = {
name: string;
price: number;
inStock: boolean; // 在庫があるか
};
// 商品ID（キー）の型を定義
type ProductId = “apple” | “banana” | “orange”;
// Recordを使って、「商品ID」と「商品データ」をドッキング！
const fruitCatalog: Record
apple: {
name: “りんご”,
price: 150,
inStock: true,
},
banana: {
name: “バナナ”,
price: 100,
inStock: true,
},
orange: {
name: “みかん”,
price: 120,
inStock: false, // 売り切れ中
},
};
// 使うときはこんな感じ
console.log(fruitCatalog.apple.price); // 150 と表示されます
「どの商品IDに対しても、必ず `name`, `price`, `inStock` が揃っているデータ構造にしなさいよ」というルールを、この `Record
—
5. つまずきやすいポイントと「お守り」の言葉
初心者の頃、`Record` を使っていてよくやってしまうのが、「まだ値が決まっていない部分があるのに、先に型だけ厳しく定義してしまってビルドが通らない」という現象です。
例えば、最初は空っぽのオブジェクトからスタートして、あとからデータを追加していきたい場合：
// ⚠️ やりがちな例
// const userScores: Record
// userScores.Alice = 90; // これならOKだけど…
もし、どのようなキーが何個入るか完全に未知数な「ただの何でも入れられる辞書」を作りたいときは、キーに `string` を指定します。
// どんな名前（string）のキーでもOK、値は必ず数字（number）にする辞書
const scores: Record
Tanaka: 80,
Sato: 95,
// 自由に追加できます
};
// 後から追加もOK
scores.Suzuki = 88;
ただし、キーに `string` を許容しすぎると、TypeScriptの恩恵（タイポの検知など）が少し薄れてしまうので、「あらかじめキーが決まっているとき」はユニオン型（`”apple” | “banana”` のような書き方）を組み合わせるのが、プロの現場でも愛される美しい書き方です。
—
おわりに
お疲れ様でした！ `Record
最初は難しく感じる型定義も、ひとつひとつ「何を守るためのルールなのか」を紐解いていくと、実は私たちの開発をそっと支えてくれる心強い味方であることが分かります。
もしコード書いていて「赤線が出ちゃって意味がわからないよ……」と困ったときは、いつでも深呼吸してください。TypeScriptはあなたを困らせるためにあるのではなく、「未来のバグからあなたを守るための優しさ」ですからね。
それでは、快適なTypeScriptライフを！ チーフアーキテクトの私でした。
コメント