JavaScriptの配列操作でよくあるエラーとその解決法まとめ

1. 配列のインデックスエラー（範囲外アクセス）とは？

1. 配列のインデックスエラー（範囲外アクセス）とは？

配列は順番に並んだデータの集まりで、数字の番号（インデックス）で指定して中身を取り出します。インデックスは0から始まります。

しかし、配列の長さより大きい番号やマイナスの番号を使うと、JavaScriptでは「undefined（未定義）」が返ります。エラーになる場合もあるので注意しましょう。

let fruits = ["りんご", "みかん", "バナナ"];
console.log(fruits[3]);  // undefined（存在しない番号）

解決方法は、配列の長さ（length）を確認してからアクセスすることです。

if (index < fruits.length) {
  console.log(fruits[index]);
}

2. 配列の値が変更できない？参照とコピーの違い

2. 配列の値が変更できない？参照とコピーの違い

配列を別の変数に代入すると、実は中身はコピーされず「参照（さんしょう）」されます。つまり、同じ配列を指している状態です。

このため、一方を変更するともう一方も変わってしまい、思わぬバグの原因になります。

let arr1 = [1, 2, 3];
let arr2 = arr1;  // 参照をコピー
arr2[0] = 100;
console.log(arr1[0]);  // 100に変わっている！

解決方法は、配列を「コピー」して新しい配列を作ることです。よく使われる方法はスプレッド構文（...）やslice()メソッドです。

// スプレッド構文
let arr3 = [...arr1];
// sliceメソッド
let arr4 = arr1.slice();

3. 配列に存在しないメソッドを使ったときのエラー

3. 配列に存在しないメソッドを使ったときのエラー

配列には様々な便利なメソッドがありますが、存在しないメソッドを使うと「TypeError」などのエラーが出ます。

例えば、push()は配列の末尾に値を追加しますが、文字列に使うとエラーです。

let str = "hello";
str.push("!");  // エラーになる

対策は、メソッドを使う対象が本当に配列かどうかを確認することです。

if (Array.isArray(arr)) {
  arr.push(100);
}

4. 配列のループ処理でよくある間違い

4. 配列のループ処理でよくある間違い

配列の要素を順番に処理するときはループを使いますが、ループの書き方を間違うと想定通り動かないことがあります。

例えば、ループの回数を間違えたり、配列の長さを使わなかったりすると、途中でエラーになったり処理が足りなかったりします。

for (let i = 0; i <= arr.length; i++) {  // <= だと配列範囲外にアクセスする
  console.log(arr[i]);
}

正しくは、i < arr.lengthと書きます。

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

5. 配列の中身が期待通りでない？デバッグのコツ

5. 配列の中身が期待通りでない？デバッグのコツ

配列を操作しているのに思った結果にならないときは、どこで間違っているか調べることが大切です。

一番簡単な方法はconsole.log()を使って途中の値を確認することです。例えば、ループの中で配列の中身を表示してみましょう。

for (let i = 0; i < arr.length; i++) {
  console.log(`arr[${i}] =`, arr[i]);
}

こうすると、どの部分が想定と違うか見つけやすくなります。

6. 配列の長さが変わらない？メソッドの使い方を見直そう

6. 配列の長さが変わらない？メソッドの使い方を見直そう

配列の要素を削除したいときに、splice()などのメソッドを使いますが、引数を間違えると期待通りに動きません。

例えば、削除したい位置や数を正しく指定しないと、要素が残ったままになることがあります。

let arr = [1, 2, 3, 4];
arr.splice(1, 2);  // インデックス1から2個削除
console.log(arr);  // [1, 4]

操作前に何をしたいかイメージし、メソッドの使い方を公式ドキュメントで確認することが大事です。

7. 配列の中にnullやundefinedが混ざっている場合の対処

7. 配列の中にnullやundefinedが混ざっている場合の対処

配列に値が入っていると思って操作しても、nullやundefinedが混ざっているとエラーや意図しない動きになることがあります。

これは、値が「ない」状態を表す特別な値で、使うときはチェックが必要です。

if (arr[i] != null) {  // nullまたはundefinedでなければ処理
  // ここで安全に処理できます
}

配列の中身を確認してから操作する習慣をつけましょう。

まとめ

まとめ

