JavaScriptの連想配列の基本から応用まで！追加・検索・ループ・ソートのコツを徹底解説

JavaScriptの連想配列は、キーと値のペアでデータを管理できるとても便利なオブジェクトです。

しかし、配列とは異なる特性を持つため、扱い方をしっかり理解しておく必要があります。

連想配列を使いこなせるようになれば、コードの可読性が上がり、より効率的にプログラミングできるようになるでしょう。

本記事では、連想配列の基本から応用までを網羅的に解説します。
コード例も豊富に紹介するので、ぜひ実践しながら学んでいってください！

この記事を書いた人

• 現役のフルスタックエンジニアとして活躍中
• 開発チームリーダーとして複数プロジェクトをリード
• 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
• プログラミングスクールのカリキュラム執筆経験あり

連想配列とは

連想配列は、キーと値のペアを格納できるオブジェクトです。

配列が数値のインデックスで要素にアクセスするのに対し、連想配列ではキー（文字列）を使ってアクセスします。

連想配列は、辞書のようにキーから値を連想できることから、辞書やマップ、ハッシュとも呼ばれます。

連想配列の宣言・初期化

連想配列の宣言・初期化には、オブジェクトリテラルを使う方法と、newキーワードでオブジェクトを作る方法があります。

// オブジェクトリテラルで宣言・初期化
let fruits = {apple: 200, banana: 150, orange: 100};

// newキーワードで宣言・初期化
let vegetables = new Object();
vegetables.carrot = 120;
vegetables.tomato = 200;

オブジェクトリテラルを使う方が簡潔で一般的です。初期値がある場合はオブジェクトリテラルを使い、空の連想配列を作るときはnewキーワードを使うと良いでしょう。

連想配列への要素の追加と削除

連想配列に要素を追加するには、新しいキーを指定して値を代入します。

fruits.grape = 500;

// キー名に空白などを含む場合は、ブラケット記法
fruits['green apple'] = 180;

要素の削除には、delete演算子を使います。

delete fruits.orange;

連想配列からデータを取得する

連想配列からデータを取得するには、キーを指定して値にアクセスします。ドット記法とブラケット記法が使えます。

// ドット記法
console.log(fruits.apple);

// ブラケット記法
console.log(fruits['green apple']);

存在しないキーを指定した場合、undefinedが返されるので注意が必要です。

キーの存在チェック

連想配列にキーが存在するかどうかを確認したい場合は、in演算子を使います。

console.log('apple' in fruits); //true
console.log('lemon' in fruits); //false

全てのキーや値を取得

連想配列の全てのキーや値を取得したい場合は、Object.keys()やObject.values()を使います。

console.log(Object.keys(fruits)); // ["apple", "banana", "grape", "green apple"]
console.log(Object.values(fruits)); // [200, 150, 500, 180]

連想配列のループ処理

連想配列のループ処理には、for…in文を使うのが一般的です。

for (let key in fruits) {
   console.log(`${key}: ${fruits[key]}`);
}

for…in文はキーに対してループ処理を行うので、値が必要な場合はキーから取得する必要があります。

Object.entriesを使ったループ

Object.entries()メソッドを使うと、連想配列を[キー, 値]のペアの配列に変換できます。これをfor…ofループで処理すると便利です。

for (let [key, value] of Object.entries(fruits)) {
   console.log(`${key}: ${value}`);
}

Object.entriesとfor…ofの組み合わせは、キーと値の両方を扱う処理に適しています。

連想配列のソート

連想配列のソートは、キーか値を配列に取り出してソートする必要があります。

キーでソート

キーでソートするには、Object.keys()で取り出したキーの配列をソートします。

let keys = Object.keys(fruits);
keys.sort();
let sortedFruits = {};
for (let key of keys) {
   sortedFruits[key] = fruits[key];
}
console.log(sortedFruits);

値でソート

値でソートするには、Object.entries()で[キー, 値]のペアの配列を取得し、値を基準にソートします。

let entries = Object.entries(fruits);
entries.sort((a, b) => a[1] - b[1]);
let sortedFruits = {};
for (let [key, value] of entries) {
   sortedFruits[key] = value;
}
console.log(sortedFruits);

連想配列のソートは一般的なユースケースではないため、必要になったときにこの方法を思い出せれば十分です。

連想配列の注意点

キーの重複

連想配列では、キーは一意でなければならない点に注意が必要です。同じキーを複数定義した場合、後に定義された値で上書きされます。

let data = {a: 1, a: 2};
console.log(data.a); // 2

プロパティの存在チェック

連想配列にプロパティが存在するかどうかを、undefinedとの比較でチェックすることがありますが、これは危険です。

let obj = {a: undefined};
console.log(obj.a === undefined); // true
console.log(obj.b === undefined); // true

上記のコードでは、存在しないプロパティと、undefinedが代入されているプロパティの区別がつきません。

確実にプロパティの存在をチェックするには、前述のようにin演算子を使いましょう。

pushメソッドは使えない

配列にはpushメソッドを使って要素を追加できますが、連想配列にはpushメソッドがありません。

let obj = {a: 1, b: 2};
obj.push({c: 3}); // TypeError: obj.push is not a function

連想配列に要素を追加するには、前述のように新しいキーを指定して値を代入する方法を使いましょう。

まとめ

JavaScriptの連想配列について、基本的な使い方から応用的なテクニックまで解説しました。

この記事の内容を実際のプログラミングで活用し、連想配列をマスターしていきましょう！
柔軟なデータ管理ができるようになると、よりレベルの高いコーディングが可能になるはずです。

JavaScriptを効率的に身につける勉強法は？

JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

• JavaScript を身に付けてエンジニアになるには何をすればいい？
• 何から勉強すればいいんだろう？
• 効率よく勉強するには？

JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？

Muscle Coding

【初心者向け】JavaScriptの勉強法3選を現役エンジニアが比較・解説！ | Muscle Coding JavaScriptの効果的な学習方法を現役エンジニアが解説！本、動画教材（Udemy）、プログラミングスクールの特徴を比較し、最適な方法を提案します。初心者でも理解しやすい…