【TypeScript】配列、連想配列（オブジェクト）の相互変換方法を徹底解説！！

TypeScriptでの配列操作は、データ構造を効率的に扱うための基本的なスキルです。

この記事では、TypeScriptを用いて配列を連想配列に変換する様々な方法を、具体的なソースコード例と共に詳しく解説します。

さまざまなパターンや、メソッドの引数や戻り値の詳細にも触れながら、読者が実践的な知識を深められるように構成しました。

1. mapメソッドを使用した変換

JavaScriptのArray.prototype.mapメソッドを利用すると、配列の各要素に関数を適用し、その結果から新しい配列を作成することができます。TypeScriptでは、このmapメソッドを使用して、配列の要素を新しいプロパティを持つオブジェクトに変換し、それらを連想配列にまとめることが可能です。

以下の例では、idをキーとして、名前と年齢を値とするオブジェクトの配列から、idをキーとし、その他の情報を値とする連想配列に変換しています。

サルモリ

mapメソッドは変換処理にめちゃくちゃ便利だね！

ソースコード例

class Program {
    public static main(): void {
        const users = [
            { id: 1, name: 'Taro', age: 25 },
            { id: 2, name: 'Jiro', age: 22 }
        ];
        const userMap = users.reduce((acc, user) => {
            acc[user.id] = { name: user.name, age: user.age };
            return acc;
        }, {});
        console.log(userMap);
    }
}
Program.main();

class Program {

public static main(): void {

const users = [

{ id: 1, name: 'Taro', age: 25 },

{ id: 2, name: 'Jiro', age: 22 }

];

const userMap = users.reduce((acc, user) => {

acc[user.id] = { name: user.name, age: user.age };

return acc;

}, {});

console.log(userMap);

}

Program.main();

 出力結果
{ '1': { name: 'Taro', age: 25 }, '2': { name: 'Jiro', age: 22 } }

アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、TypeScriptの世界が変わる

2. reduceメソッドによる効率的な変換

Array.prototype.reduceメソッドは、配列の各要素に対して（引数に与えた初期値から開始して）リデューサ関数を適用し、単一の出力値を生成します。このメソッドは、配列を連想配列に変換するのに特に適しています。

以下の例では、先ほどのmapメソッドの例を、reduceメソッドを使用してより効率的に実装しています。

サルモリ

reduceって、データの変換にめっちゃ強力だね！

ソースコード例

class Program {
    public static main(): void {
        const users = [
            { id: 1, name: 'Taro', age: 25 },
            { id: 2, name: 'Jiro', age: 22 }
        ];
        const userMap = users.reduce((acc, user) => {
            acc[user.id] = { name: user.name, age: user.age };
            return acc;
        }, {});
        console.log(userMap);
    }
}
Program.main();

class Program {

public static main(): void {

const users = [

{ id: 1, name: 'Taro', age: 25 },

{ id: 2, name: 'Jiro', age: 22 }

];

const userMap = users.reduce((acc, user) => {

acc[user.id] = { name: user.name, age: user.age };

return acc;

}, {});

console.log(userMap);

}

Program.main();

 出力結果
{ '1': { name: 'Taro', age: 25 }, '2': { name: 'Jiro', age: 22 } }

3. キーと値の配列から連想配列を作成する

場合によっては、キーと値がそれぞれ別の配列に格納されていることもあります。このような場合、2つの配列を組み合わせて一つの連想配列を作成することが求められることがあります。

以下の例では、keys配列とvalues配列を利用して、それらの要素を組み合わせた連想配列を作成しています。この処理には、Array.prototype.reduceメソッドとArray.prototype.forEachメソッドを組み合わせて使用します。

サルモリ

配列を組み合わせるのも、案外簡単にできちゃうんだね！

ソースコード例

class Program {
    public static main(): void {
        const keys = ['id', 'name', 'age'];
        const values = [1, 'Taro', 25];
        const obj = keys.reduce((acc, key, index) => {
            acc[key] = values[index];
            return acc;
        }, {});
        console.log(obj);
    }
}
Program.main();

class Program {

public static main(): void {

const keys = ['id', 'name', 'age'];

const values = [1, 'Taro', 25];

const obj = keys.reduce((acc, key, index) => {

acc[key] = values[index];

return acc;

}, {});

console.log(obj);

}

Program.main();

