JavaScriptで配列を扱う方法に悩んでいませんか？配列はデータを整理して管理するうえで欠かせない機能ですが、初期化や要素の追加・削除、検索、並び替えなど、多岐にわたる操作方法に戸惑う方も多いでしょう。
この記事では、JavaScriptにおける配列の基本から応用まで、具体例を交えながらわかりやすく解説します。初心者から中級者まで、配列操作をスムーズにマスターし、開発効率を向上させるためのノウハウが詰まった内容です。この記事を読み終えれば、配列に関する疑問や不安がきっと解消されるでしょう！
目次
1.JavaScriptの配列とは？
JavaScriptでは配列を使うことができます。配列を使うことで、複雑な処理を整理しやすくなるでしょう。ここでは、JavaScriptの配列について基本をわかりやすく解説します。
JavaScriptにおける配列の概念と特徴
配列は「array」とも言い、複数の値を一つの変数に格納するための構造です。配列内の各要素はインデックス番号によって管理され、0から始まる連続した番号が自動的に割り当てられます。インデックス番号が活用されるため、特定の要素に迅速にアクセスすることが可能です。
また、配列は文字列、数値、オブジェクトなど、さまざまなデータ型を同時に格納できるため、柔軟性が高いのが特徴です。なお、配列には多くのメソッドが用意されており、要素の追加や削除、検索、並び替えなど、さまざまな操作を簡単に行うことができます。
JavaScriptにおける配列の基本的な構造
JavaScriptの配列は、角括弧とインデックス番号を使って要素を管理します。次のコード例をご覧ください。
const fruits = ['apple', 'banana', 'grape']; console.log(fruits[0]); // apple console.log(fruits[1]); // banana |
このように、インデックス番号を指定することで、特定の要素を取得することができます。インデックス番号は0から始まるため、最初の要素はfruits[0]で取得できます。また、fruits.lengthを使うと、配列の要素数を簡単に確認できるのが特徴です。
たとえば、次のコードでは要素数が表示されます。
const fruits = ['apple', 'banana', 'grape']; console.log(fruits.length); // 3 |
JavaScriptにおける配列とオブジェクトの違い
JavaScriptでは、配列とオブジェクトはそれぞれ異なる特徴を持っています。配列は、順序を意識したデータを効率よく管理するために適しているのに対して、オブジェクトは「キーと値のペア」を使って柔軟にデータを管理する場合に適しています。
以下のコードで、それぞれの違いを確認してみましょう。
配列の例：
const fruits = ['apple', 'banana', 'grape']; console.log(fruits[0]); // apple |
オブジェクトの例：
const person = { name: 'Alice', age: 25, city: 'Tokyo' }; console.log(person.name); // Alice console.log(person.age); // 25 |
配列はインデックス番号を使って値を取得しますが、オブジェクトはキーを使ってデータを取得します。たとえば、商品のリストを管理する際には配列を使い、ユーザー情報を管理する際にはオブジェクトを使うのが良いでしょう。
用途に応じて使い分けることで、コードの効率性と可読性を向上させることが可能です。
JavaScriptで配列を使うメリット
配列を効果的に使うことで、開発の効率化とコードの品質向上を実現できます。
たとえば、同じ種類のデータをまとめて扱うことができるので、ループ処理を効率的に実行でき、コードの冗長性を減らすことができます。配列専用のメソッドを利用することで、要素の追加や削除、検索、並び替えなどの操作を簡単かつ直感的に行うことも可能です。
また、多次元配列を使用することで、複雑なデータ構造をシンプルに表現できるため、大規模なデータ処理や複雑なアルゴリズムの実装にも対応可能です。
2.JavaScriptで配列を使う方法
JavaScriptで配列を使うために必要な、配列の宣言方法、初期値の設定例、さらに2次元配列を活用する手順を紹介します。
JavaScriptで配列を作成する：let・const・var
JavaScriptでは、letかconstのいずれかを使用して配列を宣言してください。再代入が必要な場合にはletを、再代入が不要で固定された配列を扱う場合にはconstを使うことが推奨されています。varは古い宣言方法であり、スコープの問題から現在ではあまり使われていません。
letを使用し、配列全体を新しい配列に再代入するコード例：
let numbers = [1, 2, 3]; numbers = [4, 5, 6]; console.log(numbers); // [4, 5, 6] |
constを使用して、配列の要素を変更するコード例：
const fruits = ['apple', 'banana', 'grape']; fruits.push('orange'); console.log(fruits); // ["apple", "banana", "grape", "orange"] |
letで宣言した配列は再代入が許可されるため、意図しない上書きを防ぐ目的でconstを使う場面が多いです。配列の宣言方法を適切に選択することで、意図しない再代入を防ぎつつ、データ操作をしてください。
JavaScriptで配列の初期値を設定する
配列には、宣言時に初期値を設定しておくことがあります。あらかじめ配列に値を入れておけば、宣言直後から実際の処理に取りかかりやすくなります。
文字列の配列を初期値として定義する例：
const fruits = ['apple', 'banana', 'grape']; console.log(fruits[0]); // "apple" console.log(fruits.length); // 3 |
数値の配列やブール値の配列など、用途に合わせた初期値を設定しておくと、後から作業しやすくなるでしょう。Arrayコンストラクターを使って、要素の長さだけ確保したうえで値を埋めていく方法もありますが、見通しが悪くなる場合もあるので注意が必要です。
JavaScriptで配列を2次元で活用する
配列のなかに別の配列を格納すると2次元配列が作れるので、表形式のデータを管理する場合に便利です。
たとえば、行列のように配置された数値を扱うには次のようになります。
コード例：
const matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ];
console.log(matrix[2][2]); // 9 |
外側の配列は行を表し、内側の配列は列を表すイメージです。いずれもインデックス番号は「0」から始まります。2次元配列では、インデックス番号が増えるぶん管理が複雑になる場合がありますので要素の場所を明確に意識しながら実装してください。
3.JavaScriptで配列の追加と削除をする方法
JavaScript配列を効果的に活用するためには、要素の追加や削除をしっかり理解しましょう。配列の後ろや前に要素を追加・削除したり、一部の要素だけを取り出したり、範囲を指定して削除したりできます。ここでは、それぞれの方法を解説します。
配列に要素を追加する：push()・unshift()
JavaScriptで配列の末尾に要素を追加したい場合は、push()を使ってください。
コード例：
const fruits = ['apple', 'banana']; fruits.push('grape'); console.log(fruits); // ["apple", "banana", "grape"] |
一方、unshift()を利用すると先頭に要素を挿入できます。
コード例：
const fruits = ['apple', 'banana']; fruits.unshift('grape'); console.log(fruits); // [ "grape","apple", "banana"] |
push()とunshift()を上手に使い分けると、必要に応じて柔軟にJavaScript配列へ要素を追加できます。
配列の要素を削除する：pop()・shift()
末尾の要素を削除したいときはpop()を使ってください。pop()は削除した要素を戻り値として返すため、何が取り除かれたかを確認できます。
コード例：
const arr = ['red', 'blue', 'green']; const removed = arr.pop(); console.log(removed); // "green" console.log(arr); // ["red", "blue"] |
先頭の要素を取り除く場合はshift()を使いましょう。
コード例：
const colors = ['pink', 'orange', 'purple']; const firstItem = colors.shift(); console.log(firstItem); // "pink" console.log(colors); // ["orange", "purple"] |
配列の要素を抜き出す・置き換える：slice()・splice()
JavaScriptで配列の一部を抜き出したり、一部を置き換えたりする場合はslice()やsplice()が役立ちます。
slice()は指定した範囲の要素を抽出し、新しい配列として返します。配列そのものは変更されません。
コード例：
const numbers = [0, 1, 2, 3, 4]; const part = numbers.slice(1, 3); console.log(part); // [1, 2] console.log(numbers); // [0, 1, 2, 3, 4] |
splice()は、配列から特定の範囲を削除したり、別の要素を挿入する操作が可能です。挿入する要素を指定しなければ削除だけ行います。
コード例：
const nums = [10, 20, 30, 40]; nums.splice(1, 2, 15, 25); console.log(nums); // [10, 15, 25, 40] |
指定したインデックスから何個取り除くか、挿入する要素をどのように設定するかによって、さまざまな加工が可能です。
4.JavaScriptの配列に対する要素数や検索に関するメソッド
JavaScriptで配列を使う際には、要素数の把握や必要な値の検索をしたい時があります。ここでは、配列の要素を検索するメソッドなどについて解説します。
lengthプロパティで要素数を取得する
配列の要素数はlengthプロパティで簡単に確認できます。
コード例：
const fruits = ['apple', 'banana', 'grape', 'pear']; console.log(fruits.length); // 4 |
要素を把握することで、for文などの繰り返し処理や、新しい要素を追加する際のヒントになります。特に大量のデータを扱うときは、lengthで現在の要素数を管理しておくと便利です。
配列の要素を検索する：indexOf()・includes()・find()
JavaScriptで配列の要素を検索したい場合は、indexOf()やincludes()が使えます。
indexOf()は要素が見つかった場合に「1」を、見つからない場合に「-1」を返します。
コード例：
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.indexOf('apple')); // 0 console.log(fruits.indexOf('pear')); // -1 |
includes()は、要素が含まれているかどうかを真偽値で返します。
コード例：
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('grape')); // false |
特定の条件に合致する要素を見つけたいときは、find()が便利です。コールバック関数を用いて条件を指定できます。
コード例：
const numbers = [1, 5, 10, 15]; const found = numbers.find(num => num > 5); console.log(found); // 10 |
取得した要素の活用方法
検索で見つけた要素をどう扱うかは、アプリケーションのニーズや目的によって異なるでしょう。インデックスを取得して内容を更新したり、表示用のメッセージに組み込んだりする方法が考えられます。
たとえば、要素を見つけてメッセージを出力するコード例は次の通りです。
const animals = ['dog', 'cat', 'rabbit']; if (animals.includes('cat')) { console.log('Cat is found in the array.'); } |
検索メソッドを使って状況に応じた処理へつなげれば、JavaScript配列を有効活用できます。
5.JavaScriptにおける配列操作
JavaScriptの配列では、単に要素を追加・削除するだけでなく、配列を変換したり、条件を満たす要素だけ取り出したりする操作が可能です。ここでは、配列に対してよく使われる高階関数や、データを並び替えを使った条件付き処理などを紹介します。
高階関数：map()・filter()・reduce()
高階関数とは、他の関数を引数として受け取ったり、処理結果結果として関数を返すような関数を意味します。高階関数を活用することで、シンプルなコードで複雑な処理を実現できるようになります。
配列を受け取ったり、結果で配列を返したりできる関数も高階関数です。JavaScriptの配列で使える高階関数を紹介しますので、ぜひマスターしてください。
map()は、配列の各要素を別の形式に変換して新しい配列を生成するメソッドです。たとえば、数値の配列を2倍にして新しい配列を取得する場合に活用できます。
コード例：
const numbers = [1, 2, 3]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6] |
filter()は、条件に合致する要素だけを抜き出して新しい配列を作りたいときに役立ちます。
コード例：
const data = [10, 25, 40, 55]; const filtered = data.filter(value => value > 30); console.log(filtered); // [40, 55] |
reduce()は、配列の要素をまとめあげてひとつの値に還元するメソッドです。合計やオブジェクトへの集約など多用途に使われます。
コード例：
const items = [10, 20, 30]; const sum = items.reduce((acc, current) => acc + current, 0); console.log(sum); // 60 |
配列の要素を並び替える：sort()・reverse()
配列の要素をアルファベット順や数値の大小で並び替えたいときは、sort()を使いましょう。デフォルトでは文字列としての順序で比較を行いますが、数値を正確に並べたい場合はコールバック関数で比較方法を定義してください。
コード例：
const scores = [100, 20, 50, 10]; scores.sort((a, b) => a - b); console.log(scores); // [10, 20, 50, 100] |
reverse()は配列を逆順に並び替えます。sort()と組み合わせると、降順などの並び替えにも対応しやすくなります。
コード例：
scores.reverse(); console.log(scores); // [100, 50, 20, 10] |
条件付き処理：forEach()・some()・every()
JavaScriptの配列を使ったループ処理ではfor文を使うケースも多いですが、シンプルにコードにするには、可読性が高いforEach()をおすすめします。
コード例：
const arr = ['A', 'B', 'C']; arr.forEach(item => { console.log(item); }); |
some()は、配列のなかに特定の条件を満たす要素がひとつでも存在するとtrueを返すメソッドです。
コード例：
const numbers = [1, 5, 10, 15]; const hasLargeNumber = numbers.some(num => num > 12); console.log(hasLargeNumber); // true |
every()は、配列のすべての要素が条件を満たす場合にtrueを返します。条件付き処理を手軽に書けるため、配列の要素が要求を満たすか確認する場面で役立ちます。
コード例：
const allPositive = numbers.every(num => num > 0); console.log(allPositive); // true |
JavaScriptで「...」を使い配列の展開をする
スプレッド構文は配列の要素を展開するための機能です。たとえば、配列を結合するときにスプレッド構文を使うと、コードが簡潔になります。
コード例：
const arr1 = [1, 2]; const arr2 = [3, 4]; const combined = [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4] |
スプレッド構文「...」は、配列を展開したり、ほかの配列と結合したりするときに使います。オブジェクトのコピーや関数の引数を配列から受け取ることもできます。元の配列を直接上書きしないため、データを破壊しない安全な操作が可能です。
新しい配列の生成：Array.from()・Array.of()
Array.from()は、配列風のオブジェクトやイテラブルなオブジェクトから新しい配列を生成します。文字列を1文字ずつ分解して配列にするコード例を見るとわかりやすいのではないでしょうか。
コード例：
const str = 'Hello'; const chars = Array.from(str); console.log(chars); // ["H", "e", "l", "l", "o"] |
Array.of()は、引数に与えた値を要素とする配列を作成します。次のコード例のように、配列リテラルを使わずに配列を初期化することが可能です。
コード例：
const arr = Array.of(1, 2, 3); console.log(arr); // [1, 2, 3] |
スプレッド構文とArray.from()やArray.of()を組み合わせることで、配列操作の幅が広がりますので、ぜひマスターしてみてください。
イミュータブル操作による安全なコード
配列を扱うときに、できるだけ元の配列を直接変更しないほうが安全な場合があります。スプレッド構文を使ってコピーを作り、そこへ変更を加える方法がイミュータブルな操作としておすすめです。
コード例：
const original = [1, 2, 3]; const copy = [...original]; copy.push(4); console.log(original); // [1, 2, 3] console.log(copy); // [1, 2, 3, 4] |
このコード例では、「copy」の配列だけが変更されます。「original」の配列は影響を受けません。複数の変数が同じデータを参照している場合でも、意図しない書き換えを防げるため、バグを抑えることができるでしょう。
6.JavaScriptにおける連想配列の使い方
JavaScriptでは連想配列も使えます。連想配列とはキーと値のペアで構成されるデータ構造で、Dictionaryオブジェクトと呼ばれることもあります。。
通常の配列とは扱いが異なるため、使いどころや注意点を把握しておくことが重要です。
JavaScriptにおける連想配列の基本
JavaScriptでは、配列がインデックス番号で要素を管理するのに対し、連想配列はオブジェクト型で実装します。たとえば次のコード例のように、ユーザーの情報をキーと値で関連づけて実装します。
コード例：
const user = { name: 'John', age: 30, city: 'New York' }; console.log(user.name); // "John" console.log(user.age); // 30 |
JavaScriptにおける連想配列と通常の配列との違い
配列は0から始まるインデックス番号を使って要素を一列に管理しますが、連想配列ではキーで値を管理します。そのため、要素の並びよりも「どのような名前の情報を保持しているか」を重視するのが連想配列の特徴です。
コード例：
// 配列はインデックスを使う const colors = ['red', 'green', 'blue']; console.log(colors[1]); // "green"
const colorCodes = { red: '#FF0000', green: '#00FF00', blue: '#0000FF' }; console.log(colorCodes.green); // "#00FF00" |
どちらを使うかは、データをどう管理したいかによって判断してください。順序を意識する必要があるなら配列、キーと値の組み合わせが重要ならオブジェクトを選ぶと良いでしょう。
JavaScriptにおける連想配列で注意すべき点
JavaScriptの配列に数値以外のキーを設定した場合、配列としては認識されず、実質的にオブジェクトと同じ扱いになる点に注意してください。また、連想配列を意図して配列リテラルで書くと、要素の並びとキーが混在してバグを引き起こす恐れがあります。
キーと値を管理したいならオブジェクトリテラルを使い、順序を管理したいなら通常の配列を利用しましょう。
コード例：
const weirdArray = []; weirdArray['apple'] = 10; console.log(weirdArray.length); // 0 console.log(weirdArray['apple']); // 10 |
この例では、キーがappleの要素を設定しても、配列のlengthにはカウントされません。連想配列が必要な場合はオブジェクトを使うほうが混乱を避けられます。
7.JavaScriptで配列をさらに上手に活用するヒント
JavaScriptで配列を上手に活用するためには、良く起こるエラーやバグの解決方法を理解し、パフォーマンスを向上させるコツを押さえておくことが重要です。
配列関連のエラーやバグを解決する方法
配列を扱う際に発生しやすいエラーやバグには、主にインデックスの範囲外参照やデータ型の不一致、メソッドの誤使用などがあります。
想定しない挙動が起こった場合にはまず、インデックス番号が配列の範囲を超えていないかを確認してください。
たとえば、配列の長さを取得するlengthプロパティを利用して、ループ処理中にインデックスが有効な範囲内にあるかをチェックしてみましょう。typeofやArray.isArray()を使って、配列内の要素が期待するデータ型であるかを確認するのも良いでしょう。
また、配列メソッドの誤用もエラーの原因となります。たとえば、splice()を使う際に、開始インデックスや削除する要素数を正しく指定しないと、意図しない要素が削除される恐れがあります。メソッドの引数や挙動を正確に理解して使ってください。
経験が浅い間は、デバッグツールやコンソールログを活用して、配列の状態を逐一確認しながらコーディングしてみてみましょう。仕組みの理解が進むのでおすすめです。
配列のパフォーマンスを向上させるコツ
大規模な配列を扱う際には、パフォーマンスの最適化が求められます。まず、不必要な要素の削除や配列の肥大化を防ぐために、定期的に配列の内容を見直し、不要なデータを削除することが重要です。メモリの使用効率が向上し、処理速度の向上につながります。
また、map()やreduce()などの高階関数を活用することで、ループ処理を効率化し、コードの可読性を高めることが可能です。処理の重複を避けつつ、必要なデータ変換や集約を簡潔に行うことが可能ですので、ぜひ取り入れてください。
なお、配列のパフォーマンスを向上させるためには、適切なデータ構造の選択も重要です。たとえば、頻繁に検索や挿入・削除が行われる場合は、配列よりもSetやMapといったコレクションを使用することで、効率的なデータ操作が可能になりパフォーマンスが向上する可能性があります。
関連記事
JavaScriptとは？初心者にもわかりやすく何ができるかや歴史、基本的な文法を解説
JavaScriptライブラリとは？おすすめの使い方や導入方法などわかりやすく解説
8.まとめ
この記事では、JavaScriptの配列について基礎から応用までを具体的なコード例を交えながら解説しました。配列の特徴や作成方法、要素の追加・削除、検索、並び替え、高階関数の活用法、さらにはスプレッド構文や連想配列の注意点まで、幅広いトピックを網羅しています。
これにより、開発初心者の方でも、実際のプロジェクトで配列を使いこなすための第一歩を踏み出せる内容となっています。
配列操作をしっかりと習得することで、コードの効率化と可読性の向上が期待できます。ぜひこの記事で学んだ知識を活かし、日々の開発に役立ててください。
また、さらなる学習や実践を通じてより高度なJavaScriptのスキルを身につけていただくために、本記事が皆様にとって少しでもお役に立てますと幸いです。