TypeScriptのRecord型の9つの詳細な使い方

はじめに
●Record型の基本
- ○Record型とは？
- ○Record型のメリット
●Record型の詳細な使い方
●Record型の応用例
●注意点と対処法
- ○Record型の型安全性とその限界
- ○サンプルコード7：型安全性を強化するRecord型の利用法
●カスタマイズ方法
- ○サンプルコード8：カスタム型を組み合わせたRecord型の作成
- ○サンプルコード9：拡張可能なRecord型の定義方法
まとめ

はじめに

TypeScriptは、JavaScriptのスーパーセットとして、型安全性を持つ言語として非常に人気があります。

TypeScriptの型システムは多様で、特にRecord型は、オブジェクトのキーと値の型を柔軟に定義することができるため、多くの場面で役立ちます。

この記事では、初心者から上級者まで、TypeScriptのRecord型の使い方やその魅力を、具体的なサンプルコードと共に学んでいきます。

●Record型の基本

TypeScriptを使った開発では、オブジェクトの構造をより厳密に定義することが求められます。

このようなコンテキストで、Record型はその利便性と効率性を最大限に発揮します。

キーと値の型をそれぞれ定めることで、オブジェクトをより正確に表現し、開発のさまざまな段階でその有効性が認識されます。

さて、それではRecord型の基本を見ていきましょう。

○Record型とは？

Record型はTypeScriptにおいて、オブジェクトのキーと値の型を指定するためのユーティリティ型です。

具体的には、Recordという形で型を定義することができ、Kはオブジェクトのキーの型、Tはオブジェクトの値の型を示しています。

例えば、次のコードは、キーが文字列、値が数値のオブジェクトの型を示しています。

type NumberDictionary = Record<string, number>;
const sample: NumberDictionary = {
    age: 25,
    height: 170
};

このコードでは、NumberDictionary型を使って、キーが文字列で値が数値のオブジェクトsampleを定義しています。

○Record型のメリット

Record型の最大のメリットは、その柔軟性にあります。

任意のキーの型と値の型を組み合わせることができるため、さまざまなシチュエーションで活用することができます。

特に、動的なキーを持つオブジェクトや、特定のキーとそれに対応する値の型を持つオブジェクトなど、複雑なオブジェクトの型定義を行いたい場合に大変役立ちます。

また、Record型を利用することで、型の再利用が容易になります。複数の箇所で同じキーと値の型を持つオブジェクトを使用する際に、一度定義したRecord型を再利用することで、コードの冗長性を減らすことができます。

更に、Record型を使用することで、型エラーを早期に検出できるメリットもあります。

例えば、特定のキーに対して不正な型の値を設定しようとした場合、TypeScriptの型チェッカーがエラーを出してくれるため、バグの予防や早期発見に役立ちます。

●Record型の詳細な使い方

TypeScriptはJavaScriptに静的型チェックを導入する強力なツールです。

中でもRecord型は、キーと値のペアを型として定義する際に非常に役立ちます。

そのため、TypeScriptを活用する開発者ならば、Record型の詳細な使い方を知っておくことは必須です。

○サンプルコード1：基本的なRecord型の定義

Record型を定義する基本的な方法から見ていきましょう。

// Record型の基本的な定義
type CarBrands = "Toyota" | "Honda" | "Nissan";
type CarColors = "Red" | "Blue" | "Green";

// CarInfoというRecord型を定義
const CarInfo: Record<CarBrands, CarColors> = {
  Toyota: "Red",
  Honda: "Blue",
  Nissan: "Green",
};

このコードでは、まずCarBrandsとCarColorsという2つのUnion型を定義しています。

次に、Record<CarBrands, CarColors>という形でRecord型を定義しています。

この定義方法により、CarBrandsの各ブランド（キー）に対して、CarColorsの色（値）を関連付けることができます。

このコードを実行すると、CarInfoオブジェクトには各車のブランドとそれに関連する色が格納されます。

この基本的な使い方は、特定のキーに対して特定の値を関連付ける際に非常に便利です。

例えば、APIから取得したデータのキーと、それに対応する表示名や色を関連付けたい場合などに使用することができます。

○サンプルコード2：動的なキーを持つRecord型

TypeScriptのRecord型は非常に強力で、動的なキーを持つオブジェクトの型を効果的に定義することができます。

一般的なオブジェクトでは、事前にキーを固定しておく必要がありますが、Record型を使用すると、様々なキーの組み合わせでオブジェクトを定義することが可能となります。