 出力結果
{ id: 1, name: 'Taro', age: 25 }

4. TypeScriptの型を活用した連想配列の扱い

TypeScriptを使う大きな利点の一つに、型安全性があります。配列や連想配列を扱う際にも、TypeScriptの型システムを活用することで、より安全かつ明確にデータ構造を扱うことができます。

以下の例では、連想配列の型を明示的に定義しています。これにより、連想配列が特定の形式のデータのみを含むことを保証し、型チェックを利用してエラーを未然に防ぐことができます。

サルモリ

型をしっかり定義しておくと、バグを減らせるから安心だね！

ソースコード例

class Program {
    public static main(): void {
        interface User {
            id: number;
            name: string;
            age: number;
        }
        const users: Record<number, User> = {
            1: { id: 1, name: 'Taro', age: 25 },
            2: { id: 2, name: 'Jiro', age: 22 }
        };
        console.log(users);
    }
}
Program.main();

class Program {

public static main(): void {

interface User {

id: number;

name: string;

age: number;

}

const users: Record<number, User> = {

1: { id: 1, name: 'Taro', age: 25 },

2: { id: 2, name: 'Jiro', age: 22 }

};

console.log(users);

}

Program.main();

 出力結果
{ '1': { id: 1, name: 'Taro', age: 25 }, '2': { id: 2, name: 'Jiro', age: 22 } }

5. より複雑なデータ構造への変換

実際のプロジェクトでは、より複雑なデータ構造を扱う必要があります。たとえば、配列の配列を連想配列に変換するなど、単純なキーと値のペア以上の情報を含む連想配列を作成することが求められることがあります。

以下の例では、ユーザーの趣味を含む情報を持つ配列を、ユーザーIDをキーとする連想配列に変換しています。このようにして、複雑なデータも効率的に管理できます。

サルモリ

データが複雑になっても、うまく扱えるようになりたいな！

ソースコード例

class Program {
    public static main(): void {
        interface User {
            id: number;
            name: string;
            age: number;
            hobbies: string[];
        }
        const users: User[] = [
            { id: 1, name: 'Taro', age: 25, hobbies: ['Reading', 'Swimming'] },
            { id: 2, name: 'Jiro', age: 22, hobbies: ['Cooking', 'Running'] }
        ];
        const userMap: Record<number, User> = users.reduce((acc, user) => {
            acc[user.id] = user;
            return acc;
        }, {});
        console.log(userMap);
    }
}
Program.main();

class Program {

public static main(): void {

interface User {

id: number;

name: string;

age: number;

hobbies: string[];

}

const users: User[] = [

{ id: 1, name: 'Taro', age: 25, hobbies: ['Reading', 'Swimming'] },

{ id: 2, name: 'Jiro', age: 22, hobbies: ['Cooking', 'Running'] }

];

const userMap: Record<number, User> = users.reduce((acc, user) => {

acc[user.id] = user;

return acc;

}, {});

console.log(userMap);

}

Program.main();

