JavaScriptのきほんを学ぼう

■第21話：配列と連想配列の便利な操作

（最終更新日：2024.11.02）

「繰り返し処理をスムーズに」

JavaScriptやそれを用いたフレームワークでは、 配列操作と同様に、連想配列の操作に対しても繰り返し処理を用いる。 例えば、連想配列を用い、APIなどから取得したデータをスムーズにUI側に反映させることが必要だ。 今回は、配列の便利な操作に加え、連想配列の便利な操作についても紹介する。

１. map, reduce, forEachなどの便利なメソッド

ここでは、JavaScriptにおける配列操作のための便利なメソッド（map, reduce, forEach）について説明する。 mapメソッドは、配列のすべての要素に対して指定された関数を実行し、その結果から新しい配列を作成する。 下記は配列の中身を全て2倍した例である。doubledの要素が全て2倍になっていることとが分かる。 mapを使って、中身をまとめて処理できると非常に便利だ。

次にreduceメソッドについて説明する。 reduceメソッドは、配列のすべての要素に対して、指定されたリデューサー関数を実行し、単一の結果値を返す。 第二引数の0は初期値を示し、0から全ての要素の値を加算していくことを意味する。 もちろん、加算だけではなく、減算、積算なども可能である。統計的な処理で役に立つ。

次にforEachメソッドを説明する。 forEachメソッドは、配列のすべての要素に対して指定された関数を実行する。 そして、新しい配列を作成せず、元の配列も変更しない。他の変数に影響がなくクリーンである。 下記はforEachメソッド内で、numの2倍を要素数分だけ繰り返して、コンソールに表示することを意味する。

これらのメソッドは、配列操作を行う際に非常に便利で、より簡潔で宣言的なコードを書くことができる。 また、これらのメソッドは純粋な関数を使用しており、副作用がない。これらを使うことで、コードの品質向上や可読性の向上に貢献する。

２. スプレッド演算子を使った操作

このセクションでは、JavaScriptにおけるスプレッド演算子（...）を使った配列操作について説明する。 スプレッド演算子は、配列やオブジェクトの要素を展開するのに便利な機能である。 スプレッド演算子を使用して、複数の配列を結合することができます。下記は2つの配列を結合した例である。

また、単純にスプレッド演算子を使用して、const copiedArray = [...originalArray]のように記述することで、 配列をコピーすることも可能だ。更に、下記のように、配列の先頭や末尾に要素を追加することもできる。 newArray1は先頭に0を、newArray2は末尾に4を追加している。

また、下記のように、最初の要素、2番目の要素、残りの要素と、配列を分解して取り出すことも可能だ。 この使い方は、必要な部分だけが欲しい場合にかなり便利である。

このように、スプレッド構文を使用することで、配列操作を簡潔かつ読みやすいコードで行うことができる。 また、スプレッド演算子はオブジェクトにも適用できるため、オブジェクト操作にも便利に使える。

３. オブジェクトを配列に変換する方法

このセクションでは、JavaScriptにおけるオブジェクトを配列に変換する方法について説明する。 オブジェクトのキーや値を扱いやすくするために、オブジェクトを配列に変換することが役立つ。 Object.keys()メソッドを使用して、オブジェクトのキーを配列に変換することができる。 下記はオブジェクトのキーを配列に変換した例である。

また、Object.values()メソッドを使用すれば、オブジェクトの値を配列に変換することができる。

そして、Object.entries()メソッドを使用すれば、オブジェクトのキーと値のペアを2次元配列に変換することができる。

これらのメソッドを使用することで、オブジェクトのキー、値、またはキーと値のペアを配列に変換できる。 その後で、配列操作のメソッドや繰り返し処理を利用して、データを処理することができる。

４. 配列や連想配列のネスト

このセクションでは、JavaScriptにおける配列や連想配列のネストについて説明する。 配列や連想配列においてネストを使用することで、複雑なデータ構造を表現し、多次元のデータを扱うことができる。 下記は3×3の二次元配列を作成し、その中の要素を取得した例である。配列は0番から始まるので、 2行3列のデータである6が出力される。

また、連想配列の値として別の連想配列を含めることができる。 これにより、階層構造を持つデータを表現できる。 下記は2次元の連想配列の例で、aのキーにあるa1のキーの値を取得している。 直観的に分かりやすい。

さらに、配列と連想配列を組み合わせて、より複雑なデータ構造を表現することもできる。 下記は、配列の中に連想配列を格納した例で、1番目の要素のnameキーの値（Jane）を取得している。 反対に、連想配列のあるキーの値に配列を格納することもできる。

ネストを使用することで、多様なデータ構造を表現できる。 しかしながら、深いネスト構造はコードの可読性を低下させるので注意が必要だ。 適切なデータ構造を選択し、適切なネストレベルを維持することが重要である。 また、ネストされたデータを操作する際には、ループや再帰などの機能を活用することで、 効率的にデータを取得、変換することができる。

５. まとめ

今回、map、filter、reduceやスプレッド演算子、配列、連想配列のネスト構造について説明した。 少々難しい話も多かったが、ここに書いてある方法を活用することで、 バックエンド側から取得した値（APIなど）を効率よくUI側に反映することができる。 Web開発でよく使用される技術なので、ぜひ使いながら覚えていこう。

▼参考図書、サイト

  JavaScriptのmap(), filter(), reduce()をちゃんと理解する。　　Qiita
  配列とオブジェクト(連想配列)の組み合わせパターン 　　わくわくBank