これは、設定や動的なデータ構造を持つアプリケーションを開発する際に非常に役立ちます。

動的なキーを持つRecord型の基本的な使い方を紹介します。

// キーとして使われる文字列のリストを定義
type KeyList = "keyA" | "keyB" | "keyC";

// Record型を使って、KeyListの各キーに数値を割り当てる型を定義
type DynamicKeyObject = Record<KeyList, number>;

// 実際のオブジェクトを定義
const obj: DynamicKeyObject = {
    keyA: 1,
    keyB: 2,
    keyC: 3
};

console.log(obj.keyA);  // 1

このコードでは、まずKeyListという型を定義して、その中で使われる文字列のリストを指定しています。

そして、Record<KeyList, number>を使って、これらのキーそれぞれに数値を割り当てる新しい型DynamicKeyObjectを作成しています。

最後に、この新しく定義した型を使って、実際のオブジェクトobjを定義しています。

このオブジェクトにはkeyA, keyB, keyCという3つのキーがあり、それぞれのキーには数値が割り当てられています。

オブジェクトobjのkeyAをコンソールに出力すると、1と表示されます。

○サンプルコード3：異なる型を持つ複数のキー

TypeScriptでは、Record型を使用して、複数のキーが異なる型を持つオブジェクトを簡潔に定義することができます。

ここでは、異なる型を持つ複数のキーを持つRecord型の定義と使用方法を詳しく解説します。

まず、基本的なサンプルコードを見てみましょう。

type User = {
    id: number;
    name: string;
    isMember: boolean;
}

type KeysAndTypes = {
    id: 'number';
    name: 'string';
    isMember: 'boolean';
}

type DynamicRecord = Record<keyof KeysAndTypes, keyof any>;

このコードでは、まずUserという型を定義しています。

この型は3つのキー（id, name, isMember）を持っており、それぞれ異なる型（number, string, boolean）を持っています。

次に、KeysAndTypesという型を定義しています。

この型は、User型のキー名とそのキーの型の文字列を持つオブジェクトを表しています。

最後に、DynamicRecordという型を定義しています。

この型は、KeysAndTypesのキー名をキーとし、任意の型を値として持つオブジェクトの型を表しています。

このコードを実行すると、DynamicRecordは次のようなオブジェクトの型を持つことになります。

{
    id: any;
    name: any;
    isMember: any;
}

このように、Record型を使用すると、異なる型を持つ複数のキーを持つオブジェクトの型を簡潔に定義することができます。

また、上記の例では、DynamicRecordの各キーの型はanyとなっていますが、実際には具体的な型を指定することもできます。

例えば、次のようにKeysAndTypesのキーの型の文字列を使用して、具体的な型を指定することも可能です。

type SpecificRecord = {
    [K in keyof KeysAndTypes]: K extends keyof KeysAndTypes ? KeysAndTypes[K] : never;
}

このコードを実行すると、SpecificRecordは次のようなオブジェクトの型を持つことになります。

{
    id: 'number';
    name: 'string';
    isMember: 'boolean';
}

●Record型の応用例

TypeScriptのRecord型は非常に柔軟性があり、様々な場面で役立てることができます。

その使い方の一つとして、関数の引数として利用する方法を解説します。

○サンプルコード4：Record型を関数の引数として使用

実際のコードを通して、どのようにRecord型を関数の引数として利用するかを理解していきましょう。

type UserInfo = Record<string, string | number>;

function showUserInfo(data: UserInfo) {
    for (const [key, value] of Object.entries(data)) {
        console.log(`${key}: ${value}`);
    }
}

const user: UserInfo = {
    name: "山田太郎",
    age: 25,
    address: "東京都新宿区"
};

showUserInfo(user);

このコードでは、ユーザーの情報を表すUserInfo型をRecord型として定義しています。

この型は、文字列のキーと、文字列または数値の値を持つオブジェクトを表します。

次に、showUserInfo関数では、このUserInfo型のデータを受け取って、各情報をコンソールに出力する処理を行っています。

最後に、userオブジェクトを定義し、そのデータをshowUserInfo関数に渡しています。

山田太郎さんの情報をコンソールに出力すると、以下のような結果になります。

name: 山田太郎
age: 25
address: 東京都新宿区

○サンプルコード5：Record型とマッピング型の組み合わせ

TypeScriptには、型を動的に作成するための「マッピング型」という機能があります。

マッピング型は、既存の型を基に新しい型を派生させるときに非常に役立ちます。

そして、このマッピング型とRecord型を組み合わせることで、さまざまなシチュエーションでの型定義を効率的に行うことができます。

