ようこそ、TypeScriptの世界へ。
フロントエンドの現場で長年コードを書き、数えきれないほどのバグと格闘してきた私が、今日はあなたに「TypeScriptにおける最高に便利で、かつ優しい道具」を一つ紹介しましょう。
それが、`Record
「Record（レコード）？ 記録のこと？」と思うかもしれませんね。まさにその通り。これは、「どんなラベル（キー）に、どんな中身（値）を入れるか」というルールをあらかじめ決めておくための型なんです。
初心者の方が最初につまずきがちな「オブジェクトの型定義」を、驚くほどスッキリと、そして安全に解決してくれる魔法の合言葉。今日はその正体を、身近な例え話を交えながら一緒に紐解いていきましょう。
—
1. Record型は「ラベル付きの仕切り棚」
想像してみてください。あなたは今、小さなカフェの店主だとしましょう。
お店には「コーヒー」「紅茶」「カフェラテ」という3つのメニューがあります。それぞれの価格を管理するリストを作りたい時、あなたならどうしますか？
TypeScriptを使わないJavaScriptの世界では、こんな風に書くでしょう。
const menuPrices = {
coffee: 300,
tea: 350,
latte: 400
};
これだけでも動きます。でも、もし新人のアルバイトさんが間違えて `menuPrices.pizza = “無料！”` なんて書き込んでしまったら？ あるいは `coffee` を `coffi` と打ち間違えたら？ JavaScriptは何も言わずにそれを受け入れてしまい、後で大混乱が起きます。
ここで登場するのが `Record` です。
`Record<ラベルの種類, 中身の種類>` という書き方で、「この棚には、このラベルしか貼っちゃダメだし、中身はこの種類じゃないと許さないよ」というルールを作れるのです。
—
2. 実際に書いてみよう：基本の形
まずは、一番シンプルな書き方を見てみましょう。
「ラベル（キー）は文字列(string)で、中身（値）は数字(number)ですよ」という宣言です。
// Record<キーの型, 値の型> という順番で書きます
const scoreBoard: Record
“田中さん”: 80,
“佐藤さん”: 95,
“鈴木さん”: 70,
};
// これならOK！
scoreBoard[“高橋さん”] = 100;
// これはダメ！ TypeScriptが「数字じゃないよ！」と優しく怒ってくれます
// scoreBoard[“伊藤さん”] = “欠席”; // エラー：型 ‘string’ を型 ‘number’ に割り当てることはできません。
このように、`Record
—
3. 【ここが本番】ラベルを限定して「うっかり」を防ぐ
実務で一番「なるほど！」と膝を打つのは、ラベルの名前をあらかじめ決めておく使い方です。
先ほどのカフェの例に戻りましょう。メニューが決まっているなら、適当な名前（string）を許すのではなく、「この3つだけ！」と指定したほうがずっと安全です。
// 1. まず、使えるラベル（メニュー名）を定義します
type MenuCategory = ‘coffee’ | ‘tea’ | ‘latte’;
// 2. Recordを使って、「このメニュー以外は認めない」というルールを作ります
const myCafeMenu: Record
coffee: 400,
tea: 450,
latte: 500,
// pizza: 1000, // ← エラー！MenuCategoryに ‘pizza’ は入っていないので、追加できません。
};
// 3. 全部のラベルを埋めないと怒ってくれるのも、Recordの優しさです
/
const incompleteMenu: Record
coffee: 400,
// tea と latte が足りないので、TypeScriptが「足りないよ！」と教えてくれます
};
/
現場で開発をしていると、つい「あの設定項目、名前なんだっけ？」と忘れてしまうことがあります。でも、こうして `Record` で型を決めておけば、エディタが「次はこれが必要ですよ」と候補を出してくれるようになるんです。これが「型に守られる」という感覚の第一歩です。
—
4. 迷いやすいポイント：「any」や「unknown」との付き合い方
初心者のうちは、値の型に何を入れたらいいか分からず、ついつい `Record
`any` は「なんでも来い！」という無敵の型ですが、使いすぎるとTypeScriptの魔法（バグを見つける力）が消えてしまいます。
もし「中身が何になるかまだ分からない」という時は、`any` ではなく `unknown` を使ってみてください。
// 何が入るか分からないけど、とりあえず入れ物だけ作りたいとき
const secretBox: Record
item1: “秘密の手紙”,
item2: 12345,
};
// unknownを使うと、「使うときにはちゃんと型を確認してね」というルールになるので、
// anyよりもずっと安全に、未来の自分を助けることができます。
—
5. まとめ：Recordはあなたの「整理整頓」のパートナー
TypeScriptの `Record` は、決してあなたを縛り付けるための厳しい校則ではありません。むしろ、「ここにはこれが入るから、安心してコードを書いていいよ」と背中を押してくれる、頼れる整理整頓のパートナーです。
- `Record
- `Record<'A' | 'B', string>` ： 決まった名前（AかB）で、文字を管理したいとき。
まずはこの2つを覚えるだけで、あなたの書くコードの信頼性はグッと上がります。
エラーの赤い波線が出ても、怖がらないでください。それはTypeScriptが「ここ、間違えそうだよ、大丈夫？」とそっと肩を叩いてくれている合図です。
一歩ずつ、楽しみながら学んでいきましょう。あなたなら、きっと使いこなせるようになりますよ。
—
チーフアーキテクトからのアドバイス：
現場では、APIのレスポンスや、多言語対応の翻訳データ（`Record
コメント