 出力結果
{ '1': { id: 1, name: 'Taro', age: 25, hobbies: ['Reading', 'Swimming'] }, '2': { id: 2, name: 'Jiro', age: 22, hobbies: ['Cooking', 'Running'] } }

6. 連想配列から配列への変換

逆に、連想配列（オブジェクト）から配列への変換が必要な場合もあります。このプロセスは、特にAPIから受け取ったデータを加工する場合や、特定のデータ構造を要求するライブラリを使用する場合に有用です。

JavaScript（およびTypeScript）では、Object.keys、Object.values、Object.entriesなどのメソッドを使用して、オブジェクトのキー、値、またはキーと値のペアを配列として取得することができます。

これらのメソッドを利用することで、連想配列から配列への変換を簡単に行うことができます。

6.1 キーの配列を取得する

Object.keysメソッドを使用して、連想配列（オブジェクト）の全てのキーを配列として取得できます。

以下の例では、ユーザーオブジェクトから全てのキーを取得しています。

サルモリ

こんなに簡単にキーだけ取り出せるんだ！

ソースコード例

class Program {
    public static main(): void {
        const user = { id: 1, name: 'Taro', age: 25 };
        const keys = Object.keys(user);
        console.log(keys);
    }
}
Program.main();

class Program {

public static main(): void {

const user = { id: 1, name: 'Taro', age: 25 };

const keys = Object.keys(user);

console.log(keys);

}

Program.main();

 出力結果
['id', 'name', 'age']

6.2 値の配列を取得する

同様に、Object.valuesメソッドを使用して、連想配列の全ての値を配列として取得することができます。

以下の例では、ユーザーオブジェクトから全ての値を取得しています。

サルモリ

値もこんなに簡単に取り出せるなんて、便利すぎる！

ソースコード例

class Program {
    public static main(): void {
        const user = { id: 1, name: 'Taro', age: 25 };
        const values = Object.values(user);
        console.log(values);
    }
}
Program.main();

class Program {

public static main(): void {

const user = { id: 1, name: 'Taro', age: 25 };

const values = Object.values(user);

console.log(values);

}

Program.main();

 出力結果
[1, 'Taro', 25]

6.3 キーと値のペアの配列を取得する

Object.entriesメソッドを使用すると、連想配列の各エントリー（キーと値のペア）を配列として取得できます。これは、連想配列のキーと値の両方に同時にアクセスしたい場合に特に有用です。

以下の例では、ユーザーオブジェクトからキーと値のペアを取得しています。

サルモリ

キーと値のペアもこんな風に取り出せるんだ！すごいな！

ソースコード例

class Program {
    public static main(): void {
        const user = { id: 1, name: 'Taro', age: 25 };
        const entries = Object.entries(user);
        console.log(entries);
    }
}
Program.main();

class Program {

public static main(): void {

const user = { id: 1, name: 'Taro', age: 25 };

const entries = Object.entries(user);

console.log(entries);

}

Program.main();

 出力結果
[['id', 1], ['name', 'Taro'], ['age', 25]]

こちらもCHECK

: 【TypeScript】配列操作、配列の基本的な使い方を徹底解説！

Typescriptでの配列の使い方完全ガイドこの記事では、Typescriptを使った配列の基本から応用までを網羅的に解説します。配列はプログラミングにおいて非常によく使われるデータ構造の一つで ...

続きを見る

まとめ

この記事では、TypeScriptで配列を連想配列に変換する方法から、その逆の変換方法まで、様々なテクニックを詳細に解説しました。

配列と連想配列はJavaScriptやTypeScriptで頻繁に使用されるデータ構造であり、これらの変換方法を理解することは、効率的なデータ操作に不可欠です。今回紹介したメソッドやテクニックを活用することで、より複雑なデータ構造の操作にも対応できるようになるでしょう。

最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！

サルモリ

最後まで読んでくれてありがとう！！

【TypeScript】配列、連想配列（オブジェクト）の相互変換方法を徹底解説！！

1. mapメソッドを使用した変換

2. reduceメソッドによる効率的な変換

3. キーと値の配列から連想配列を作成する

4. TypeScriptの型を活用した連想配列の扱い

5. より複雑なデータ構造への変換

6. 連想配列から配列への変換

6.1 キーの配列を取得する

6.2 値の配列を取得する

6.3 キーと値のペアの配列を取得する

【TypeScript】配列操作、配列の基本的な使い方を徹底解説！

まとめ

Ads Blocker Detected!!!