JavaScriptで配列操作をしていると遭遇する「Array.prototype.push() - TypeError: Cannot read property 'push' of undefined」。このエラーの原因と解決方法について、実践的なコード例を交えながら解説します。

エラーの原因

このエラーは主に以下の2つの状況で発生します：

1. 配列が未定義（undefined）の状態でpush()メソッドを使用

2. 配列ではないオブジェクトに対してpush()メソッドを使用

具体的な解決方法

1. 配列の初期化を確実に行う

// ❌ エラーが発生するコード
let myArray;
myArray.push("新しい要素"); // TypeError: Cannot read property 'push' of undefined

// ✅ 正しいコード
let myArray = [];
myArray.push("新しい要素"); // 正常に動作

2. 配列の存在確認を行う

// ✅ 条件分岐で安全に処理
let myArray;
if (myArray) {
    myArray.push("新しい要素");
} else {
    myArray = ["新しい要素"];
}

3. オプショナルチェーンを使用する（モダンな方法）

// ✅ オプショナルチェーンを使用
let myArray;
myArray?.push("新しい要素");

ベストプラクティス

1. 配列は必ず初期化してから使用する

const myArray = [];

2. 配列かどうかの型チェックを行う

if (Array.isArray(myArray)) {
    myArray.push("新しい要素");
}

3. デフォルト値を設定する

let myArray = myArray || [];
myArray.push("新しい要素");

実践的な使用例

// データ処理の例
function addUserToList(user) {
    // リストの初期化を確実に行う
    const userList = [];
    
    // データの追加
    try {
        userList.push(user);
        console.log("ユーザーが追加されました");
    } catch (error) {
        console.error("ユーザーの追加に失敗しました:", error);
    }
    
    return userList;
}

push()メソッドの基本的な使い方

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

// 1つの要素を追加
fruits.push("オレンジ");
console.log(fruits); // ["りんご", "バナナ", "オレンジ"]

// 複数の要素を追加
fruits.push("ぶどう", "メロン");
console.log(fruits); // ["りんご", "バナナ", "オレンジ", "ぶどう", "メロン"]

まとめ

  • 配列は必ず初期化してから使用する
  • 必要に応じて配列の存在確認を行う
  • エラーハンドリングを適切に実装する
  • モダンなJavaScriptではオプショナルチェーンも活用できる

これらの対策を実装することで、push()メソッドに関連するエラーを効果的に防ぐことができます。特に大規模なアプリケーションを開発する際は、これらのベストプラクティスを意識することが重要です。