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

1. 配列（Array）とは？仕組みをわかりやすく解説

1. 配列（Array）とは？仕組みをわかりやすく解説

JavaScriptの配列（Array）とは、複数のデータを一つのグループとして「順番通り」にまとめて管理できる非常に便利なデータ型です。プログラミング初心者の方は、「仕切りのある大きな箱」や、「番号がついたマンションの郵便受け」をイメージすると分かりやすいでしょう。

通常、変数は1つの箱に1つのデータしか入りませんが、配列を使えば「買い物リスト」や「出席簿」のように、関連する複数の情報を一つの変数名でまとめて扱うことができます。

インデックス（添え字）という考え方

配列の最大の特徴は、格納された各データに「インデックス（index）」と呼ばれる背番号が自動的に割り振られる点です。ここで最も重要なルールが1つあります。

それは、「番号は必ず 0 から始まる」ということです。1番目のデータはインデックス「0」、2番目のデータはインデックス「1」となります。この数え方は、JavaScriptだけでなく多くのプログラミング言語で共通のルールです。

簡単な具体例で見てみよう

例えば、3人のキャラクターの名前を一つの配列にまとめる場合は、以下のように記述します。

// 3人の名前を「members」という名前の配列にまとめる
const members = ["田中さん", "佐藤さん", "鈴木さん"];

// 1番目の「田中さん」は、0番目のインデックスで取り出せる
console.log(members[0]);

田中さん

このように、バラバラに変数を作るのではなく、配列にまとめることでデータの追加や検索、並び替えなどの複雑な処理が圧倒的に楽になります。Webアプリ開発において、ニュース記事の一覧や商品リストを表示する際など、配列は必ずと言っていいほど使われる必須の知識です。

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

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

JavaScriptで配列を作成する最も一般的で推奨される方法は、ブラケット（角かっこ）[]を使用する「配列リテラル」という書き方です。複数のデータをカンマ,で区切ることで、一つの変数にまとめて管理できるようになります。

プログラミング未経験の方でも直感的に理解しやすいよう、まずは身近な「買い物リスト」を例に配列を作ってみましょう。

// 配列の宣言と初期化
const fruits = ["りんご", "みかん", "バナナ"];

// 中身を確認してみましょう
console.log(fruits);

実行結果：

["りんご", "みかん", "バナナ"]

このコードでは、fruitsという名前の箱（変数）の中に、3つの果物の文字列データが順番に並んで格納されています。

配列を作成する際のポイントは以下の3点です：

• 全体を [] で囲む： これが配列であることをコンピュータに伝えます。
• データの間を , で区切る： 区切りを忘れるとエラーになるので注意しましょう。
• データ型を合わせる（推奨）： 文字列なら "" で囲みます。数値ならそのまま記述します。

例えば、数字のリストを作りたい場合は以下のようになります。

const luckyNumbers = [7, 12, 25];

このように、配列を使えば関連するデータをバラバラにせず、一つのグループとしてスマートに扱うことが可能になります。

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などの新しい技術を学ぶ際にもスムーズに理解を深めることができるでしょう。