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. 配列の要素（データ）を取り出す方法：インデックスの仕組み

配列に保存したデータを取り出すには、「インデックス（添え字）」という番号を使います。プログラミングの世界では、この番号は「1」ではなく「0」から数え始めるのが大きなルールです。これを「ゼロオリジン」と呼びます。

たとえば、3つのフルーツが入った配列から1つずつデータを取り出すコードを見てみましょう。初心者の方が間違いやすい「番号のズレ」に注目してください。

// 配列の作成
const fruits = ["りんご", "みかん", "バナナ"];

// インデックスを使って中身を表示
console.log(fruits[0]); // 0番目（1つ目）の要素を表示
console.log(fruits[1]); // 1番目（2つ目）の要素を表示
console.log(fruits[2]); // 2番目（3つ目）の要素を表示

上記のコードを実行すると、コンソールには次のように表示されます。

りんご
みかん
バナナ

JavaScriptでは、fruits[0]と書くことで、箱の先頭にある「りんご」を指し示します。もし3番目の「バナナ」を取り出したいときは、fruits[3]ではなくfruits[2]と指定する必要があります。

この「0番目から始まる」という感覚に慣れることが、配列をマスターする第一歩です。存在しない番号（例えばこの場合、fruits[10]など）を指定してしまうと、エラーではなくundefined（値が定義されていない状態）が返ってくるという特徴も覚えておくと便利ですよ。

4. 配列の長さ（要素数）を調べる（lengthプロパティ）

4. 配列の長さ（要素数）を調べる（lengthプロパティ）

プログラムを書いていると、「今、この配列の中にデータがいくつ入っているんだろう？」と確認したくなる場面がよくあります。例えば、ショッピングカートに入れた商品の数や、テストを受けた人数をカウントするような時です。

JavaScriptでは、配列の「要素数（データの個数）」を調べるために、length（レングス）という便利なプロパティが用意されています。

lengthプロパティの使い方

使い方はとてもシンプルで、配列名の後ろに.lengthと付け加えるだけです。プログラミング未経験の方でも、まずは「箱の中身を数える合言葉」だと思えば大丈夫です。

// 好きなフルーツを3つ入れた配列
const fruits = ["りんご", "バナナ", "オレンジ"];

// 配列の長さを調べてコンソールに表示
console.log(fruits.length);

実行結果は以下のようになります。

3

この場合、配列の中に「りんご」「バナナ」「オレンジ」という3つのデータが入っているため、数値の3が返ってきます。もし、ここに後からデータを1つ追加すれば、lengthの値は自動的に4に更新されます。このように、中身の増減に合わせてリアルタイムに数を教えてくれるのがlengthの大きな特徴です。

5. 配列に新しい要素を追加する方法（pushメソッド）

5. 配列に新しい要素を追加する方法（pushメソッド）

プログラムを書いていると、「後からデータを追加したい」という場面がよくあります。JavaScriptの配列で、一番後ろに新しいデータを追加したいときに最もよく使われるのがpush()メソッドです。

使い方はとても簡単で、追加したい配列名の後ろに.push("追加したいもの")と書くだけです。買い物リストに買い忘れを書き足すようなイメージで、直感的に操作できます。

サンプルコード：お気に入りのフルーツを追加する

まずは、すでに3つのフルーツが入っている配列に、新しく「ぶどう」を追加してみましょう。プログラミング未経験の方でも、以下の流れを見れば仕組みがすぐに分かります。

// 最初に「りんご」「みかん」「バナナ」が入った配列を用意します
let fruits = ["りんご", "みかん", "バナナ"];

// pushメソッドを使って、一番後ろに「ぶどう」を追加します
fruits.push("ぶどう");

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

このコードを実行すると、コンソールには以下のように表示されます。

["りんご", "みかん", "バナナ", "ぶどう"]

実行結果を見ると、もともとの配列の末尾にしっかり「ぶどう」が加わっているのが確認できますね。ちなみに、このpush()は文字列だけでなく、数値や他のデータも同じように追加することが可能です。配列の操作において基本中の基本となるテクニックですので、ぜひ覚えておきましょう。

6. 配列の要素を削除する方法（pop / shift / splice）

6. 配列の要素を削除する方法（pop / shift / splice）

配列にデータを入れるだけでなく、不要になった要素を削除する操作も頻繁に行われます。JavaScriptには、削除したい場所（最後、最初、または特定の場所）に合わせて便利なメソッドが用意されています。

配列の最後を削除する：pop()

配列の一番最後にあるデータを取り除くには、pop()メソッドを使います。箱の一番上に置いた荷物をパッと取り出すようなイメージです。初心者の方でも直感的に使いやすい、最も基本的な削除方法です。

let fruits = ["りんご", "みかん", "バナナ", "ぶどう"];

// 配列の最後の要素（ぶどう）を削除します
fruits.pop();

console.log(fruits);

実行結果：

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

この例では、最後に追加されていた「ぶどう」が削除され、配列の長さが4から3に変わりました。この操作は元の配列を直接書き換えるのが特徴です。

配列の先頭を削除する：shift()

最後ではなく、一番最初のデータ（インデックス番号が0のもの）を削除したい場合は、shift()メソッドを使います。行列の先頭の人が抜けて、後ろの人が一つずつ前に詰めるような動作をします。

let animals = ["イヌ", "ネコ", "ウサギ"];

// 配列の最初の要素（イヌ）を削除します
animals.shift();

console.log(animals);

実行結果：

["ネコ", "ウサギ"]

特定の場所を削除する：splice()

「2番目の要素だけ消したい」というように、場所を指定して削除したいときはsplice()を使います。splice(開始位置, 削除する個数)というルールで記述します。プログラミングでは、1番目の要素は「0」から数え始める点に注意しましょう。

let colors = ["赤", "青", "黄", "緑"];

// インデックス番号1（2番目の「青」）から1つだけ削除します
colors.splice(1, 1);

console.log(colors);

実行結果：

["赤", "黄", "緑"]

このように、用途に応じてメソッドを使い分けることで、配列内のデータを自由自在に整理できるようになります。まずは一番シンプルなpop()から慣れていきましょう。

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