まず、基本的なマッピング型の定義方法を見てみましょう。

type Keys = 'key1' | 'key2' | 'key3';
type MyMappedType = {
    [K in Keys]: number;
};

このコードでは、Keysという文字列のリテラル型を定義しています。

そして、マッピング型のMyMappedTypeでは、Keysに含まれる各キーをnumber型としてマッピングしています。

次に、このマッピング型とRecord型を組み合わせた例を見てみましょう。

type MyRecordType = Record<Keys, number>;

このコードでは、先ほどのマッピング型と同じ型を、Record型を使って一行で定義しています。

具体的にはKeysの各キーをnumber型にマッピングしています。

このコードを実行すると、MyRecordTypeは次のような型になります。

{
    key1: number;
    key2: number;
    key3: number;
}

この結果からもわかるように、Record型とマッピング型を組み合わせることで、効率的に型を定義することができます。

特に、キーの数が多い場合や動的にキーが変わる場合など、型の定義が複雑になりがちなシチュエーションでの利用が推奨されます。

○サンプルコード6：Record型を使ったデータ変換

TypeScriptのRecord型は非常に強力で、様々なシチュエーションでのデータ変換を簡単に行うことができます。

例えば、特定のオブジェクトの各キーに対応する値を、一定のルールに基づいて変換したい場面があるとします。

この時、Record型を使うと簡潔に変換処理を記述することができます。

下記のサンプルコードでは、都市名をキーとし、その都市の人口を値とするオブジェクトを考えます。

この都市名と人口のオブジェクトから、各都市の人口が100万以上の場合は「大都市」という文字列に、それ未満の場合は「小都市」という文字列に変換する例を見てみましょう。

type CityPopulation = {
  [city: string]: number;
}

const cities: CityPopulation = {
  東京: 13000000,
  大阪: 8800000,
  名古屋: 2300000,
  福岡: 1500000,
  仙台: 800000
};

type CitySize = Record<string, "大都市" | "小都市">;

function convertCitySize(populations: CityPopulation): CitySize {
  let result: CitySize = {};

  for (const city in populations) {
    result[city] = populations[city] >= 1000000 ? "大都市" : "小都市";
  }

  return result;
}

const citySizes = convertCitySize(cities);
console.log(citySizes);

このコードでは、まずCityPopulationという型を定義しています。

この型は都市名をキーとし、人口数を値とするオブジェクトの型です。

次に、CitySizeというRecord型を定義しています。

これは都市名をキーとし、「大都市」または「小都市」という文字列を値とするオブジェクトの型です。

convertCitySize関数では、受け取ったpopulationsオブジェクトの各都市の人口を基に、大都市か小都市かを判定し、新たなオブジェクトとして返しています。

このコードを実行すると、citySizesオブジェクトには次のような結果が格納されます。

{
  東京: '大都市',
  大阪: '大都市',
  名古屋: '大都市',
  福岡: '大都市',
  仙台: '小都市'
}

都市の人口が100万以上のものは「大都市」として、それ未満のものは「小都市」として正しく変換されていることが確認できます。

このようにRecord型を活用することで、キーと値のペアを持つオブジェクトのデータ変換をスムーズに行うことができます。

●注意点と対処法

TypeScriptのRecord型は非常に強力で柔軟性がありますが、それゆえに使い方を誤ると予期しないエラーやバグを生む可能性があります。

ここでは、Record型を使用する上での主要な注意点と、それらの問題を効果的に回避または対処する方法について詳しく説明します。

○Record型の型安全性とその限界

TypeScriptは、型安全な言語であるため、コードのエラーをコンパイル時に検出することができます。

しかし、Record型を使用する際には、型安全性が損なわれる場合があります。

例えば、存在しないキーにアクセスした場合や、期待する型と異なる値を代入した場合など、Record型の特性上、これらのエラーを完全に防ぐのは難しい場面があります。

このコードでは、存在しないキーへのアクセスを表しています。

const userRecord: Record<string, string> = {
    name: "Taro",
    age: "25"
};

// このコードを実行すると、ageがstring型であるためエラーにならないが、実際は数値型であるべきである。
const age = userRecord["age"]; // "25"

上記の例では、userRecord の age キーの値が文字列型として定義されているため、エラーは発生しません。

しかし、このような場合に型安全性が損なわれると、ランタイム時に予期しない動作やバグが生じるリスクが増えます。

○サンプルコード7：型安全性を強化するRecord型の利用法

型安全性を確保するための一つの方法は、具体的なキーのセットを使用してRecord型を定義することです。

