「JavaScriptの配列ってなんだろう？」
「JavaScriptの配列ってどういう時に使うの？」
「配列の具体的なコーディング例を教えて欲しい」
JavaScriptの配列はどのような時に使い、どのように記述するのかがあいまいな人は多いですよね。
配列は、プログラミングにおける基本的なデータ構造の1つです。
JavaScriptの配列をマスターすることで、コードの実行速度を向上させたり、メモリ使用量を最適化したりすることが可能になります。
そこで、この記事ではJavaScriptの配列に焦点を当て、サンプルコードをもとに基本から応用までを解説します。
ぜひ最後までをご覧ください。
JavaScriptの配列に要素を追加する方法
JavaScriptの配列における「要素」とは、配列内に格納されている個々のデータのことを指します。
配列を構成する基本的な単位であり、配列内でインデックス番号によって各要素にアクセスする事もできますよ。
最初に、JavaScriptの配列に要素を追加する方法として以下3つのメソッドを学んでいきましょう。
- pushメソッドで末尾に追加
- unshiftメソッドで先頭に追加
- spliceメソッドで指定位置へ追加
順番に説明していきますね。
pushメソッドで末尾に追加
`push`メソッドの基本的な役割は、指定された要素を配列の末尾に追加することです。
`push`メソッドを使うと、配列の長さが自動的に更新され、追加後の配列の長さが戻り値として得られます。
記述方法は非常にシンプルで、`配列名.push(追加したい要素)`の形式で記述しますよ。
まずは、サンプルコードをみていきましょう。単一の要素を追加する場合は以下のように記述します。
let fruits = ['apple', 'orange', 'banana'];
fruits.push('strawberry');
console.log(fruits); // 出力: ['apple', 'orange', 'banana', 'strawberry']
`fruits`配列に’strawberry’が追加され、結果として4つの要素を持つ配列が出力されます。
追加したい要素は一つに限らず、複数指定することも可能です。複数の要素を追加したい場合は、要素をカンマで区切って列挙するだけですよ。
以下のサンプルコードを見てください。
let numbers = [1, 2, 3, 4];
numbers.push(5, 6, 7, 8);
console.log(numbers); // 出力: [1, 2, 3, 4, 5, 6, 7, 8]
`numbers`配列に「5, 6, 7, 8」の複数の数値を一度に追加しています。`push`メソッドにより、配列は8つの要素を持つようになりました。
`push`メソッドは、コードの可読性を保ちながら、効率的に配列の操作を行えます。
また、追加する要素のデータ型に制限がないため、数値、文字列、オブジェクトなど、あらゆる種類のデータを配列に追加できますよ。
ユーザーからの入力を順番に配列に保存したり、処理が進むにつれて必要となるデータを追加したりする際にも`push`メソッドは活用できます。
unshiftメソッドで先頭に追加
`unshift`メソッドは、先頭に1つ以上の新しい要素を加える操作を簡単に行うことができるメソッドです。
`unshift`メソッドを使って、配列を追加するのは`配列名.unshift(追加したい値1, 追加したい値2, …)`と記述します。
`unshift`メソッドを使うと、配列の長さが自動的に更新され、メソッドは新しい配列の長さを返しますよ。
サンプルコードを見ていきましょう。単一の要素を追加する場合、以下のように記述します。
let fruits = ['apple', 'banana'];
fruits.unshift('grape');
console.log(fruits); // 出力: ['grape', 'apple', 'banana']
`fruits`配列の先頭に’grape’が追加され、元々の’apple’と’banana’はその後に続きます。
引数には、配列の先頭に追加したい要素をカンマで区切って複数指定することができますよ。
サンプルコードを見てください。
let fruit = ['apple', 'melon', 'peach'];
fruit.unshift('orange', 'grapes');
console.log(fruit); // 出力: ["orange", "grapes", "apple", "melon", "peach"]
fruit配列の最前線に’orange’と’grapes’の2つの要素が加わり、配列が拡張されています。
`unshift`メソッドは、最新のニュース記事やユーザーからの緊急のフィードバックをリストなどデータの優先順位を上位としてあげたい場合に便利です。
spliceメソッドで指定位置へ追加
`splice`メソッドは、配列の任意の位置に新しい要素を追加したり、既存の要素を削除したりすることができます。
特に、配列の中間に要素を挿入する場合には、spliceメソッドが便利です。
`splice`メソッドは1つで、要素の追加、削除、置換を行えますよ。
spliceメソッドの構文は以下の通りです。
配列名.splice(開始位置, 削除する要素の数, 追加する要素1, 追加する要素2, ...)
引数は、操作を開始する配列内の位置を指定します。配列のインデックスは0から始まるため、0を指定すると配列の最初の要素から操作が開始されます。
サンプルコードを見てください。
let fruits = ['apple', 'banana', 'orange'];
fruits.splice(2, 0, 'grape');
console.log(fruits); // 出力: ['apple', 'banana', 'grape', 'orange']
サンプルコードでは、`fruits`配列の3番目の位置（インデックス2）に’grape’を追加しています。
削除する要素の数を0に設定しているため、既存の要素は削除されず、’grape’のみが挿入されていますね。
次に、要素を削除しつつ追加する場合のサンプルコードを見ていきましょう。
let fruits = ['apple', 'banana', 'orange', 'melon'];
fruits.splice(1, 2, 'grape', 'kiwi');
console.log(fruits); // 出力: ['apple', 'grape', 'kiwi', 'melon']
‘fruits’配列の2番目の位置（インデックス1）から2つの要素（’banana’, ‘orange’）を削除し、その位置に’grape’と’kiwi’を追加しています。
`splice`メソッドは操作後の配列を直接変更するため、新しい配列を作成することなく、必要な変更を反映できる点も大きな利点です。
JavaScript配列の基礎知識
配列には、要素の追加や削除、取得などを行うための様々なメソッドが用意されています。
JavaScriptで配列を使いこなすためには、配列の構造など基礎知識が必要です。
まずは、以下の配列の基礎知識について学んでいきましょう。
- JavaScript配列の基本構造
- 配列データに要素を追加する方法
- JavaScriptでの配列操作
順番に解説していきますね。
JavaScript配列の基本構造
JavaScriptでの配列は、複数のデータを1つの変数で管理できる便利なデータ構造です。
配列は、角括弧`[ ]`を使用して定義し、この中にカンマ`,`で区切って複数の要素を入れられます。
配列内の各要素には、0から始まるインデックスが割り当てられていますよ。例えば、5つの要素を持つ配列がある場合、そのインデックスは0から4までの値を取ります。
以下のサンプルコードの場合、”Apple”はインデックス0に、”Banana”はインデックス1に位置します。
let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
配列の長さ（要素の数）を知るには、lengthプロパティを使用します。
let fruits = ["Apple", "Blueberry", "Cherry", "Date""];
console.log(fruits.length); // 4が出力される
以下では、`”Apple”, “Blueberry”, “Cherry”, “Date”`の4要である「4」が出力されます。
配列を使用することで、関連する値をまとめて扱い、その集まりに対して繰り返し操作を行ったり、特定の要素にアクセスしたりすることが可能になりますよ。
配列データに要素を追加する方法
配列データに要素を追加する方法は、`push`、`unshift`、`splice`メソッドを用います。
ここでは、それぞれのメソッドの違いを知り、使い分けられるようになりましょう。
`push`メソッドは、配列の末尾に要素を追加する際に便利です。以下のサンプルコードを見てください。
//単一の要素を追加する場合
let numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers); // 出力: [1, 2, 3, 4]
//複数の要素を追加する場合
let numbers = [1, 2, 3];
numbers.push(4, 5, 6);
console.log(numbers); // 出力: [1, 2, 3, 4, 5, 6]
追加したい要素を引数に指定するだけで追加できるので、とてもシンプルです。
`unshift`メソッドは、`push`メソッドの逆で配列の先頭に要素を追加したい場合に用います。
以下のサンプルコードを見てください。
let numbers = [2, 3, 4];
numbers.unshift(1);
console.log(numbers); // 出力: [1, 2, 3, 4]
この例では、「1」が「2,3,4」の要素の先頭に追加されています。
配列の中間に要素を追加する場合は、`splice`メソッドを使いましょう。
以下のサンプルコードを見てください。
let numbers = [1, 2, 4, 5];
numbers.splice(2, 0, 3); // 2番目の位置に、要素を削除せずに3を追加
console.log(numbers); // 出力: [1, 2, 3, 4, 5]
spliceメソッドの第一引数に追加したい位置（ここでは2）、第二引数に削除する要素の数（ここでは0）、第三引数以降に追加したい要素を指定しています。
これらのメソッドを適切に使い分けることで、配列の末尾、先頭、または任意の位置に新しいデータを効率的に追加することが可能です。
なお、下の記事ではJavaScriptのarrayについて詳しく解説しているので、よければ参考にしてください。
→ JavaScript arrayとは？できることや配列の操作方法も紹介
配列結合の方法
JavaScriptで配列を扱う際、異なる配列を結合する方法を知っておくと便利です。
配列の結合には大きく分けて「非破壊的な結合」と「破壊的な結合」の2つの方法があります。
まずは、「非破壊的な結合」である`concat`メソッドを解説していきますね。
`concat`メソッドを使用すると、元の配列を変更せずに配列を結合して新しい配列を作成できます。
let array1 = ['a', 'b'];
let array2 = ['c', 'd'];
let newArray = array1.concat(array2);
console.log(newArray); // 出力: ['a', 'b', 'c', 'd']
console.log(array1); // 出力: ['a', 'b']
console.log(array2); // 出力: ['c', 'd']
この例では、`array1`と`array2`を結合して新しい配列`newArray`を作成しています。
非破壊的であるため、元の配列はそのまま保持され、`array1`と`array2`は変更されずにそのまま残りますよ。
配列に直接、別の配列の要素を追加したい場合は、「破壊的な結合」である`push`メソッドと`apply`メソッドを組み合わせて使用します。
let array1 = ['a', 'b'];
let array2 = ['c', 'd'];
Array.prototype.push.apply(array1, array2);
console.log(array1); // 出力: ['a', 'b', 'c', 'd']
console.log(array2); // 出力: ['c', 'd']
`array1`に`array2`の要素が追加され、`array1`が変更されています。
実装に合わせて使い分けると便利ですよ。
なお、JavaScriptのsplitについてより詳しく知りたい人は次の記事を参考にしてください。
→ JavaScript splitとは？できることや使い方、学習方法も紹介
JavaScriptでの配列操作
配列の作成や要素の追加、配列結合の方法はこれまで学んできました。
ここでは、配列内の特定の要素にアクセスする方法や配列の反復処理に関して学んでいきましょう。
配列内の特定の要素にアクセスするには、インデックスを使用しますよ。JavaScriptの配列のインデックスは0から始まります。
let fruits = []; // 空の配列を作成
let vegetables = ['tomato', 'cucumber', 'onion']; // 初期値を持つ配列を作成
console.log(vegetables[0]); // 'tomato'を出力
これで、指定したインデックス番号の要素を出力できます。
既存の要素を新しい値で置換するには、同じくインデックスを使用しますよ。
vegetables[0] = 'carrot'; // 'tomato'を'carrot'に置換
先ほどまで、インデックス番号0は’tomato’でしたが、’carrot’に置換されました。
次に、配列の反復処理です。
配列の各要素に対して処理を行いたい場合、`forEach()`メソッドを使います。
`forEach()`メソッドを使用すると、配列の各要素に対して定義した関数を1度ずつ実行できます。
以下のサンプルコードを見てください。
let fruits = ["Apple", "Banana", "Cherry"];
fruits.forEach(function(item, index, array) {
console.log(item); // 各要素の値を出力
// ここでindexやarrayを使うことも可能
//出力結果:Apple,Banana,Cherry
});
`forEach()`メソッドに渡された関数が配列fruitsの各要素に対して実行されます。
関数の第一引数`item`は配列の要素`（”Apple”, “Banana”, “Cherry”）`を指し、この要素に対して`console.log(item);`が実行され、コンソールに各要素が出力されますよ。
注意点として、`forEach()`を使って新しい配列を直接生成することはできません。
新しい配列を直接生成する場合には、`map`メソッドを使用すると便利です。
map()は元の配列を変更せずに、変換された要素を含む新しい配列を返します。
以下のサンプルコードを見てください。この例では、数値の配列を取り、各要素を2倍にした新しい配列を生成します。
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(item) {
return item * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]が出力される
map()メソッドはこの関数の戻り値から新しい配列doubledNumbersを生成し、最終的にこの新しい配列が出力されますよ。
なお、下の記事ではJavaScriptのmapについて詳しく解説しているので、よければ参考にしてください。
→ JavaScript mapとは？特徴や使い方、注意点を実践形式で解説
また、JavaScriptのforeachについて詳しく知りたい人は次の記事を参考にしてください。
→ JavaScript foreachとは？特徴や使い方、注意点を事例付きで紹介
JavaScript配列における要素の取得・処理方法
この章では、JavaScript配列における要素の取得や処理方法に関して以下を順番に解説していきます。
- 要素の先頭・末尾の取得
- ランダムな要素の取得
- 配列の長さ・要素の取得
上から順に解説していきますね。
要素の先頭・末尾の取得
配列の最初の要素と最後の要素を取得する方法は非常にシンプルです。
先頭の要素を取得するには、単純にインデックス`0`を指定します。`array[0]`のように記述することで、最初の要素にアクセスできます。
let fruits = ['apple', 'banana', 'cherry'];
let firstFruit = fruits[0];
console.log(firstFruit); // 'apple'が出力されます。
末尾の要素を取得するには、`length`プロパティを用います。
具体的には、`array[array.length – 1]`とすることで、最後の要素にアクセスしますよ。以下のコードを見てみましょう。
let lastFruit = fruits[fruits.length - 1];
console.log(lastFruit); // 'cherry'が出力されます。
配列の内容を変更せずに特定の要素を取得したい場合に便利です。
ランダムな要素の取得
配列からランダムな要素を取得するには、乱数を生成してインデックスとして利用します。
具体的には、`Math.random()`関数を使って`0`から`1`未満のランダムな値を生成し、それを配列の長さで乗算、`Math.floor()`関数で整数に変換します。
以下のサンプルコードを見てみましょう。
function getRandomElement(arr) {
// 配列の長さに基づいてランダムなインデックスを生成
let randomIndex = Math.floor(Math.random() * arr.length);
// ランダムなインデックスを使って要素を取得
return arr[randomIndex];
}
// 使用例
let fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];
let randomFruit = getRandomElement(fruits);
console.log(randomFruit);
関数`getRandomElement`は、任意の配列を引数に取り、その配列からランダムな要素を返します。
`Math.random()`は0以上1未満の数値を生成するため、`Math.floor()`を使用して整数に丸めることが必須です。
配列の長さ・要素の取得
配列の長さを取得するには、lengthプロパティを直接使用します。lengthプロパティを使うと、配列に含まれる要素の総数を知れます。
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.length); // 3が出力されます。
配列の長さを知ることは、配列の各要素を処理する際にループを使用する場合などに用います。
以下のサンプルコードを見てください。
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
forループは、指定された条件がfalseになるまで繰り返しブロック内のコードを実行します。
fruits.lengthは配列fruitsの長さ、つまり要素の数を返し、この条件がtrueである間、ループは続きますよ。
配列の長さに基づいてループを制御することで、配列のサイズが変わってもコードを変更する必要がなく、柔軟に配列の全要素を処理することができますね。
JavaScript配列操作の応用テクニック
最後に配列操作の応用テクニックに関して、以下を解説します。
- 配列全要素の削除
- 連想配列とpush/popメソッド
それぞれ見ていきましょう。
配列全要素の削除
配列の全要素を削除するには、いくつかの方法があります。
まずは、配列のlengthプロパティを0に設定することで、配列の全要素を削除可能です。
配列自体を変更するため、「破壊的操作」と呼ばれます。
以下のサンプルコードを見てください。
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
配列の長さを直接操作することにより、要素を一つずつ削除する手間を省けます。
特に大きな配列を扱う際に有効で、配列を再利用する場合に適していますよ。
次に、配列に新しい空配列[]を再代入する方法でも、元の配列の全要素を削除できます。
元の配列を新しい空配列で「置き換える」ことによって要素を削除する方法です。
let array = ['a', 'b', 'c'];
array = [];
console.log(array); // 出力: []
再代入を行うと、元の配列への参照が新しい空配列に更新されるため、元の配列は削除対象になります。
特定のスコープ内でのみ配列を使用し、その後は配列自体が不要になる場合に適していますよ。
最後に、冒頭で触れた`splice`メソッドを使用して、配列の指定した位置から特定の数の要素を削除する方法です。
全要素を削除するには、第一引数に`0`を、第二引数に配列の長さ`array.length`を指定します。
let array = ['a', 'b', 'c'];
array.splice(0, array.length);
console.log(array); // 出力: []
配列の一部の要素だけを条件に応じて削除したい場合や、全要素を削除しつつ削除された要素を別の変数に格納したい場合に特に有用です。
連想配列とpush/popメソッド
配列と連想配列の宣言の仕方が異なり、波括弧`{}`を使用して宣言され、キーと値のペアで構成されます。
配列の末尾に1つ以上の要素を追加する`push`メソッドや配列の末尾から要素を1つ取り除き返す`pop`メソッドに相当するメソッドは存在しませんが、要素を追加したり削除したりする操作は可能です。
オブジェクトに新しいキーと値のペアを追加するには、ドット記法またはブラケット記法を使用します。
person.age = 30; // ドット記法
person["location"] = "Tokyo"; // ブラケット記法
オブジェクトから要素を削除するには、`delete`を使用します。
delete person.age; // ageプロパティを削除
要素を配列のように順序付けて扱いたい場合は、Object.keys、Object.values、Object.entriesなどのメソッドを使用してオブジェクトのキー、値、キーと値のペアを配列として取得し、配列のメソッドを適用する方法があります。
以下のサンプルコードを見ていきましょう。
let keys = Object.keys(person); // オブジェクトのキーのみを配列で取得
console.log(keys); // ["name", "sex", "location"]
Object.keys()メソッドは、オブジェクト自身が持つ列挙可能なプロパティのキーを、文字列の配列として返します。
この例では、personオブジェクトのキー（name、sex、location）が配列としてkeys変数に格納され、出力されます。
Object.values()メソッドを使った場合のサンプルコードは以下の通りです。
let values = Object.values(person); // オブジェクトの値のみを配列で取得
console.log(values); // ["Mike", "Male", "Tokyo"]
Object.values()メソッドは、オブジェクト自身が持つ列挙可能なプロパティの値を、配列として返します。
この例では、personオブジェクトの値（”Mike”、”Male”、”Tokyo”）が配列としてvalues変数に格納され、出力されます。
他にも、Object.entries()メソッドを使用すると、オブジェクトのキーと値のペアを[キー, 値]の形式の配列として取得できます。
以下の例を見ていきましょう。
let person = {
name: "Mike",
sex: "Male",
location: "Tokyo"
};
let entries = Object.entries(person);
console.log(entries);
キーと値のペアを[キー, 値]の形式で含む配列を取得できます。
//出力結果
[ ["name", "Mike"],
["sex", "Male"],
["location", "Tokyo"]
]
これらのメソッドを使うことで、JavaScriptにおけるオブジェクトの扱いがより柔軟に使えます。
JavaScriptのスキルを活かして収入を増やすなら
なかには、副業での収入獲得やフリーランスへの独立を目的にJavaScriptのスキル習得に励んでいる人もいますよね。
ただ、身につけたスキルをどう収入UPに繋げればいいのか、イメージが湧かない人もいるはず。
そんな方は、ぜひフリーランスのミカタをご活用ください。
出典：フリーランスのミカタ
フリーランスのミカタは、平均単価80万円以上の案件を取り揃える、ITエンジニアに特化したフリーランスエージェントです。具体的には、次のような週3回からフルリモートで請け負える案件を豊富に掲載しています。
また希望年収や稼働時間だけでなく、扱うプログラミング言語などを細かく指定して案件を探せるため、自分にあう仕事を見つけやすいサイト仕様になっています。
ただし、上記のような案件は条件として2〜3年の実務経験が求められるケースが多いです。そのため、応募する際はどれくらいの経験が必要なのかを前もってチェックしておきましょう。
フリーランスのミカタを活用すれば、中・長期的な安定収入が得られる案件が見つかりますよ。
どんな案件が掲載されているか気になる人は、下のボタンから自分にあう案件を探してみてください。
[center][btn href=”https://freelance-mikata.com/ad/media_redirect_02/redirector?utm_source=ownedmedia&utm_medium=media&utm_campaign=lp” class=”cubic1 green-bc shadow”]公式サイトで詳細を見る[/btn][/center]
まとめ
これまで、javascriptの配列について基礎から応用まで紹介してきました。配列とオブジェクトの操作は、データ構造の管理と操作の基礎を形成します。
配列は順序付けられたデータ集合を管理するために用いられ、pushやpopメソッドによって動的に要素の追加や削除が可能です。
一方、JavaScriptのオブジェクトはキーと値のペアで構成され、配列と異なりpushやpopメソッドは直接使用できません。その代わりに、Object.keys()やObject.values()などのメソッドによってキー、値、またはキーと値のペアを配列形式で取得し操作することができます。
JavaScriptの配列とオブジェクト操作の理解は、データの加工や分析、動的なデータ管理を行う上で欠かせないスキルです。
まだまだ知識が浅く、JavaScriptの他の処理に関しても基礎知識をつけたい！応用的なJavaの書き方も学びたい！という方もいるでしょう。
本記事ではプログラミングに関する多くの疑問を解決できるので、参考にしてみてくださいね。
次の記事ではJavaScriptでよく使われるおすすめのフレームワークを解説しているので、よければ参考にしてください。
