【JavaScript】「is not a function」エラーの原因と解決方法｜全パターン完全解説

この記事で学べること

• 「TypeError: X is not a function」エラーの根本原因と読み方
• 変数名・関数名の衝突によるエラーと解決方法
• オブジェクトのメソッド呼び出しミスの全パターン
• 配列メソッド（map, filter, forEach等）の誤用と修正方法
• コールバック関数・DOM操作・非同期処理でのエラー対策
• 外部ライブラリ・モジュールの読み込み問題の解決
• クラス・コンストラクタでのエラーパターン
• 実務で使えるデバッグテクニックと予防策

Chrome / Edge:
Uncaught TypeError: xxx is not a function

Firefox:
TypeError: xxx is not a function

Safari:
TypeError: xxx is not a function. (In "xxx()", "xxx" is undefined)

// undefined を関数として呼び出す
let myFunc = undefined;
myFunc();  // TypeError: myFunc is not a function

// 数値を関数として呼び出す
let num = 42;
num();  // TypeError: num is not a function

// 文字列を関数として呼び出す
let str = "hello";
str();  // TypeError: str is not a function

// null を関数として呼び出す
let obj = null;
obj();  // TypeError: obj is not a function

Uncaught TypeError: myFunction is not a function
    at doSomething (script.js:15:3)
    at main (script.js:25:5)
    at script.js:30:1

// 読み方：
// 1行目: エラーの種類とメッセージ
//   → myFunction が関数ではないのに呼び出された
// 2行目以降: スタックトレース（コールスタック）
//   → script.js の15行目、doSomething 関数内で発生

ポイント：エラーメッセージの「is not a function」の直前にある名前が問題の変数やプロパティです。その変数が「なぜ関数でないか」を調べることが解決の第一歩です。

function greet() { return "Hello"; }
const num = 42;
const str = "hello";
const obj = {};

console.log(typeof greet);  // "function" ← 呼び出しOK
console.log(typeof num);    // "number"   ← 呼び出しNG
console.log(typeof str);    // "string"   ← 呼び出しNG
console.log(typeof obj);    // "object"   ← 呼び出しNG

Uncaught TypeError: getData is not a function

// 関数を定義
function getData() {
  return { name: "Alice", age: 25 };
}

// 同じ名前の変数で上書きしてしまう
var getData = "user data";

// 関数を呼び出そうとするとエラー
getData();  // TypeError: getData is not a function
// getData は文字列 "user data" になっている

// 関数を定義
function getData() {
  return { name: "Alice", age: 25 };
}

// 異なる名前を使う
const userData = "user data";

// 正常に呼び出せる
const result = getData();
console.log(result);  // {{ name: "Alice", age: 25 }}

Uncaught TypeError: getConfig is not a function

function getConfig() {
  return { debug: true, version: "1.0" };
}

// 戻り値を同名の変数に代入（関数が上書きされる）
var getConfig = getConfig();

// 2回目の呼び出しでエラー
getConfig();  // TypeError: getConfig is not a function
// getConfig はオブジェクト {{ debug: true, version: "1.0" }} になっている

function getConfig() {
  return { debug: true, version: "1.0" };
}

// 別の名前で受け取る
const config = getConfig();
const config2 = getConfig();
console.log(config);  // {{ debug: true, version: "1.0" }}

Uncaught TypeError: alert is not a function

// グローバル関数 alert を変数で上書き
var alert = "警告メッセージ";

// 元の alert() が使えなくなる
alert("Hello");  // TypeError: alert is not a function

// グローバル関数と衝突しない名前を使う
const alertMessage = "警告メッセージ";

// alert() は正常に使える
alert("Hello");  // 正常動作

// もしくは window.alert で明示的に呼び出す
window.alert("Hello");  // 確実に動作

注意：グローバル変数として使われやすい名前（alert, confirm, prompt, open, close, name, status など）は、変数名として使わないようにしましょう。

Uncaught TypeError: greet is not a function

// 宣言前に呼び出そうとする
greet();  // TypeError: greet is not a function

// var で関数式を定義
var greet = function() {
  console.log("Hello!");
};

// var greet は巻き上げされるが、値は undefined
// つまり実行時には greet = undefined の状態で greet() が呼ばれる

// 関数宣言は巻き上げされるので、宣言前に呼べる
greet();  // "Hello!" ← 正常動作

