【ITニュース解説】JavaScript Array Methods: A Complete Guide (Old vs New Syntax with Examples in 2025)

JavaScriptの配列は、プログラム内で多くのデータを効率的に扱うための非常に重要なデータ構造だ。システムエンジニアを目指す上で、配列の操作方法は避けて通れない基本的な知識となる。JavaScriptの進化に伴い、配列の操作方法も大きく変化してきた。ここでは、かつての「古い構文」（ES5以前）と、ES6以降に導入された「現代的な構文」を比較しながら、JavaScriptの主要な配列メソッドとその使い方について詳しく解説する。特に、現代的な構文はコードをより簡潔に、そして安全に書くことを可能にするため、その利点を理解することは非常に重要だ。

配列の最も基本的な操作として、要素の追加や削除がある。配列の末尾に要素を追加するには、push()メソッドが使われる。古い構文ではarr.push(10)のように直接配列を変更するが、現代的な構文では「スプレッド構文」を利用してarr = [...arr, 10]のように書く。これは、既存の配列arrの全ての要素を新しい配列に展開し、その後に10を追加して、その新しい配列を改めてarrに代入するという意味だ。この方法の大きな違いは、元の配列を直接変更しない（非破壊的という）点にある。同様に、配列の末尾から要素を削除するpop()も、古い構文ではarr.pop()と書くが、現代的な構文では「分割代入」とスプレッド構文を組み合わせた[...rest, last] = arrのような形で、最後の要素lastを取り除いた残りの要素をrestとして取得できる。配列の先頭から要素を削除するshift()や、先頭に要素を追加するunshift()も同様に、現代的な構文ではスプレッド構文と分割代入を駆使して非破壊的に操作することが推奨される。例えば、unshift()の現代的な構文はarr = [5, ...arr]となり、元の配列を変更せずに新しい配列を作成している。

次に、配列の中から特定の要素を探したり、存在するかどうかを確認したりする方法を見てみよう。indexOf()は、指定した要素が配列内のどこにあるか（その位置、インデックス）を教えてくれる。もし要素が見つからない場合は-1を返す。現代的な構文では、より柔軟な条件で要素のインデックスを探せるfindIndex()メソッドが利用できる。これはES6で導入され、arr.findIndex(x => x === 3)のように、条件式を渡してその条件を満たす最初の要素のインデックスを見つけることができる。同様に、配列の最後から検索してインデックスを見つけるlastIndexOf()に対しては、ES2023でfindLastIndex()が追加された。特定の要素が配列内に存在するかどうかをシンプルに確認したい場合は、ES6で導入されたincludes()メソッドが非常に便利だ。これはarr.includes(3)のように書き、要素が存在すればtrue、なければfalseを返す。従来のarr.indexOf(3) !== -1という書き方よりも直感的で分かりやすい。また、ES2022で追加されたat()メソッドは、配列の要素にアクセスする際に、正のインデックス（0から始まる通常のインデックス）だけでなく、負のインデックス（-1が末尾の要素、-2が末尾から2番目の要素、というように）も利用できるようになり、配列の末尾の要素にarr.at(-1)のように手軽にアクセスできるようになった。これはarr[arr.length - 1]と書くよりも簡潔だ。

配列の要素を一つずつ処理したり、配列全体を新しい形に変換したりする「イテレーションと変換」のメソッドも、現代的なJavaScriptでは非常に重要だ。従来のforループを使って配列の要素を繰り返し処理していた時代から、ES6で導入されたforEach()メソッドは、配列の各要素に対して指定した処理を実行する。arr.forEach(item => console.log(item))のように、より簡潔に記述できる。map()メソッドは、配列の各要素を変換して新しい配列を生成する。例えば、配列の全ての数値を2倍にした新しい配列を作るには、従来のループで新しい配列に一つずつpushする代わりに、arr.map(x => x * 2)と書くだけでよい。これは元の配列を変更せず、新しい配列を返すという点で非破壊的だ。filter()メソッドは、条件に合う要素だけを抽出して新しい配列を作る。例えば、偶数だけを集めた配列を作るにはarr.filter(x => x % 2 === 0)のように書ける。これもまた非破壊的な操作だ。reduce()メソッドは、配列の全ての要素を一つに集約する強力なメソッドだ。例えば、配列の全ての数値を合計するには、arr.reduce((a, b) => a + b, 0)と書く。reduceRight()はreduce()と似ているが、配列の末尾から先頭に向かって処理を行う。これらのメソッドは、複雑なループ処理を簡潔で読みやすいコードに変換し、多くの開発現場で活用されている。

