【ITニュース解説】🚀 JavaScript Array Non-Mutating Methods Explained (with Examples)

JavaScriptでプログラムを書く際、配列の操作は非常に頻繁に登場する基本的な技術の一つだ。配列とは、複数のデータを順番に格納できるリストのようなもので、そのデータを効率的に扱うためのさまざまなメソッドが用意されている。特に重要なのが、配列を操作するメソッドが「元の配列を変更するかしないか」という点だ。これを理解することは、コードの品質と予測可能性を高める上で欠かせない。

配列を操作するメソッドには大きく分けて二種類ある。一つは「破壊的（mutating）メソッド」と呼ばれるもので、これは実行すると元の配列の内容そのものが変更される。もう一つが今回解説する「非破壊的（non-mutating）メソッド」で、これは元の配列には一切手を加えずに、新しい配列や値を生成して返すという特徴がある。システムエンジニアを目指す初心者にとって、非破壊的メソッドの利用は、予期せぬバグを防ぎ、読みやすく保守しやすいコードを書くための重要なステップとなるだろう。

非破壊的メソッドを使う最大の利点は、元のデータを安全に保てることにある。例えば、あるデータを加工して別の用途で使いたいが、元のデータも後で必要になる、といった場合に非常に有効だ。元のデータを破壊しないため、コードの流れが追いやすくなり、バグが発生しにくいというメリットもある。

それでは、具体的な非破壊的メソッドを見ていこう。例として、const numbers = [3, 7, 10, 15, 20, 25];という数値の配列を考えてみよう。

まず「map()」メソッドは、配列の各要素に対して指定した処理（関数）を実行し、その結果をすべて集めて新しい配列を作る。元の配列は全く変更されない。例えば、numbers配列のすべての要素を2倍にした新しい配列がほしい場合、map()を使えば[6, 14, 20, 30, 40, 50]という新しい配列が得られる。データ変換の際に非常に役立つ。

次に「filter()」メソッドは、配列の中から特定の条件を満たす要素だけを選び出し、それらの要素で構成される新しい配列を作成する。これも元の配列には影響しない。例えば、numbers配列から10以上の数値だけを抽出したい場合、filter()を使うと[10, 15, 20, 25]という新しい配列が得られる。特定の条件に合うデータを絞り込みたい場合に便利だ。

「reduce()」メソッドは、配列の要素を左から右へと順番に処理していき、最終的に一つの値に集約する。合計値を計算したり、配列内のすべての要素を結合して文字列にしたり、複雑なデータ構造を単純な値にまとめたりと、非常に多岐にわたる用途で活用される。初期値を設定することもでき、その場合は最初の処理が初期値から始まる。例えば、numbersの合計値に初期値100を加える場合、最終的な結果は180となる。

「find()」メソッドは、配列の中から指定した条件を満たす最初の要素を見つけ出し、その要素の値を返す。条件に合う要素が複数あっても、最初に見つかったものだけを返すため注意が必要だ。もし条件に合う要素が見つからなければundefinedを返す。例えば、numbersの中から5で割り切れる最初の数値を探すと、10が返される。

「some()」メソッドは、配列の中に、指定した条件を満たす要素が一つでも存在するかどうかをチェックする。結果はtrueかfalseのブール値で返される。例えば、numbers配列に30という値があるかを確認すると、falseが返されるだろう。

「every()」メソッドは、配列の全ての要素が指定した条件を満たしているかどうかをチェックする。一つでも条件を満たさない要素があればfalseを返し、全ての要素が条件を満たせばtrueを返す。例えば、numbers配列の全ての数値が0以上かを確認すると、trueが返される。

「includes()」メソッドは、配列の中に特定の値が含まれているかどうかをシンプルにチェックする。結果はtrueかfalseで、find()やsome()よりも単純な値の有無の確認に特化している。例えば、numbers配列に50が含まれているかを確認すると、falseが返される。

「indexOf()」メソッドは、配列の中に特定の値が最初に現れるインデックス（配列の何番目の位置かを示す数値）を返す。配列の最初の要素のインデックスは0から始まる。値が見つからない場合は-1を返す。例えば、numbers配列の中で15が何番目にあるかを調べると、3が返される（0, 1, 2, 3番目）。

「flat()」メソッドは、ネストされた（配列の中に配列がある）配列を、指定した深さまで平坦化（フラットにする）して新しい配列を作成する。深さを指定しない場合は1レベルだけ平坦化する。例えば、[1, 2, 3, [50]]のような配列があった場合、flat()を使うと[1, 2, 3, 50]という平坦な新しい配列が得られる。

最後に「flatMap()」メソッドは、map()とflat()の機能を組み合わせたものだ。まずmap()のように各要素を処理し、その結果が配列であれば自動的に1レベル平坦化する。これにより、map()で新しい配列を作成した後にflat()を適用する手間を省くことができる。例えば、numbers配列の各要素を2倍にした結果を配列で返した場合、flatMap()はそれらを自動的に平坦化し、最終的に[6, 14, 20, 30, 40, 50]のような新しい配列を生成する。

これらの非破壊的メソッドは、元のデータを保護しながら新しいデータを生成するため、関数型プログラミングの考え方にも非常に適している。コードがよりクリーンになり、何が起こるか予測しやすくなるため、バグの発生を抑え、チームでの開発効率も向上する。システムエンジニアとして成長するためには、これらのメソッドをしっかりと理解し、適切に使いこなせるようになることが重要だ。日々のコーディングで積極的に活用することで、より堅牢で保守しやすいJavaScriptコードを書くための基盤を築けるだろう。