function greet() {
  console.log("Hello!");
}

// 先に定義してから呼び出す
const greet = function() {
  console.log("Hello!");
};

greet();  // "Hello!" ← 正常動作

Uncaught TypeError: (intermediate value)(…) is not a function

// セミコロンなしの変数宣言
const obj = { name: "Alice" }

// すぐ後にIIFEを書くと、obj{{...}}(...) と解釈される
(function() {
  console.log("IIFE実行");
})();
// TypeError: (intermediate value)(...) is not a function

// 方法1: セミコロンを付ける
const obj = { name: "Alice" };

(function() {
  console.log("IIFE実行");
})();

// 方法2: IIFE の前にセミコロンを置く（防御的セミコロン）
const obj2 = { name: "Bob" }

;(function() {
  console.log("IIFE実行");
})();

ポイント：IIFE（即時実行関数）の前に防御的セミコロン ; を置くパターンは、jQueryプラグインなどでよく見られます。複数のファイルを結合する際のエラーを防ぐテクニックです。

Uncaught TypeError: arr.foerach is not a function

const arr = [1, 2, 3];

// forEach のスペルミス
arr.foerach(function(item) {
  console.log(item);
});
// TypeError: arr.foerach is not a function

// よくあるタイポ:
// arr.foerach()  → arr.forEach()
// str.touppercase() → str.toUpperCase()
// arr.inclues() → arr.includes()
// obj.hasOwnPropery() → obj.hasOwnProperty()

const arr = [1, 2, 3];

// 正しいスペル: forEach
arr.forEach(function(item) {
  console.log(item);
});
// 1, 2, 3

Uncaught TypeError: user.name is not a function

const user = {
  name: "Alice",
  age: 25
};

// name はプロパティ（文字列）なのに関数として呼び出している
console.log(user.name());  // TypeError: user.name is not a function

const user = {
  name: "Alice",
  age: 25
};

// プロパティアクセスには () を付けない
console.log(user.name);  // "Alice"

// メソッドとして定義したい場合
const user2 = {
  _name: "Alice",
  name() { return this._name; }
};
console.log(user2.name());  // "Alice"

Uncaught TypeError: Array.push is not a function

// Array（コンストラクタ）にインスタンスメソッドを呼ぼうとする
Array.push(1);  // TypeError: Array.push is not a function

// push は Array.prototype のメソッド（インスタンスメソッド）
// Array 自体（コンストラクタ関数）には push メソッドは存在しない

// 配列インスタンスに対して push を呼ぶ
const arr = [];
arr.push(1);
console.log(arr);  // [1]

// 静的メソッドの例（Array に直接呼べるもの）
Array.isArray([]);      // true
Array.from("abc");  // ["a", "b", "c"]

Uncaught TypeError: this.getName is not a function

const user = {
  name: "Alice",
  getName() { return this.name; },
  greet() {
    // setTimeout のコールバック内で this が変わる
    setTimeout(function() {
      console.log(this.getName());
      // TypeError: this.getName is not a function
      // this は window（またはundefined）を指している
    }, 1000);
  }
};
user.greet();

const user = {
  name: "Alice",
  getName() { return this.name; },
  greet() {
    // アロー関数は外側の this を引き継ぐ
    setTimeout(() => {
      console.log(this.getName());
      // "Alice" ← 正常動作
    }, 1000);
  }
};
user.greet();

const user = {
  name: "Alice",
  getName() { return this.name; },
  greet() {
    setTimeout(function() {
      console.log(this.getName());
    }.bind(this), 1000);
  }
};
user.greet();  // "Alice"

Uncaught TypeError: Cannot read properties of undefined (reading "length")

const calculator = {
  values: [1, 2, 3],
  sum() {
    return this.values.reduce((a, b) => a + b, 0);
  }
};

// メソッドを変数に取り出す
const sumFn = calculator.sum;
sumFn();  // TypeError: Cannot read properties of undefined
// this.values が undefined になる

// 方法1: bind でコンテキストを固定
const sumFn = calculator.sum.bind(calculator);
sumFn();  // 6

// 方法2: オブジェクト経由で呼び出す
calculator.sum();  // 6

Uncaught TypeError: data.map is not a function

