JavaScriptの配列型（Array）の基本と使い方まとめ

1. 配列（Array）とは？

1. 配列（Array）とは？

配列とは、複数のデータを順番にまとめて保存できるJavaScriptのデータ型です。たとえば、好きな果物や数字のリストなどをまとめて扱うときに便利です。

イメージとしては、数字の入った引き出しがたくさんある箱のようなものです。引き出しには番号（インデックス）がついていて、0から順に番号が割り振られています。

2. 配列の作り方（宣言方法）

2. 配列の作り方（宣言方法）

配列は角かっこ [] を使って作ります。カンマで区切って複数のデータを並べましょう。

const fruits = ["りんご", "みかん", "バナナ"];

この例では、fruitsという名前の配列に3つの果物の名前が入っています。

3. 配列の要素（データ）を取り出す方法

3. 配列の要素（データ）を取り出す方法

配列の中のデータは、順番を表す番号（インデックス）を使って取り出せます。インデックスは0から始まるので注意しましょう。

console.log(fruits[0]);  // りんご
console.log(fruits[1]);  // みかん
console.log(fruits[2]);  // バナナ

このように、fruits[0]は1番目の「りんご」を指しています。

4. 配列の長さ（要素数）を調べる

4. 配列の長さ（要素数）を調べる

配列に入っている要素の数は、lengthプロパティで調べられます。

console.log(fruits.length);  // 3

この場合は3つの果物が入っているので、3が返ってきます。

5. 配列に新しい要素を追加する方法

5. 配列に新しい要素を追加する方法

配列の最後に新しいデータを追加するには、push()メソッドを使います。

fruits.push("ぶどう");
console.log(fruits);  // ["りんご", "みかん", "バナナ", "ぶどう"]

このようにして、配列の末尾に「ぶどう」が追加されます。

6. 配列の要素を削除する方法

6. 配列の要素を削除する方法

配列の最後の要素を取り除くには、pop()メソッドを使います。

fruits.pop();
console.log(fruits);  // ["りんご", "みかん", "バナナ"]

この例では、「ぶどう」が削除されて元に戻ります。

7. 配列の中身をループ処理で順番に使う

7. 配列の中身をループ処理で順番に使う

配列の要素を順番に取り出して処理したいときは、forループがよく使われます。

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

このコードは、配列の中身を順番に取り出して1つずつ表示します。

8. 配列の便利なメソッドを紹介

8. 配列の便利なメソッドを紹介

JavaScriptの配列には、便利なメソッドがたくさんあります。代表的なものをいくつか紹介します。

• indexOf(value)：指定した値が最初に出てくる位置（インデックス）を返します。なければ -1。
• includes(value)：指定した値が配列にあるかどうかを true または false で返します。
• join(separator)：配列の要素を指定した区切り文字でつなげて1つの文字列にします。
• slice(start, end)：配列の一部を切り出して新しい配列を作ります。

console.log(fruits.indexOf("みかん"));  // 1
console.log(fruits.includes("メロン"));   // false
console.log(fruits.join("、"));           // "りんご、みかん、バナナ"
console.log(fruits.slice(1, 3));          // ["みかん", "バナナ"]

9. 配列とオブジェクトの違い

9. 配列とオブジェクトの違い

配列は「順番」が重要で、数字のインデックスで要素にアクセスします。一方、オブジェクトは「名前（キー）」でデータを管理します。用途に合わせて使い分けることが大切です。

例えば、買い物リストのように順番で管理したいなら配列、ユーザー情報のように名前付きの情報をまとめたいならオブジェクトを使います。

10. 配列の注意点

10. 配列の注意点

• 配列のインデックスは0から始まることを必ず覚えておきましょう。
• 配列の要素にはどんなデータ型も入れられますが、なるべく同じ種類のデータをまとめると扱いやすくなります。
• 配列のサイズは動的に変わるので、追加や削除を自由にできます。

まとめ

まとめ

ここまで、JavaScriptにおける配列（Array）の基礎から応用的な操作方法までを詳しく解説してきました。配列は、プログラミングの世界では避けて通れない非常に重要なデータ構造です。単に値を並べるだけでなく、効率的にデータを管理し、ループ処理や便利なメソッドを組み合わせることで、複雑なプログラムもシンプルに記述できるようになります。

配列操作の重要ポイントをおさらい

JavaScriptで配列を扱う際に、特に意識しておきたいポイントを改めて整理しておきましょう。これらを理解しておくだけで、コードの読みやすさやメンテナンス性が格段に向上します。

• ゼロベースインデックス： 配列の最初の要素は「1番目」ではなく「0番目」から数えます。これは初心者の方が最も間違いやすいポイントですが、慣れてしまえば自然に感じられるようになります。
• 動的なサイズ変更： JavaScriptの配列は、宣言した後に自由に要素を増やしたり減らしたりできます。メモリ管理を意識せずに直感的に操作できるのが大きな魅力です。
• 多機能なメソッド群： pushやpopだけでなく、検索、結合、切り出しなど、強力な組み込みメソッドが用意されています。これらを使いこなすことが、脱初心者の第一歩です。

実践的なサンプルコード：配列の応用操作

学んだ内容を組み合わせて、もう少し実用的なコードを書いてみましょう。例えば、配列内のデータを検索し、特定の条件に一致する場合のみ処理を行うといったケースです。

// ユーザー名のリスト
const users = ["田中", "佐藤", "鈴木", "高橋", "伊藤"];

// 特定のユーザーが含まれているか確認
const searchName = "鈴木";
if (users.includes(searchName)) {
  const index = users.indexOf(searchName);
  console.log(searchName + "さんは、リストの " + (index + 1) + " 番目に見つかりました。");
} else {
  console.log(searchName + "さんは見つかりませんでした。");
}

// 配列のコピーを作成して新しい要素を追加（元の配列は壊さない）
const newUsers = users.slice();
newUsers.push("渡辺");

console.log("元のリスト:", users);
console.log("新しいリスト:", newUsers);

上記のコードを実行すると、以下のような結果が得られます。slice()を使って配列をコピーする手法は、元のデータを保持したい実務の現場で非常によく使われるテクニックです。

鈴木さんは、リストの 3 番目に見つかりました。
元のリスト: ["田中", "佐藤", "鈴木", "高橋", "伊藤"]
新しいリスト: ["田中", "佐藤", "鈴木", "高橋", "伊藤", "渡辺"]

配列とTypeScriptの親和性

最近の開発現場では、JavaScriptに型定義を加えたTypeScriptが主流となっています。TypeScriptを使うと、配列の中に「どんな種類のデータが入るか」を厳密に決めることができるため、バグを未然に防ぐことが可能です。

// 文字列の配列であることを明示する
const colors: string[] = ["赤", "青", "黄色"];

// 数値の配列なら number[] を使う
const prices: number[] = [100, 250, 500];

// 型が違うものを入れようとするとエラーになる（安全！）
// colors.push(100); // エラー：数値は文字列の配列に入れられません

このように、配列の基本をしっかり身につけておけば、将来的にTypeScriptなどの新しい技術を学ぶ際にもスムーズに理解を深めることができるでしょう。