【TypeScript】連想配列（オブジェクト）の条件分岐、ループ、map、filterメソッドの使い方

はじめに

TypeScriptにおける連想配列（オブジェクト）の操作は、日常的な開発作業で頻繁に行われます。

特に、条件分岐とループを用いてデータを効果的に処理する技術は、プログラマーにとって必須のスキルです。

この記事では、TypeScriptの連想配列を使った条件分岐とループの基本的な使い方から応用技術までを、具体的なコード例と共に詳しく解説します。

: 参考【TypeScript】連想配列（オブジェクト）の基本的な使い方を徹底解説！！

はじめにこんにちは！ TypeScriptを使用する上で欠かせないデータ構造の一つに、連想配列（オブジェクト）があります。本記事では、TypeScriptで連想配列を効果的に使いこなす方法を、初心 ...

続きを見る

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

基本的なループと条件分岐

最も基本的な連想配列のループ処理はfor...inループを使用することです。

これにより、オブジェクトの各プロパティにアクセスし、条件に応じて処理を行うことができます。

ソースコード例

let userProfiles = {
    'john': { age: 25, email: 'john@example.com' },
    'jane': { age: 29, email: 'jane@example.com' }
};
for (let key in userProfiles) {
if (userProfiles.hasOwnProperty(key)) {
if (userProfiles[key].age > 27) {
console.log(key + ' is older than 27.');
}
}
}

let userProfiles = {

'john': { age: 25, email: 'john@example.com' },

'jane': { age: 29, email: 'jane@example.com' }

};

for (let key in userProfiles) {

if (userProfiles.hasOwnProperty(key)) {

if (userProfiles[key].age > 27) {

console.log(key + ' is older than 27.');

}

 出力結果
jane is older than 27.

この例では、オブジェクト内のすべてのユーザーをループし、27歳以上のユーザーの名前を出力しています。

ここでhasOwnPropertyを使用することで、プロトタイプチェーン上のプロパティがループに含まれることを防いでいます。

サルモリ

ループでピッピとチェックして、条件に合う人だけピックアップするんだよ。

Arrayメソッドを使ったループ処理

TypeScriptでは、連想配列のキーと値を配列に変換して、Array.prototypeメソッドでループ処理を行うことができます。

これにより、より複雑なデータ処理が可能になります。

ソースコード例

let scores = {
    'Alice': 98,
    'Bob': 75,
    'Charlie': 85
};
Object.keys(scores).forEach(key => {
console.log(key + ' scored ' + scores[key]);
});

let scores = {

'Alice': 98,

'Bob': 75,

'Charlie': 85

};

Object.keys(scores).forEach(key => {

console.log(key + ' scored ' + scores[key]);

});

 出力結果
Alice scored 98
Bob scored 75
Charlie scored 85

この例では、Object.keysを使用してオブジェクトのキーを配列に変換し、forEachメソッドで各要素にアクセスしています。

これは、単純なループよりも柔軟性が高く、読みやすいコードを書くのに役立ちます。

サルモリ

見て見て、一人一人の得点をサッと見ることができるよ！

条件に基づいたフィルタリング

条件分岐を使って、特定の条件に合致する要素のみを取り出す処理もよく行われます。以下の例では、特定のスコア以上のユーザーのみを抽出しています。

ソースコード例

let filteredScores = Object.entries(scores).filter(([key, value]) => value > 80).reduce((obj, [key, value]) => {
    obj[key] = value;
    return obj;
}, {});
console.log(filteredScores);

let filteredScores = Object.entries(scores).filter(([key, value]) => value > 80).reduce((obj, [key, value]) => {

obj[key] = value;

return obj;

}, {});

console.log(filteredScores);

 出力結果
{ Alice: 98, Charlie: 85 }

ここではObject.entriesを使ってオブジェクトを配列に変換し、filterで条件に合う要素だけを選択後、reduceで再びオブジェクトに変換しています。

サルモリ

スコアが80点以上の人だけ集めてみたよ！これでトップの人がすぐ分かるね。

複雑な条件でのデータ処理

時には、複数の条件を組み合わせてデータを処理する必要があります。次の例では、複数の条件を用いてユーザーのデータをフィルタリングしています。

ソースコード例

let users = {
    'john': { age: 25, subscription: true },
    'jane': { age: 29, subscription: false },
    'dave': { age: 20, subscription: true }
};
let eligibleUsers = Object.keys(users).filter(key => users[key].age > 24 && users[key].subscription).map(key => key);
console.log(eligibleUsers);

let users = {

'john': { age: 25, subscription: true },

'jane': { age: 29, subscription: false },

'dave': { age: 20, subscription: true }

};

let eligibleUsers = Object.keys(users).filter(key => users[key].age > 24 && users[key].subscription).map(key => key);

console.log(eligibleUsers);

 出力結果
[john]

この処理では、24歳以上でサブスクリプションが有効なユーザーのみを選択しています。

このように、filterとmapを組み合わせることで、複雑な条件に基づいたデータの選択が可能です。

サルモリ

条件をクリアするのはジョンだけだったね！条件って大事だよね。

まとめ

この記事では、TypeScriptの連想配列を使った条件分岐とループの様々なテクニックを学びました。

これらの基本から応用までの知識は、日々の開発において非常に役立つでしょう。

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

サルモリ

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

【TypeScript】連想配列（オブジェクト）の条件分岐、ループ、map、filterメソッドの使い方

はじめに

参考【TypeScript】連想配列（オブジェクト）の基本的な使い方を徹底解説！！

基本的なループと条件分岐

Arrayメソッドを使ったループ処理

条件に基づいたフィルタリング

複雑な条件でのデータ処理

まとめ

Ads Blocker Detected!!!