// オブジェクトに map を使おうとする
const data = { a: 1, b: 2, c: 3 };
data.map(item => item * 2);
// TypeError: data.map is not a function

// 文字列に forEach を使おうとする
const str = "hello";
str.forEach(char => console.log(char));
// TypeError: str.forEach is not a function

// オブジェクトの場合: Object.keys / Object.values / Object.entries を使う
const data = { a: 1, b: 2, c: 3 };

// 値の配列に変換してから map
Object.values(data).map(item => item * 2);
// [2, 4, 6]

// キーと値のペアで処理
Object.entries(data).forEach(([key, val]) => {
  console.log(key, val);
});

// 文字列の場合: split で配列にするか、for...of を使う
const str = "hello";
str.split("").forEach(char => console.log(char));
// h, e, l, l, o

// for...of でも可
for (const char of str) {
  console.log(char);
}

Uncaught TypeError: elements.map is not a function

const elements = document.querySelectorAll(".item");

// NodeList には map メソッドがない
elements.map(el => el.textContent);
// TypeError: elements.map is not a function

const elements = document.querySelectorAll(".item");

// 方法1: Array.from() で配列に変換
Array.from(elements).map(el => el.textContent);

// 方法2: スプレッド構文で配列に変換
[...elements].map(el => el.textContent);

// 方法3: forEach は NodeList でも使える
elements.forEach(el => {
  console.log(el.textContent);
});

Uncaught TypeError: arguments.map is not a function

function sumAll() {
  // arguments は配列風オブジェクト（Array-like）
  return arguments.reduce((a, b) => a + b, 0);
  // TypeError: arguments.reduce is not a function
}
sumAll(1, 2, 3);

// 方法1: Array.from() で変換
function sumAll() {
  return Array.from(arguments).reduce((a, b) => a + b, 0);
}

// 方法2: スプレッド構文で変換
function sumAll2() {
  return [...arguments].reduce((a, b) => a + b, 0);
}