配列の追加、削除、コピー、結合といった操作も、より洗練された方法で記述できる。splice()は配列の任意の場所で要素の追加、削除、置換ができる強力なメソッドだが、元の配列を変更するという点で注意が必要だ。現代的な構文では、スプレッド構文とslice()を組み合わせて、非破壊的に同様の操作を行うことも可能だ。例えば、arr = [...arr.slice(0,2), "new", ...arr.slice(3)]のように書くことで、元の配列を変更せずに要素を追加できる。slice()メソッドは、配列の一部をコピーして新しい配列を作成する。これは非破壊的な操作であり、例えばarr.slice(1,3)と書けば、インデックス1から2までの要素を含む新しい配列を得られる。複数の配列を結合するには、concat()メソッドを使うが、現代的な構文では[...arr, ...arr2]のようにスプレッド構文を使うことで、より直感的に配列を結合できる。ES2019で導入されたflat()メソッドは、ネストされた（配列の中に配列がある）配列を平坦化し、単一の配列にする。例えば、[[1,2],[3,4]].flat()とすると[1,2,3,4]が得られる。flatMap()は、map()とflat()の処理を一度に行うメソッドで、これもES2019で導入された。

配列の並べ替えと反転も、よく使われる操作だ。sort()メソッドは配列の要素を並べ替えるが、デフォルトでは文字列として並べ替えるため、数値の並べ替えには注意が必要で、また元の配列を直接変更する。ES2023で追加されたtoSorted()は、元の配列を変更せずに、並べ替えられた新しい配列を返す。これは非常に安全な選択肢だ。同様に、reverse()メソッドも配列の要素の順序を反転させるが、元の配列を変更する。ES2023のtoReversed()は、元の配列を変更せずに、反転された新しい配列を返す。

他にも、配列を文字列に変換するjoin()（arr.join(",")）やtoString()（${arr}のようなテンプレートリテラルも利用できる）、文字列などの反復可能なオブジェクトから配列を生成するArray.from()（Array.from("hello")とすると['h','e','l','l','o']が得られる）、そして特定の変数が配列であるかどうかを正確に判定するArray.isArray()（Array.isArray(obj)）といった、開発で役立つユーティリティメソッドも多数存在する。特にArray.isArray()は、古いinstanceof Arrayよりも確実な判定方法として推奨されている。また、keys()、values()、entries()といったメソッドは、配列のインデックス、値、またはインデックスと値のペアを繰り返し処理するためのイテレータを提供し、for...ofループと組み合わせることで非常に強力な処理が可能になる。

最後に、現代のJavaScriptで特に強調されるべきは、ES2023以降で導入された「不変（イミュータブル）な」配列メソッドの重要性だ。これには、前述のtoSorted()やtoReversed()、そして特定のインデックスの要素を新しい値に置き換えた新しい配列を返すwith(index, value)などが含まれる。これらのメソッドは、元の配列を変更せずに常に新しい配列を返すため、コードの予測可能性を高め、大規模なアプリケーションで発生しがちな予期せぬバグを防ぐのに役立つ。

システムエンジニアを目指す上で、JavaScriptの配列操作は基盤となる知識であり、特にES6以降の現代的な構文と非破壊的なメソッドを使いこなす能力は、クリーンで効率的、そして保守しやすいコードを書くために不可欠だ。pushやpopといった基本的な操作から、map、filter、reduceといった高度な変換、さらにはtoSortedやtoReversedといった最新の非破壊的メソッドまで、これらの知識を習得し活用することで、現代のウェブ開発において強力な武器となるだろう。