• Home
  • Web制作
  • 【JS入門】配列を使いこなそう！基礎から応用、サンプルコード付き解説

【JS入門】配列を使いこなそう！基礎から応用、サンプルコード付き解説

schedule

はじめに：配列ってどんなもの？

JavaScriptで開発を行う皆さんは、「配列」という機能をご存知でしょうか？

配列は、複数の値をまとめて管理できる便利な仕組みです。

例えば、複数のユーザーの名前を扱う場合を考えてみましょう。

配列を使わずに、変数だけで管理しようとすると、以下のように、変数の数が多くなってしまい、管理が大変になってしまいます。

const userName1 = "田中";
const userName2 = "佐藤";
const userName3 = "鈴木";

しかし、配列を使えば、以下のように、一つの変数で複数のユーザー名を管理できます。

const userNames = ["田中", "佐藤", "鈴木"];

このように、配列は、複数の値を効率的に管理できるため、JavaScript開発では必須の機能と言えるでしょう。

配列の基本：宣言と要素へのアクセス

配列の宣言：データを格納する箱を用意する

JavaScriptで配列を使うには、まず配列を宣言する必要があります。

配列の宣言は、以下の構文で行います。

const 配列名 = [要素1, 要素2, ...];

具体的には、以下のように記述します。

const numbers = [1, 2, 3, 4, 5];
const fruits = ["apple", "banana", "orange"];

上記の例では、numbersという配列に1から5までの数値を、fruitsという配列に"apple", “banana”, “orange"という文字列を格納しています。

JavaScriptの配列は、異なるデータ型の値を混在させて格納することも可能です。

const mixedArray = [1, "apple", true, null];

要素へのアクセス：配列内のデータを取り出す

配列に格納した要素にアクセスするには、インデックスを使います。

インデックスは、配列内の各要素に割り当てられた番号で、0から始まります。

例えば、fruits配列の最初の要素(“apple”)にアクセスするには、以下のように記述します。

const firstFruit = fruits[0];
console.log(firstFruit); // "apple"と出力されます

配列操作：要素の追加・削除、並び替え

JavaScriptでは、配列を操作するための様々なメソッドが用意されています。

ここでは、配列操作の基本となる、要素の追加、削除、並び替えについて解説します。

要素の追加：配列に新しいデータを追加する

配列に新しい要素を追加するには、push()メソッドとunshift()メソッドを使用します。

push()メソッド：配列の最後に要素を追加

push()メソッドは、配列の最後に要素を追加します。

const colors = ["red", "green", "blue"];
colors.push("yellow"); 
console.log(colors); // ["red", "green", "blue", "yellow"]と出力されます

unshift()メソッド：配列の先頭に要素を追加

unshift()メソッドは、配列の先頭に要素を追加します。

const colors = ["red", "green", "blue"];
colors.unshift("yellow"); 
console.log(colors); // ["yellow", "red", "green", "blue"]と出力されます

要素の削除：配列から不要なデータを削除する

配列から要素を削除するには、pop()メソッドとshift()メソッドを使用します。

pop()メソッド：配列の最後の要素を削除

pop()メソッドは、配列の最後の要素を削除し、その要素を返します。

const colors = ["red", "green", "blue"];
const removedColor = colors.pop();
console.log(removedColor); // "blue"と出力されます
console.log(colors); // ["red", "green"]と出力されます

shift()メソッド：配列の先頭の要素を削除

shift()メソッドは、配列の先頭の要素を削除し、その要素を返します。

const colors = ["red", "green", "blue"];
const removedColor = colors.shift();
console.log(removedColor); // "red"と出力されます
console.log(colors); // ["green", "blue"]と出力されます

並び替え：配列の要素の順番を変える

配列の要素の並び替えには、sort()メソッドを使用します。

sort()メソッド：配列の要素を昇順に並び替える

sort()メソッドは、配列の要素を昇順に並び替えます。

const numbers = [3, 1, 4, 2, 5];
numbers.sort();
console.log(numbers); // [1, 2, 3, 4, 5]と出力されます

配列とループ処理：効率的にデータを処理する

配列とループ処理を組み合わせることで、配列内の要素に対して効率的に処理を行うことができます。

ここでは、ループ処理でよく使われるfor文を使った配列の処理方法を紹介します。

for文を使った配列の処理

for文を使うと、配列の要素を順番にアクセスし、処理を行うことができます。

const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]); 
}
// 出力結果
// 1
// 2
// 3
// 4
// 5

上記の例では、for文を使ってnumbers配列の要素を順番に出力しています。

まとめ：配列を使いこなしてJavaScript開発を効率化しよう！

今回は、JavaScriptの配列について、基礎から応用まで解説しました。

配列は、複数の値を効率的に管理するために必須の機能です。

本記事で紹介した内容を踏まえ、配列をマスターして、JavaScript開発をより効率的に進めましょう！

関連記事