// 方法3: 最初からレストパラメータを使う（推奨）
function sumAll3(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

console.log(sumAll3(1, 2, 3));  // 6

ポイント：ES6以降では arguments の代わりにレストパラメータ（…args）を使うのが推奨です。レストパラメータは本物の配列なので、配列メソッドがそのまま使えます。

Uncaught TypeError: response.data.map is not a function

// API レスポンスがオブジェクトで返ってきた場合
const response = {
  data: {
    users: ["Alice", "Bob"],
    total: 2
  }
};

// data はオブジェクトなので map は使えない
response.data.map(item => item);
// TypeError: response.data.map is not a function

// 正しいプロパティ（配列）にアクセスする
response.data.users.map(item => item);
// ["Alice", "Bob"]

// 安全にアクセスする（型チェック付き）
const items = Array.isArray(response.data)
  ? response.data
  : response.data.users || [];
items.map(item => item);

Uncaught TypeError: callback is not a function

function fetchData(url, callback) {
  // データ取得後にコールバックを呼び出す
  const data = { result: "success" };
  callback(data);  // TypeError: callback is not a function
}

// コールバックを渡し忘れた
fetchData("/api/users");

function fetchData(url, callback) {
  const data = { result: "success" };

  // 方法1: コールバックが関数かチェックしてから呼ぶ
  if (typeof callback === "function") {
    callback(data);
  }
}

// 方法2: デフォルト引数を使う
function fetchData2(url, callback = () => {}) {
  const data = { result: "success" };
  callback(data);
}

// コールバックなしでも呼べる
fetchData2("/api/users");

// コールバック付きでも呼べる
fetchData2("/api/users", (data) => {
  console.log(data);
});

Uncaught TypeError: callback is not a function

function handleClick() {
  console.log("クリックされました");
}

// handleClick() ← 実行結果(undefined)を渡している
document.addEventListener("click", handleClick());
// addEventListener の第2引数が undefined になる

// 同様のミス:
setTimeout(handleClick(), 1000);
// TypeError: callback is not a function

function handleClick() {
  console.log("クリックされました");
}

// handleClick ← () を付けず関数への参照を渡す
document.addEventListener("click", handleClick);

// setTimeout も同様
setTimeout(handleClick, 1000);

// 引数を渡したい場合はアロー関数でラップ
setTimeout(() => handleClick("引数"), 1000);

ポイント：func は関数オブジェクトへの参照（渡す）、func() は関数を実行した戻り値（実行する）です。コールバックには () を付けない func を渡します。

Uncaught TypeError: Failed to execute "addEventListener": parameter 2 is not of type "Object"

const btn = document.getElementById("myBtn");

// パターン1: 関数の実行結果を渡している
btn.addEventListener("click", handleClick());

// パターン2: 文字列を渡している
btn.addEventListener("click", "handleClick");

// パターン3: null を渡している
let handler = null;
btn.addEventListener("click", handler);

const btn = document.getElementById("myBtn");

// 関数への参照を渡す
btn.addEventListener("click", handleClick);

// アロー関数でインラインに書く
btn.addEventListener("click", (event) => {
  console.log("クリック！", event.target);
});

Uncaught TypeError: undefined is not a function

const numbers = [1, 2, 3];

// 変数が定義されていない関数を参照
let transformer;
numbers.map(transformer);
// TypeError: undefined is not a function

const numbers = [1, 2, 3];

// 関数を正しく定義してから渡す
const transformer = (n) => n * 2;
numbers.map(transformer);
// [2, 4, 6]

// または直接アロー関数を渡す
numbers.map(n => n * 2);

Uncaught TypeError: Cannot read properties of null (reading "addEventListener")

// 存在しないIDを指定
const btn = document.getElementById("submitBtn");
// btn は null（要素が見つからなかった）

btn.addEventListener("click", () => {
  console.log("クリック");
});
// TypeError: Cannot read properties of null

// 方法1: null チェックを行う
const btn = document.getElementById("submitBtn");
if (btn) {
  btn.addEventListener("click", () => {
    console.log("クリック");
  });
}

// 方法2: Optional chaining（?.）を使う
document.getElementById("submitBtn")?.addEventListener("click", () => {
  console.log("クリック");
});

Uncaught TypeError: Cannot read properties of null (reading "textContent")

<head>
  <script src="app.js"></script>
  <!-- body の要素がまだ読み込まれていない状態で app.js が実行される -->
</head>
<body>
  <h1 id="title">Hello</h1>
</body>

// この時点では #title はまだ存在しない
const title = document.getElementById("title");
console.log(title.textContent);
// TypeError: Cannot read properties of null

document.addEventListener("DOMContentLoaded", () => {
  const title = document.getElementById("title");
  console.log(title.textContent);  // "Hello"
});

<body>
  <h1 id="title">Hello</h1>
  <!-- body の末尾に script を置く -->
  <script src="app.js"></script>
</body>

<head>
  <!-- defer: HTMLの解析完了後に実行 -->
  <script src="app.js" defer></script>
</head>

Uncaught TypeError: items.forEach is not a function

// getElementsByClassName は HTMLCollection を返す
const items = document.getElementsByClassName("item");

// HTMLCollection には forEach がない
items.forEach(item => {
  console.log(item.textContent);
});
// TypeError: items.forEach is not a function

// 方法1: Array.from() で変換
const items = document.getElementsByClassName("item");
Array.from(items).forEach(item => {
  console.log(item.textContent);
});

// 方法2: スプレッド構文
[...items].forEach(item => {
  console.log(item.textContent);
});

// 方法3: querySelectorAll を使う（NodeList は forEach を持つ）
const items2 = document.querySelectorAll(".item");
items2.forEach(item => {
  console.log(item.textContent);
});

Uncaught TypeError: "Success" is not a function

const promise = new Promise((resolve) => {
  resolve("data");
});

// then に文字列を渡している
promise.then("Success");
// 文字列は関数ではないのでエラー

const promise = new Promise((resolve) => {
  resolve("data");
});

// 関数を渡す
promise.then((data) => {
  console.log("Success:", data);
});

Uncaught TypeError: fetchUsers is not a function

// async 関数を変数に代入し、別の値で上書き
let fetchUsers = async () => {
  const res = await fetch("/api/users");
  return res.json();
};

// 実行結果で上書きしてしまう
fetchUsers = await fetchUsers();

// 2回目の呼び出しでエラー
const users = await fetchUsers();
// TypeError: fetchUsers is not a function

// const で関数を保護する
const fetchUsers = async () => {
  const res = await fetch("/api/users");
  return res.json();
};

// 結果は別の変数に格納
const users = await fetchUsers();
console.log(users);

Uncaught TypeError: data.json is not a function

const response = await fetch("/api/data");
const data = await response.json();

// data はすでに JSON オブジェクト（.json() 済み）
const parsed = data.json();
// TypeError: data.json is not a function
// .json() は Response オブジェクトのメソッド
// data は通常のオブジェクトなので .json() はない

// .json() は Response オブジェクトに1回だけ使う
const response = await fetch("/api/data");
const data = await response.json();

// data はそのまま使える（もう JavaScript オブジェクト）
console.log(data);

// もし文字列に変換したい場合は JSON.stringify を使う
const jsonStr = JSON.stringify(data);
console.log(jsonStr);

Uncaught TypeError: callback is not a function（内部エラー）

// 関数の実行結果を渡している
setTimeout(doSomething(), 1000);
// doSomething() の戻り値（undefined）が渡される

// 文字列を渡している（非推奨で動作するがセキュリティリスク）
setTimeout("doSomething()", 1000);

// 関数への参照を渡す（() を付けない）
setTimeout(doSomething, 1000);

// 引数を渡したい場合
setTimeout(() => doSomething("arg1", "arg2"), 1000);

// または第3引数以降で渡す
setTimeout(doSomething, 1000, "arg1", "arg2");

Uncaught TypeError: $ is not a function

<!-- 先にアプリのスクリプトを読み込んでいる -->
<script src="app.js"></script>
<!-- jQuery が後に読み込まれる → app.js 実行時に $ は未定義 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 先にライブラリを読み込む -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 次にアプリのスクリプト -->
<script src="app.js"></script>

<script src="https://cdn.example.com/lib.js"></script>
<script>
// CDN が失敗した場合のフォールバック
if (typeof MyLib === "undefined") {
  console.warn("CDN失敗。ローカルから読み込みます");
  const script = document.createElement("script");
  script.src = "/js/lib.js";
  document.head.appendChild(script);
}
</script>

Uncaught TypeError: (0, myModule.default) is not a function

// utils.js - named export で定義
export function formatDate(date) {
  return date.toISOString();
}

// app.js - default import しようとする（間違い）
import formatDate from "./utils.js";
formatDate(new Date());
// TypeError: formatDate is not a function
// default export がないため、formatDate は undefined

// named export には中括弧 {{}} を使う
import { formatDate } from "./utils.js";
formatDate(new Date());  // 正常動作

// または default export で定義する場合
// utils.js
export default function formatDate(date) {
  return date.toISOString();
}

// app.js - default import
import formatDate from "./utils.js";
formatDate(new Date());  // 正常動作

Uncaught TypeError: $ is not a function

// パターン1: jQuery が読み込まれていない
// → jQuery のスクリプトタグを確認する

// パターン2: WordPress の noConflict モード
// WordPress では jQuery が noConflict() で読み込まれる
// $ の代わりに jQuery を使う
jQuery(document).ready(function($) {
  // この中では $ が使える
  $(".menu").toggle();
});

// または即時関数で $ を受け取る
(function($) {
  $(".menu").toggle();
})(jQuery);

// Lodash 3.x → 4.x で名前が変わったメソッド
// _.contains() → _.includes()
_.contains([1,2,3], 2);
// TypeError: _.contains is not a function（Lodash 4.x）

// 修正: 新しいメソッド名を使う
_.includes([1,2,3], 2);  // true

ポイント：ライブラリをアップデートした後にエラーが出た場合は、マイグレーションガイドやリリースノートを確認して、APIの変更点をチェックしましょう。

Uncaught TypeError: Class constructor User cannot be invoked without "new"

class User {
  constructor(name) {
    this.name = name;
  }
}

// new を忘れている
const user = User("Alice");
// TypeError: Class constructor User cannot be invoked without "new"

class User {
  constructor(name) {
    this.name = name;
  }
}

// new を付けてインスタンス化する
const user = new User("Alice");
console.log(user.name);  // "Alice"

Uncaught TypeError: user.create is not a function

class User {
  constructor(name) {
    this.name = name;
  }

  // static メソッド（クラスに属する）
  static create(name) {
    return new User(name);
  }

  // インスタンスメソッド（インスタンスに属する）
  greet() {
    return "Hello, " + this.name;
  }
}

const user = new User("Alice");

// static メソッドをインスタンスから呼ぶ → エラー
user.create("Bob");
// TypeError: user.create is not a function

// インスタンスメソッドをクラスから呼ぶ → エラー
User.greet();
// TypeError: User.greet is not a function

// static メソッドはクラスから呼ぶ
const bob = User.create("Bob");
console.log(bob.name);  // "Bob"

// インスタンスメソッドはインスタンスから呼ぶ
const user = new User("Alice");
console.log(user.greet());  // "Hello, Alice"

Uncaught ReferenceError: Must call super constructor in derived class before accessing "this"

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    // super() を呼ぶ前に this を使っている
    this.breed = breed;  // ReferenceError!
    super(name);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    // 必ず最初に super() を呼ぶ
    super(name);
    this.breed = breed;
  }
}

