などの疑問や悩みを解決してまいります。
プログラミング言語において基本的かつ重要な配列ですが、初学者の方はつまづきがちです。
変数や定数とは違い複数の値を保持できる配列ですが、配列の中身を操作するとなるとこんがらがってしまう方も多いです。
今回はJavaScript初心者の方に向けて、配列と配列操作について解説していきたいと思います。
配列とは
JavaScriptにおける配列は、複数の値を1つの変数に格納することができます。
これにより、関連するデータをひとまとめにしてデータを処理することが可能になります。
配列を使うメリットとは
それでは配列を使うことでどのようなメリットがあるのかを解説していきます。
データをまとめることができる
配列は、同じ種類のデータをひとまとめにして管理することができるため、 関連する情報をまとめて保持しておくことができます。
例えばToDoアプリケーションにおいてタスクのリストをまとめたり、種類ごとに分けて管理したりすることができます。
各要素が1つのデータを表し、それがまとまって配列を構成することで、データの構造が明確になります。
効率的にデータを処理することができる
配列は複数のデータを持つことができるためデータそれぞれに処理をするとなると「記述が増えてしまう」と考えがちですが、そのデータに対して一括で処理を行うことも可能です。
例えば、全ての要素に対して同じ処理を行いたい場合、ループ（for文）を使って効率的に処理できます。
そのため記述するコードも増えることがなく、複数の値に対してデータ処理をすることが可能になります。
データを変更したり、拡張したりデータを操作することができる
配列の値に対して、要素の追加や削除が簡単に行えます。
配列専用のメソッドも多数用意されているので、これらを駆使しアプリケーションやシステムでの動的な処理も柔軟に対応することができます。
配列の書き方
それでは配列の書き方について解説していきます。
配列は直接角括弧 [] で括り、その中に要素を記述します。
let fruits = ['りんご', 'ばなな', 'ぶどう'];配列の値を出力する
それでは配列の中身をコンソールに出力したり、Webページに表示したりしてみます。
console.logで出力する
console.logの引数に定数・変数を指定して、配列の値全てを出力することができます。
let fruits = ['りんご', 'ばなな', 'ぶどう'];
console.log(fruits);
// コンソールには ['りんご', 'ばなな', 'ぶどう'] が表示されるインデックス番号を指定して出力する
インデックス番号を指定することで、指定したインデックス番号に該当するその値のみを出力することができます。
let fruits = ['りんご', 'ばなな', 'ぶどう'];
console.log(fruits[1]);
// 配列の2番目の要素を出力（'ばなな'）配列からデータを取り出し、Webページに表示する
次は配列の中身をWebページに表示させてみます。
いろいろな方法がありますが、今回はリスト形式で配列の中身を表示させていきたいと思います。
<h2>Fruits List</h2>
<ul id="fruitsList"></ul>// fruits配列の定義
let fruits = ['りんご', 'ばなな', 'ぶどう'];
// ul要素を取得
let fruitsList = document.getElementById('fruitsList');
// forループを使用して配列をリスト表示
for (let i = 0; i < fruits.length; i++) {
// li要素を作成し、テキストを設定
let listItem = document.createElement('li');
listItem.textContent = fruits[i];
// ul要素にli要素を追加
fruitsList.appendChild(listItem);
}上記のコードは、まずリストを表示するための親要素ulタグを用意してfruitsListをidとして指定しています。
fruitsListという変数を用意して、その中にfruitsListのidを持つ要素を取得します。
let fruitsList = document.getElementById('fruitsList');<ul id="fruitsList"></ul>を取得しています。次にfor文を使用して、繰り返し処理を実行していきます。
for (let i = 0; i < fruits.length; i++) {
// li要素を作成し、テキストを設定
let listItem = document.createElement('li');
listItem.textContent = fruits[i];
// ul要素にli要素を追加
fruitsList.appendChild(listItem);
}その中でcreateElement('li')を使用してliタグを生成し、変数listItemに入れていきます。
let listItem = document.createElement('li');次に変数listItemにあるliタグの中身をtextContentを使用して配列の中身を挿入します。
listItem.textContent = fruits[i];最後にappendChild(listItem)で変数fruitsList、すなわち<ul id="fruitsList"></ul>にliタグを追加していきます。
fruitsList.appendChild(listItem);これでWebページに表示することができました。
<h2>Fruits List</h2>
<ul id="fruitsList">
<li>りんご</li>
<li>ばなな</li>
<li>ぶどう</li>
</ul>配列操作について
最後に配列操作について解説します。
配列操作とは、簡単に言うと配列の中身を追加や削除、変更したりすることです。
JavaScriptには配列操作を行うメソッドが多数用意されています。
今回は配列メソッドを一部紹介したいと思います。
forEach
配列の各要素に対して指定した処理を実行します。
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number * 2));
// 各要素を2倍して出力numbersの値をnumberに代入し、それぞれ２倍にしてからconsole.logで出力しています。map
配列の各要素に対して新しい値を生成し、それらからなる新しい配列を作成します。
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(number => number * 2);
// 新しい配列: [2, 4, 6, 8, 10]numbersの値をnumberに代入し、それぞれ2倍してから新しい配列を生成しています。filter
指定した条件を満たす要素だけを抽出して新しい配列を作成します。
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(number => number % 2 === 0);
// 新しい配列: [2, 4]numbersの値をnumberに代入し、numberを2で割った余りが0の要素のみ抽出し、新しい配列を生成しています。find
指定した条件に最初に合致した要素を取得します。
let numbers = [1, 2, 3, 4, 5];
let targetNumber = numbers.find(number => number > 3);
// 最初に3より大きい要素: 4numbersの値をnumberに代入し、「numberが3よりも大きい」という条件に合致した最初の要素のみを抽出します。reverse
配列の順序を逆にすることができるメソッドです。
配列の最初の要素が最後に、最後の要素が最初になります。これにより、元の順序とは逆の配置を持つ新しい配列を得ることができます。
let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = numbers.reverse();
// reversedNumbersは新しい配列: [5, 4, 3, 2, 1]numbersの値をreverseメソッドを使用して配列の順番を逆にして新しい配列reversedNumbersを生成しています。concat
現在の配列に他の配列や要素を結合するために使用されます。
let numbers = [1, 2, 3, 4, 5];
let additionalNumbers = [6, 7, 8];
let combinedArray = numbers.concat(additionalNumbers);
// combinedArrayは新しい配列: [1, 2, 3, 4, 5, 6, 7, 8]numbersの値に配列additionalNumbersの値を追加して新しい配列combinedArrayを生成しています。、slice
配列の指定した範囲を切り出して新しい配列を生成します。
このメソッドを使用することで、元の配列から一部の要素を抽出することができます。
let numbers = [1, 2, 3, 4, 5];
let slicedArray = numbers.slice(1, 4);
// slicedArrayは新しい配列: [2, 3, 4]numbersの値をsliceメソッドで1と4を取り除き新しい配列slicedArrayを生成しています。メソッドは他にもまだまだありますので気になる方はぜひ調べてみてくださいね！