この方法では、限定されたキーのみを許可し、それ以外のキーに対するアクセスや代入を防ぐことができます。

下記のコードは、具体的なキーのセットを持つRecord型の使用例を表しています。

type UserInfoKeys = "name" | "age";
const userRecord: Record<UserInfoKeys, string> = {
    name: "Taro",
    age: "25"
};

// 存在しないキーへのアクセスを試みると、コンパイル時にエラーとなる。
// const address = userRecord["address"]; // エラー: 型 '"address"' の引数を型 'UserInfoKeys' のパラメーターに割り当てることはできません。

このコードでは、UserInfoKeys 型を使ってRecord型のキーを限定しています。

そのため、許可されていないキーへのアクセスや代入を試みると、コンパイル時にエラーが発生します。

これにより、予期しないキーの使用を防ぐことができ、型安全性を高めることができます。

●カスタマイズ方法

TypeScriptのRecord型は、さまざまなカスタマイズが可能です。

そのため、プロジェクトのニーズに合わせて、柔軟に型定義を行うことができます。

ここでは、カスタム型を組み合わせたRecord型の作成方法について詳しく説明していきます。

○サンプルコード8：カスタム型を組み合わせたRecord型の作成

TypeScriptでは、カスタム型を定義して、それをRecord型に組み込むことができます。

カスタム型として「AnimalType」という型を定義し、それをキーとするRecord型を作成するサンプルコードを紹介します。

// AnimalTypeというカスタム型を定義
type AnimalType = 'Dog' | 'Cat' | 'Bird';

// AnimalTypeをキーとするRecord型を定義
type AnimalSounds = Record<AnimalType, string>;

const animals: AnimalSounds = {
  Dog: 'ワンワン',
  Cat: 'ニャー',
  Bird: 'ピーピー'
};

console.log(animals.Dog);  // ワンワン

このコードでは、AnimalTypeというカスタム型を使って3つの動物の種類を定義しています。

その後、このカスタム型をキーとして、動物の鳴き声を表す文字列を値とするRecord型、AnimalSoundsを定義しています。

animalsという変数には、AnimalSounds型を用いて動物と鳴き声の関連を表しています。

このコードを実行すると、animals.Dogを参照した際に「ワンワン」という結果が得られます。

これにより、カスタム型をキーとするRecord型を効果的に使用することができ、コードの可読性や保守性を高めることができます。

また、AnimalTypeというカスタム型を利用することで、動物の種類を追加や削除する際も、AnimalTypeの定義を変更するだけで済むため、コードの変更が最小限で済む利点があります。

続いて、サンプルコードの実行結果です。animals.Dogを参照すると、上述したとおり「ワンワン」という文字列が出力されます。

これにより、定義したRecord型が正確に動作していることが確認できます。

○サンプルコード9：拡張可能なRecord型の定義方法

TypeScriptのRecord型は非常に柔軟性が高く、独自のカスタマイズを行いたい場合にも十分な拡張性を持っています。

ここでは、拡張可能なRecord型の定義方法について、具体的なサンプルコードを通して詳しく解説していきます。

// 基本的なRecord型の定義
type BaseRecord = Record<string, string>;

// 拡張したい新しい型の定義
interface ExtendedAttributes {
  age: number;
  isActive: boolean;
}

// 拡張されたRecord型の定義
type ExtendedRecord = BaseRecord & ExtendedAttributes;

このコードでは、まず基本的なRecord型BaseRecordを定義しています。

こちらは文字列のキーと文字列の値を持つオブジェクトの型を表します。

次に、ExtendedAttributesという新しい型を定義しています。

この型にはageという数値の属性と、isActiveという真偽値の属性が含まれています。

最後に、&演算子を使用して、BaseRecordとExtendedAttributesの両方の属性を持つ新しい型ExtendedRecordを定義しています。

この方法を使用すると、既存のRecord型を基に、追加の属性や機能を持つ新しい型を簡単に作成することができます。

例えば、上記のExtendedRecord型を使用して、次のようなオブジェクトを定義することができます。

const person: ExtendedRecord = {
  name: "田中太郎",
  age: 30,
  isActive: true
};

console.log(person.name);  // 出力: 田中太郎
console.log(person.age);   // 出力: 30
console.log(person.isActive); // 出力: true

上記のコードを実行すると、オブジェクトpersonの各属性の値が正しく取得され、コンソールにそれぞれの値が出力されます。

これにより、ExtendedRecord型のオブジェクトが正しく機能することが確認できます。