初心者向け配列入門【JavaScript】
講師:中島
JavaScriptの配列は、複数のデータを一つの変数に格納するための便利なデータ構造です。
この記事では、配列の基本的な概念から、使い方、便利なメソッドまでを初心者向けに解説します。
この記事のポイント
- 配列とは何かという基本概念が分かる
- 配列の作成法・操作法・配列のメソッドの使い方が分かる
配列とは？
配列は、複数の値を順序付けて１つの変数に格納するためのデータ構造です。
実際には、配列は値に順序をつけたオブジェクトで、数値・文字列など色々な値を設定できます。
それぞれの値はインデックス（添字）でアクセスでき、インデックスは0から始まります。例えば、3つの果物の名前を配列に格納すると以下のようになります。
・定数や変数
複数用意する必要があり大変です。また100個以上あると管理も難しくなります。
const fruit1 ="Apple"
const fruit2 ="Banana"
const fruit3 ="Cherry"
...・配列
複数のデータを1つにまとめて格納できます。また配列のメソッドを使用すると簡単に操作が可能です。
この配列 fruits には、3つの要素が含まれています。
const fruits = ["Apple", "Banana", "Cherry"];//オブジェクトも格納できる
const users = [
{
name: "John",
age: 30,
},
{
name: "Kei",
age: 25,
}];
//一応関数も格納できる
const = [function A(){},function B(){}];
また内包する配列の数が増えると2次元配列などと呼びこれらをまとめて多次元配列と呼びます。
const fruits = [
["Apple","peach"],
["Banana", "Cherry"]
];配列の作成方法
配列を作成する方法はいくつかありますが、ここでは2つの基本的な方法を紹介します。
通常は1.リテラル表記を使用するの方が記述が簡単なので、そちらを使えば良いと思います。
1.リテラル表記を使用する
最も簡単な方法は、角括弧 [] を使って配列をリテラル表記で作成する方法です。
const numbers = [1, 2, 3, 4, 5];2.コンストラクタを使用する
Array コンストラクタを使用して配列を作成することもできます。
const colors = new Array("Red", "Green", "Blue");ただし、コンストラクタを使用する方法では、数字１つだけの配列は作成できない点に注意です。
逆にリテラル表記ではサイズを指定して配列を作成できないため、場面ごとに使い分けましょう。
数字を１つのみ書いた場合は以下の挙動になります。
const numbers = new Array(3)
console.log(numbers) //[empty×3]このように記述すると3つの空要素を持った配列ができます。
要素へのアクセス
配列の要素にはインデックスを使ってアクセスできます。インデックスは0から始まります。
let firstFruit = fruits[0]; // "Apple"
let secondFruit = fruits[1]; // "Banana"
let thirdFruit = fruits[2]; // "Cherry"要素の変更
特定のインデックスにある要素を変更することもできます。
基本の変更の仕方は以下です。
const fruits = ["Apple", "Banana", "Cherry"];
fruits[1] = "Blueberry";
console.log(fruits); // ["Apple", "Blueberry", "Cherry"]もしくはspliceメソッドなど配列メソッドを使って変更することもできます。
要素の削除
配列の値を削除する方法は何通りかあります。
１つはdelete演算子を使用する方法です
しかし、この方法だとインデックス番号はそのままかつ、undefinedになるので、
これが支障をきたすケースでは別の方法を使いましょう。
const fruits = ["'Apple", "Banana", "Cherry"];
delete fruits [1]
console.log(fruits) // ["Apple"', undefined, "Cherry"]別の方法としては、配列メソッドのshift()、pop()、filter()、splice()、slice()などがあります。
使う配列メソッドによって、それぞれ挙動が少し異なるので、どの方法で行うかは状況によって変わります。
配列の長さ(要素数)を取得
配列の要素数を知るには、length プロパティを使用します。
インデックス番号とは違うということと、長さは1からなので注意が混同しないようにしましょう。
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.length); // 3配列のメソッド
JavaScriptには、配列を操作するための便利なメソッドがたくさん用意されています。
ここでは、よく使われるメソッドを紹介します。
これらの配列メソッドを使うことで、JavaScriptでの配列操作がより簡単かつ効率的に行えるようになります。
多数の種類があり困惑すると思いますが、これらのメソッドは全て暗記する必要はありません。
忘れることはよくあるので、その都度調べて使い方が理解できていれば問題ないです。
使っていくうちに慣れていきましょう。
追加・削除1(push , pop)
push() メソッドは、配列の末尾に要素を追加します。
一方、pop() メソッドは、配列の末尾から要素を削除します。
const fruits = ["Apple", "Blueberry", "Cherry"];
fruits.push("Orange");
console.log(fruits); // ["Apple", "Blueberry", "Cherry", "Orange"]
let lastFruit = fruits.pop();
console.log(lastFruit); // "Orange"
console.log(fruits); // ["Apple", "Blueberry", "Cherry"]
追加・削除2(unshift , shift)
shift() メソッドは、配列の先頭から要素を削除します。
一方、unshift() メソッドは、配列の先頭に要素を追加します。
const fruits = ["Apple", "Blueberry", "Cherry"];
fruits.unshift("Mango");
console.log(fruits); // ["Mango", "Apple", "Blueberry", "Cherry"]
let firstFruitRemoved = fruits.shift();
console.log(firstFruitRemoved); // "Mango"
console.log(fruits); // ["Apple", "Blueberry", "Cherry"]
追加・削除・置換・切り取り(slice , splice)
slice() メソッドは、配列の一部を取り出して新しい配列を作成します。
これは非破壊的メソッドであり、元の配列は変更されません。
使い方はslice(start , end)のように使います。
- startには抽出を始める位置のゼロから始まるインデックスを入れます。
- endには抽出し終える位置のゼロから始まるインデックスを入れます。
ただし、endに指定したインデックスの要素は含まず、その直前までが抽出されることに注意しましょう。
endを指定しない場合は、start位置から最後までを全て切り取ります。
const fruits = ["Apple", "Blueberry", "Cherry"];
let citrus = fruits.slice(1, 2);
console.log(citrus); // ["Blueberry"]
console.log(animals.slice(1)); // ["Blueberry", "Cherry"]splice() メソッドは、要素を取り除いたり、置き換えたり、追加したりすることで、配列の内容を変更します。
これは破壊的メソッドであり、元の配列が変更されます。
使い方は少し特殊でsplice(start , deleteCount , item)のように使います。
- startには配列の変更を始める位置のゼロから始まるインデックスを入れます。
- deleteCountには配列の
startの位置から取り除く古い要素の個数を示す整数を入れます。 - itemには配列に追加する要素を任意の数を入れます。もし、itemに要素を指定しなかった場合は、
splice()は単に配列から指定個数分の要素を取り除きます。
const fruits1 = ["Apple", "Blueberry", "Cherry"];
fruits1.splice(1, 1, "Lemon");
console.log(fruits1); // ["Apple", "Lemon", "Cherry"]
const fruits2 = ["Apple", "Blueberry", "Cherry"];
fruits2.splice(1,2);
console.log(fruits2); // ["Apple"]検索1(indexOf)
indexOf()メソッドは指定した要素と合致する最初の要素のインデックス番号を取得します。
要素が存在しない場合は-1が返り値になります。
また、第2引数には検索し始める位置のゼロから始まるインデックスを入れます。
const fruits = ["Apple", "Blueberry", "Cherry", "Apple"];
let index = fruits.indexOf("Cherry");
console.log(index); // 2
// 第2引数を入れた場合
let index2 = fruits.indexOf("Apple",1);
console.log(index2); // 3検索2(includes)
includes()メソッドは配列に要素が含まれているかを真偽値で返します。
const fruits = ["Apple", "Blueberry", "Cherry"];
let hasApple = fruits.includes("Apple");
console.log(hasApple); // true
const numbers = [1,2,3];
let has1 = numbers.includes(1);
console.log(has1); // true検索3(find)
findメソッドは、配列の各要素に対して指定された関数を実行し、その結果が true となる最初の要素を返します。見つからない場合は undefined を返します。
const fruits = ["Apple", "Blueberry", "Cherry"];
const foundFruit = fruits.find(fruit => fruit.startsWith("B"));
console.log(foundFruit); // "Blueberry"文字列へ変換(join)
joinメソッドは、配列のすべての要素を文字列に結合します。結合する際の区切り文字を指定することができます。
const fruits = ["Apple", "Blueberry", "Cherry"];
const result = fruits.join(",");
console.log(result); // "Apple,Blueberry,Cherry" →文字列並べ替え1(sort)
sortメソッドは、配列の要素を並べ替えます。デフォルトでは、文字列として各要素を比較し、昇順に並べ替えます。
数値の配列をソートする場合は、比較関数を指定する必要があります。
const fruits = ["Blueberry","Peach","Cherry","Apple"];
const sortedFruits = [...fruits].sort();
console.log(sortedFruits); // ["Apple", "Blueberry", "Cherry", "Peach"]並べ替え2(reverse)
reverseメソッドは、配列の要素の順序を逆にします。
const fruits = ["Apple", "Blueberry", "Cherry"];
const reversedFruits = [...fruits].reverse();
console.log(reversedFruits); // ["Cherry", "Blueberry", "Apple"]要素置換(fill)
fillメソッドは、配列のすべての要素を指定された値に置き換えます。開始位置と終了位置を指定することもできます。
const fruits = ["Apple", "Blueberry", "Cherry"];
const filledFruits = [...fruits].fill("Kiwi", 1, 2);
console.log(filledFruits); // ["Apple", "Kiwi", "Cherry"]コールバック系メソッド(forEach , map)
forEachメソッドは、配列の各要素に対して指定された関数を一度ずつ実行します。
const fruits = ["Apple", "Blueberry", "Cherry"];
fruits.forEach((fruit) => {
console.log(fruit); //任意の処理を実装できる
});
// 出力:
// Apple
// Blueberry
// Cherrymapメソッドは、配列の各要素に対して指定された関数を実行し、その結果を新しい配列として返します。
配列の返り値があるという点がforEachとの違いです。
配列の返り値が必要ない場合は、forEachを使う。必要な場合は、mapを使うという認識で問題ないです。
const fruits = ["Apple", "Blueberry", "Cherry"];
const uppercasedFruits = fruits.map((fruit) => {
fruit.toUpperCase()
});
console.log(uppercasedFruits); // ["APPLE", "BLUEBERRY", "CHERRY"]この２つは特に開発でもよく使うメソッドのため、MDNなどで仕様を確認し扱えるようになっておきましょう。
削除・切り取り系(filter)
filterメソッドは、配列の各要素に対して指定された関数を実行し、その結果が true となる要素だけを含む新しい配列を返します。
const fruits = ["Apple", "Blueberry", "Cherry"];
const longFruits = fruits.filter(fruit => fruit.length > 5);
console.log(longFruits); // ["Blueberry", "Cherry"]判定1(every)
everyメソッドは、配列のすべての要素が指定された関数の条件を満たす場合に true を返します。一つでも条件を満たさない要素がある場合は false を返します。
const fruits = ["Apple", "Blueberry", "Cherry"];
const allLongerThanThree = fruits.every(fruit => fruit.length > 3);
console.log(allLongerThanThree); // true判定2(some)
someメソッドは、配列の少なくとも一つの要素が指定された関数の条件を満たす場合に true を返します。すべての要素が条件を満たさない場合は false を返します。
const fruits = ["Apple", "Blueberry", "Cherry"];
const hasShortFruit = fruits.some(fruit => fruit.length < 6);
console.log(hasShortFruit); // true連結・結合(concat)
concatメソッドは、2つ以上の配列を結合して新しい配列を作成します。元の配列は変更されません。
const fruits = ["Apple", "Blueberry", "Cherry"];
const moreFruits = ["Dragonfruit", "Peach"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ["Apple", "Blueberry", "Cherry", "Dragonfruit", "Peach"]発展：スプレッド演算子
スプレッド演算子(...)は、配列やオブジェクトを展開するために使用される便利な機能です。
この演算子は2016年のECMAScript 6(ES6)から追加された構文で、配列だけでなくオブジェクトにも使えます。
配列の場合、スプレッド演算子を使うことで、配列のコピーや結合、関数への引数の展開などが簡単に行えます。
配列を結合する際などは、上記のconcatメソッドを使用しても良いのですが、スプレッド構文の方が簡潔に書けるなどメリットがあるためよく使われます。
それに関連して、残余引数という概念もあるのですが、今回は詳しい説明を省きます。
以下に、スプレッド演算子の使い方を具体的なコード例を使って説明します。
配列のコピー
スプレッド演算子を使って、配列を簡単にコピーすることができます。これにより、元の配列を変更せずに(非破壊的に)新しい配列を作成できます。
const fruits = ["Apple", "Blueberry", "Cherry"];
const copiedFruits = [...fruits];
console.log(copiedFruits); // ["Apple", "Blueberry", "Cherry"]配列の結合
スプレッド演算子を使って、複数の配列を結合することもできます。concatメソッドの代わりに使うと簡潔に書けます。
const fruits = ["Apple", "Blueberry", "Cherry"];
const moreFruits = ["Dragonfruit", "Elderberry"];
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits); // ["Apple", "Blueberry", "Cherry", "Dragonfruit", "Elderberry"]
関数への引数の展開
スプレッド演算子は、関数に配列の要素を個別の引数として渡す際にも使えます。
function printFruits(fruit1, fruit2, fruit3) {
console.log(fruit1, fruit2, fruit3);
}
const fruitsToPrint = ["Apple", "Blueberry", "Cherry"];
printFruits(...fruitsToPrint); // "Apple Blueberry Cherry"配列の一部を取り出して新しい配列を作成(残余引数)
スプレッド演算子を使って、配列の一部のみ取り出して新しい配列を作成することもできます。
const fruits = ["Apple", "Blueberry", "Cherry"];
const [firstFruit, ...remainingFruits] = fruits; //...remainingFruitsが 「 残余因数 」 と呼ばれる概念
console.log(firstFruit); // "Apple"
console.log(remainingFruits); // ["Blueberry", "Cherry"]まとめ
いかがでしたでしょうか？
この記事では、配列の基礎知識やJavaScriptの配列メソッドについて、具体的なコード例を交えて解説しました。
配列はJavaScriptにおいて重要なデータ型なので、不安な方は復習しておきましょう。
また、配列メソッドを使うことで、配列の操作や処理がより簡単かつ効率的に行えるようになります。
それぞれのメソッドの特性と使い方を理解し、適切な場面で活用することで、コードの可読性や保守性を向上させることができます。
ぜひ、実際に手を動かして試してみてください。プログラミングスキルの向上に役立つはずです。
CodeVilageでは無料カウンセリングを実施しております！
「興味はあるけど、自分にできるか不安...」
「どんなキャリアを描けばいいのか分からない...」
そんなあなたのために!!
何でも相談できる無料カウンセリングを実施しています。