ここでは、これまでの記事で紹介してきたJavaScriptの配列操作でよく起こる間違いや、配列にまつわるさまざまなエラーに対してどのように向き合うべきかを、落ち着いて整理しながらふりかえっていきます。配列という仕組みはとても便利ですが、使い方を誤ると思わぬ動きをすることもあり、そこが初心者のつまずきになりやすい部分でもあります。とくにインデックスの扱いや、配列が参照型であることによる予期しない変更などは、初めて学ぶ人にとって戸惑いや疑問を感じる場面がよくあります。だからこそ、配列の性質を理解しておくことは、JavaScriptという言語全体を安心して扱えるようになるための大切な一歩になります。 配列を扱うときに最初に気をつけたいのが、インデックスが必ずゼロから始まるという基本です。単純なことのようですが、この規則を忘れると、存在しない位置を参照してしまい、意図しないundefinedが返ってくることがたびたびあります。そして、配列の範囲外を参照してしまったときにどう判断すればよいのか、実際のコードを使いながら自然と身につけていくことが非常に大切です。また、lengthプロパティの役割を正しく理解することで、範囲外アクセスを避けるだけでなく、ループ処理を書くときに落ち着いて考えられるようになります。 さらに配列に関する重要な概念として「参照」があります。配列を別の変数に代入したつもりが、実際には全く同じ配列を指しており、片方の変更がもう一方にも影響するというのは、最初のうちは驚く点でもあります。しかし、配列は参照型であるという特性を理解しておくと、この仕組みは合理的であることが見えてきます。そのうえで、必要に応じてスプレッド構文やsliceメソッドを使って新しい配列を作るという考え方を身に付けることで、不要な変更によるトラブルを避けることができます。 また、配列操作でのミスとしてよくあるのが、存在しないメソッドを呼び出してしまうというものです。JavaScriptは柔軟な言語である一方で、ある型には存在するメソッドが別の型には存在しないということが起こりやすく、それを正しく見極める判断力が求められます。配列に使えるメソッドを覚えつつ、Array.isArrayによる型チェックを習慣として身につけることで、はじめて安全なコードを書くことができるようになります。 そして忘れてはならないのがループ処理の扱いです。配列の操作はどうしてもループ処理と一緒に登場することが多いため、インデックスの扱い、ループの終わりの条件、配列の長さの正しい参照など、いくつかのポイントを丁寧に押さえておく必要があります。配列の変化とループの進み方がかみ合っていないと、意図しない値を読み取ってしまうことがあり、そうした場面を一つずつ見直しながら書いていく経験はとても大切です。 さらに、配列に混ざるnullやundefinedへの対処も避けては通れないポイントです。コードを書いた本人であっても、どこかの処理で値が意図せず空のまま残ってしまい、それが後からエラーの原因になることがあります。そこで、処理を始める前に必ず値のチェックを行う、あるいは途中でconsole.logを活用して中身を確認するなどの習慣を身につけることで、確実にトラブルを最小限に抑えることができます。 最後に、配列の削除や変更には正しいメソッドの使い方が欠かせません。特にspliceのように引数が複数あるメソッドは、慣れないうちは戸惑うことが多いため、慌てずひとつずつ意味を理解しながら使うことが肝心です。どんなに複雑に見える配列操作でも、動きを細かく観察していけば必ず理解できるようになります。 以下に、これまで学んだことをふりかえりながら確認できるサンプルコードをまとめました。実際に手を動かしながら試してみることで、より深い理解につながるはずです。

サンプルプログラムで理解を深めよう

// 範囲外アクセスを防ぐためのチェック
let fruits = ["りんご", "みかん", "ばなな"];
let index = 2;
if (index < fruits.length) {
  console.log("範囲内の値:", fruits[index]);
}

// 配列の参照とコピーの違い
let a1 = [1, 2, 3];
let a2 = a1;
a2[1] = 50;
console.log("参照の結果:", a1); // 元の配列に影響が出る

let a3 = [...a1];
a3[0] = 99;
console.log("コピー後の配列:", a1, a3);

// 型チェックによる安全なメソッド使用
let sample = [10, 20, 30];
if (Array.isArray(sample)) {
  sample.push(40);
  console.log(sample);
}

// nullチェックをしながらのループ
let data = [1, null, 3, undefined, 5];
for (let i = 0; i < data.length; i++) {
  if (data[i] != null) {
    console.log("安全な値:", data[i]);
  }
}

サンプルを通して、配列操作の基本がどのようにエラー防止につながるかが自然と理解できるようになります。どのエラーも原因を落ち着いて見つめることで必ず対処できますし、繰り返し触れていくうちに自然とふるまいを予測できるようになります。配列はJavaScriptにおける基礎ですが応用の幅が非常に広いので、今回の内容を土台にしながら、今後さらに自由自在に扱えるようになっていくはずです。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

JavaScriptの配列でインデックスエラーが出る原因は何ですか？

JavaScriptの配列は0から始まるインデックスで要素を管理しています。配列の長さより大きなインデックスやマイナスのインデックスでアクセスしようとすると、undefinedが返るかエラーになります。