const dog = new Dog("Pochi", "Shiba");
console.log(dog.name);   // "Pochi"
console.log(dog.breed);  // "Shiba"

Uncaught TypeError: Cannot read private member #validate from an object whose class did not declare it

class FormValidator {
  // プライベートメソッド
  #validate(input) {
    return input.length > 0;
  }

  check(input) {
    return this.#validate(input);
  }
}

const validator = new FormValidator();
validator.check("test");     // true ← OK
validator.#validate("test");  // SyntaxError!

// プライベートメソッドには公開メソッド経由でアクセスする
const validator = new FormValidator();
console.log(validator.check("test"));  // true

// プライベートメソッドを外部に公開したい場合は、
// # を外して通常のメソッドにする
class FormValidator2 {
  validate(input) {
    return input.length > 0;
  }
}

// エラーが発生する関数呼び出しの前に型をチェック
function executeCallback(cb) {
  console.log("typeof cb:", typeof cb);
  console.log("cb の値:", cb);

  if (typeof cb !== "function") {
    console.error("cb は関数ではありません:", cb);
    return;
  }
  cb();
}

const obj = getApiResponse();
console.log("1. obj:", obj);
console.log("2. obj.data:", obj.data);
console.log("3. typeof obj.data:", typeof obj.data);
console.log("4. Array.isArray:", Array.isArray(obj.data));

