JavaScriptのきほんを学ぼう

■第19話：連想配列操作の基本

（最終更新日：2023.04.24）

「キーと値を楽に取り出したい」

連想配列を扱う上で、できればキーと値は簡単に取り出せると嬉しい。 JavaScriptの連想配列は、それらを簡単に取り出せるメソッド、関数が幾つか用意されている。 今回は、最初に要素の作成、追加、削除を学んだ後に、作成した連想配列のキーと値を取り出す方法を紹介する。

１. 連想配列の作成と要素へのアクセス

JavaScriptにおける連想配列（オブジェクト）の作成は主に2種類ある。 まずは、オブジェクトリテラルを用いて作成する方法を説明する。作成した連想配列の例を以下に示す。 オブジェクトの中に直接中身を入れている。

また、下記のようにobjインスタンスを作成し（空のオブジェクトを作成し）、その後プロパティを追加する方法もある。 結果は上記と同じで、key1には、value1、key2にはvalue2、key3にはvalue3が入る。

これらの連想配列の要素へのアクセスは、上記のプロパティ値を設定した時と同じで、 obj1.key1のように呼び出したいオブジェクトのプロパティを指定する。それが以下の一番目である。 また、ブラケット記法を使用して、連想配列の要素にアクセスすることもできる。以下の二番目である。

ブラケット記法はキーが変数や数字で始まる場合に便利だ。数字で始まる場合は、ドット記法ではそもそもエラーが生じる。 変数で始まる場合もドット記法では書けない。また、動的に中身が代わる場合もプロパティを指定できない為、ドット記法では難しい。 ブラケット記法は、中身が変わってもオブジェクトさえ正しく指定していれば、下記のように動的に中身を取り出すことができる。

２. 連想配列の要素の追加・削除

ここでは、JavaScriptにおける連想配列（オブジェクト）の要素の追加および削除方法について説明する。 ドット記法の追加は１の「インスタンスを作成し、値を設定する方法」で説明した方法と同じである。 「obj.key4 = 'value4'」とすることで後からでも追加することができる。 また、ブラケット記法で、新しいキーと値を追加する方法は以下の通りである。

続いて、要素を削除する方法を説明する。こちらもドット記法とブラケット記法を用いる方法がある。 削除はdelete演算子を用いて行う。以下の通りである。

　 また、「obj.key2 = null;」「obj.key2 = undefined;」で値を削除することはできるが、 プロパティ自体を削除することはできないので、deleteを使うようにしよう。 一般的にはドット記法で要素を追加し、delete演算子で要素を削除することが多い。

３. 連想配列のキーと値の取得

JavaScriptの連想配列では、Object.keys()メソッドを使用して、オブジェクトのすべてのキーを配列として取得できる。 下記はキーのみを全て取得した例で、keysに3つのキーが格納されている。

また、Object.values()メソッドを使用すれば、オブジェクトのすべての値を配列として取得できる。 下記は値のみを全て取得した例で、valuesに3つの値が格納されている。

また、Object.entries()メソッドを使用すれば、オブジェクトのすべてのキーと値のペアを二次元配列として取得できる。 下記は値のみを全て取得した例で、キーと値がペアになった3つの配列が、配列に格納されている。

これらのメソッドを使用して、連想配列のキー、値、または両方を取得できる。 また、取得した配列を使って、さらに繰り返し処理を行ったり、他の操作を行うことができる。 この3つのメソッドは非常に便利なので、ぜひ覚えておこう。

４. まとめ

JavaScriptを用いて、動的なページを作成する上で、連想配列はとても重要な働きをする。 連想配列が上手く操作できれば、外部からのデータ、内部で貯めたデータ、両方を欲しい形で表示できる。 自分だったらどんな情報を載せたいか、どんな相手に整理して情報を見せたいかを意識しながら最終的に欲しいページを考え、 今回のメソッドを用いて作れるようになろう。

▼参考図書、サイト

  JavaScriptの連想配列に要素を追加・削除する方法　　UX MILK
  JavaScriptの基本である連想配列をマスターする　　TECH PLAY