// ここでエラーが出る場合、上の出力を見て原因を特定
obj.data.map(item => item);

function safeCall(fn, ...args) {
  try {
    if (typeof fn !== "function") {
      throw new TypeError(`${fn.name || fn} is not a function`);
    }
    return fn(...args);
  } catch (error) {
    console.error("関数呼び出しエラー:", error.message);
    return null;
  }
}

// 使い方
safeCall(myCallback, "arg1", "arg2");

// 従来の書き方（冗長）
if (obj && obj.method && typeof obj.method === "function") {
  obj.method();
}

// Optional chaining を使う（簡潔）
obj?.method?.();  // obj や method が null/undefined なら undefined を返す

// DOM 操作での活用
document.querySelector("#btn")?.addEventListener("click", handler);

// コールバックの安全な呼び出し
function fetchData(url, onSuccess, onError) {
  fetch(url)
    .then(res => res.json())
    .then(data => onSuccess?.(data))
    .catch(err => onError?.(err));
}

// コード中に debugger 文を挿入すると
// DevTools が開いている場合、その行で実行が一時停止する
function processData(callback) {
  debugger;  // ここで一時停止
  // DevTools で callback の値を確認できる
  callback(data);
}

Uncaught TypeError: Cannot read properties of null (reading "addEventListener")

// 問題: 要素が見つからない
document.getElementById("nonExistent").addEventListener("click", fn);

// 解決: null チェック + Optional chaining
const el = document.getElementById("myElement");
if (el) {
  el.addEventListener("click", fn);
}
// または
document.getElementById("myElement")?.addEventListener("click", fn);

Uncaught TypeError: data.getFullYear is not a function

// 問題: JSON.parse した日付文字列を Date として扱おうとする
const json = '{{"created":"2024-01-15"}}';
const data = JSON.parse(json);
data.created.getFullYear();
// TypeError: data.created.getFullYear is not a function
// data.created は文字列であり、Date オブジェクトではない

// 解決: Date オブジェクトに変換する
const date = new Date(data.created);
console.log(date.getFullYear());  // 2024

Uncaught TypeError: config.map is not a function

// 問題: オブジェクトに map を使おうとする
const config = { host: "localhost", port: 3000 };
config.map((key, val) => ...);

// 解決: Object.entries() を使う
Object.entries(config).map(([key, val]) => {
  console.log(`${key}: ${val}`);
});

Uncaught TypeError: str.touppercase is not a function

const str = "hello";

// 問題: キャメルケースの大文字小文字ミス
str.touppercase();   // TypeError
str.toUppercase();   // TypeError

// 解決: 正しいキャメルケース
str.toUpperCase();   // "HELLO"
str.toLowerCase();   // "hello"
str.replaceAll("l", "r");  // "herro"

2番目のonloadハンドラが1番目を上書きする

// 問題: 2番目の代入が1番目を上書きする
window.onload = function() {
  console.log("1番目の処理");
};

window.onload = function() {
  console.log("2番目の処理");
  // 1番目の処理は実行されない！
};

// 解決: addEventListener を使う
window.addEventListener("load", () => {
  console.log("1番目の処理");
});
window.addEventListener("load", () => {
  console.log("2番目の処理");
  // 両方とも実行される
});

Uncaught TypeError: Cannot read properties of undefined

// 問題: forEach は undefined を返す
const result = [1,2,3].forEach(n => n * 2);
console.log(result);  // undefined
result.join(", ");  // TypeError!

// 解決: 変換したい場合は map を使う
const result2 = [1,2,3].map(n => n * 2);
console.log(result2.join(", "));  // "2, 4, 6"

Uncaught TypeError: response.map is not a function

// 問題: await を付け忘れている
async function getUsers() {
  const response = fetch("/api/users");  // await がない！
  // response は Promise オブジェクト（Response ではない）
  const data = response.json();
  // TypeError: response.json is not a function
}

// 解決: await を付ける
async function getUsers() {
  const response = await fetch("/api/users");
  const data = await response.json();
  return data;
}

Uncaught TypeError: greet is not a function

// 問題: 分割代入で意図しない値を取得
const module = {
  greet() { return "Hello"; },
  version: "1.0"
};

// default という名前で分割代入しようとする
const { default: greet } = module;
// module.default は undefined → greet も undefined
greet();  // TypeError: greet is not a function

// 解決: 正しいプロパティ名で分割代入
const { greet } = module;
greet();  // "Hello"

Uncaught TypeError: Cannot read properties of undefined

// 問題: 空配列に reduce を使い、初期値がない
const items = [];
items.reduce((sum, item) => sum + item.price);
// TypeError: Reduce of empty array with no initial value

// 解決: 初期値を必ず渡す
const total = items.reduce((sum, item) => sum + item.price, 0);
console.log(total);  // 0

Uncaught TypeError: Cannot read properties of null

// 問題: チェーンの途中で null が返る
document
  .querySelector(".container")
  .querySelector(".title")
  .textContent;
// .container が存在しない → null.querySelector() でエラー

// 解決: Optional chaining でチェーンを安全にする
const title = document
  .querySelector(".container")
  ?.querySelector(".title")
  ?.textContent;

console.log(title ?? "要素が見つかりません");

解決の手順

1. エラーメッセージを読む：「is not a function」の前の名前を確認
2. typeof で型を確認：その変数の型は何か？（console.log(typeof xxx)）
3. undefined の場合：変数が正しく定義・代入されているか確認
4. 別の型の場合：変数名の衝突がないか、メソッド名のタイポがないか確認
5. スタックトレースを確認：エラーが発生したファイルと行番号を確認
6. 実行タイミングを確認：DOM要素にアクセスする場合、DOMContentLoaded後か確認
7. 外部ライブラリを確認：読み込み順序、CDNの可用性、バージョンを確認

エラーを予防する7つの習慣

1. const を使う：変数の再代入を防ぎ、関数が意図せず上書きされるのを防止
2. 明確な命名規則：関数は動詞で始める（getData）、変数は名詞（userData）
3. typeof チェック：コールバックを受け取る関数では typeof callback === "function" でチェック
4. Optional chaining（?.）：null/undefined の可能性がある値には ?. を使う
5. ESLint を使う：未使用変数やタイポを静的解析で検出
6. TypeScript の導入：型チェックにより、関数でない値の呼び出しをコンパイル時に検出
7. テストを書く：関数の入出力をテストして、想定外の値が渡されるケースを検証