JavaScriptのバグ対策とデバッグの基本 - 初心者でもできるエラー特定と予防策

1
2
3
4
5
6
7

// 構文エラーの例：閉じ括弧の欠落
function greet(name {  // SyntaxError: Unexpected token '{'
  return "Hello, " + name;
}

// 構文エラーの例：スペルミス
cosole.log("Hello");  // ReferenceError: cosole is not defined

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 論理エラーの例：条件式の誤り
function isAdult(age) {
  // 本来は >= を使うべきところで > を使ってしまった
  if (age > 20) {
    return true;
  }
  return false;
}

console.log(isAdult(20));  // false（本来はtrueであるべき）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const userName = "田中";
const userAge = 25;

// 変数の値を確認
console.log(userName);       // "田中"
console.log(userAge);        // 25

// ラベルを付けて確認（推奨）
console.log("userName:", userName);  // userName: 田中
console.log("userAge:", userAge);    // userAge: 25

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const users = [
  { id: 1, name: "田中", age: 25 },
  { id: 2, name: "佐藤", age: 30 },
  { id: 3, name: "鈴木", age: 22 }
];

// console.logの場合
console.log(users);

// console.tableの場合（表形式で見やすい）
console.table(users);

1
2
3
4
5
6
7
8
9

console.time("ループ処理");

let sum = 0;
for (let i = 0; i < 1000000; i++) {
  sum += i;
}

console.timeEnd("ループ処理");
// ループ処理: 5.123ms のように表示

1
2
3
4
5

const age = 15;

// 条件がfalseの場合のみ出力
console.assert(age >= 18, "未成年です:", age);
// Assertion failed: 未成年です: 15

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

function calculateTotal(items) {
  let total = 0;
  
  for (const item of items) {
    debugger;  // ここで実行が停止
    total += item.price * item.quantity;
  }
  
  return total;
}

const cart = [
  { name: "りんご", price: 100, quantity: 3 },
  { name: "バナナ", price: 80, quantity: 5 }
];

console.log(calculateTotal(cart));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function findUser(users, targetId) {
  debugger;
  for (let i = 0; i < users.length; i++) {
    const user = users[i];
    if (user.id === targetId) {
      return user;
    }
  }
  return null;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// エラー例
const user = { name: "田中" };
console.log(user.email.length);  // TypeError: Cannot read properties of undefined

// 原因特定
console.log("user:", user);           // { name: "田中" }
console.log("user.email:", user.email);  // undefined（emailプロパティが存在しない）

// 解決策：オプショナルチェーンを使用
console.log(user.email?.length);  // undefined（エラーにならない）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// バグの例
const price = "100";
const quantity = 3;
const total = price * quantity;
console.log(total);  // 300（たまたま動く）

const newPrice = price + 50;
console.log(newPrice);  // "10050"（文字列連結になってしまう）

// 原因特定
console.log("price:", price, "型:", typeof price);      // price: 100 型: string
console.log("quantity:", quantity, "型:", typeof quantity);  // quantity: 3 型: number

// 解決策：明示的に型変換
const numericPrice = Number(price);
const correctNewPrice = numericPrice + 50;
console.log(correctNewPrice);  // 150

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// バグの例
const fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits[3]);  // undefined（エラーにはならないが意図しない動作）

// 原因特定
console.log("配列の長さ:", fruits.length);  // 3
console.log("アクセス可能なインデックス: 0 ~", fruits.length - 1);  // 0 ~ 2

// 解決策：範囲チェック
function getFruit(index) {
  if (index < 0 || index >= fruits.length) {
    console.error(`インデックス ${index} は範囲外です`);
    return null;
  }
  return fruits[index];
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// バグの例
let userData = null;

fetch("/api/user")
  .then(response => response.json())
  .then(data => {
    userData = data;
  });

console.log(userData);  // null（fetchが完了する前に実行される）

// 原因特定
console.log("同期処理: fetchの直後");
fetch("/api/user")
  .then(response => response.json())
  .then(data => {
    console.log("非同期処理: データ取得完了", data);
    userData = data;
  });

// 解決策：async/awaitを使用
async function loadUser() {
  const response = await fetch("/api/user");
  const userData = await response.json();
  console.log(userData);  // 正しくデータが表示される
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// バグの例：varのスコープ問題
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);  // 3, 3, 3（すべて3が出力される）
  }, 100);
}

// 原因特定
console.log("ループ終了後のi:", i);  // 3（varはグローバルスコープ）

// 解決策：letを使用
for (let j = 0; j < 3; j++) {
  setTimeout(() => {
    console.log(j);  // 0, 1, 2（期待通りの出力）
  }, 100);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// バグの例
const counter = {
  count: 0,
  increment: function() {
    setTimeout(function() {
      this.count++;  // thisがcounterを指さない
      console.log(this.count);  // NaN
    }, 100);
  }
};

counter.increment();

// 原因特定
const counter2 = {
  count: 0,
  increment: function() {
    console.log("メソッド内のthis:", this);  // counter2オブジェクト
    setTimeout(function() {
      console.log("setTimeout内のthis:", this);  // Window（グローバルオブジェクト）
    }, 100);
  }
};

// 解決策：アロー関数を使用
const counter3 = {
  count: 0,
  increment: function() {
    setTimeout(() => {
      this.count++;  // アロー関数は外側のthisを継承
      console.log(this.count);  // 1
    }, 100);
  }
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

## バグ報告

### 環境
- ブラウザ: Chrome 120.0.6099.130
- OS: Windows 11
- Node.js: v20.10.0（該当する場合）

### 再現手順
1. フォームに「テスト」と入力する
2. 送信ボタンをクリックする
3. エラーメッセージを確認する

### 入力データ
~~~javascript
const input = "テスト";
\`\`\`

### 期待する動作
「送信完了」というメッセージが表示される

### 実際の動作
「TypeError: Cannot read properties of undefined」というエラーが発生

### コンソール出力

1
2
3
4
5
6

"use strict";

// 未宣言の変数への代入がエラーになる
userName = "田中";  // ReferenceError: userName is not defined

// 厳格モードがない場合、暗黙的にグローバル変数が作成されてしまう

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

function divide(a, b) {
  // 型チェック
  if (typeof a !== "number" || typeof b !== "number") {
    throw new TypeError("引数は数値である必要があります");
  }
  
  // ゼロ除算チェック
  if (b === 0) {
    throw new RangeError("ゼロで割ることはできません");
  }
  
  return a / b;
}

// 使用例
try {
  console.log(divide(10, 2));     // 5
  console.log(divide("10", 2));   // TypeError
  console.log(divide(10, 0));     // RangeError
} catch (error) {
  console.error(error.message);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// 悪い例：深いネスト
function processUser(user) {
  if (user) {
    if (user.isActive) {
      if (user.hasPermission) {
        // 実際の処理
        return doSomething(user);
      }
    }
  }
  return null;
}

// 良い例：早期リターン
function processUser(user) {
  if (!user) return null;
  if (!user.isActive) return null;
  if (!user.hasPermission) return null;
  
  return doSomething(user);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// 悪い例：マジックナンバー
if (user.role === 1) {
  // 管理者の処理
}

// 良い例：定数を使用
const ROLE = {
  ADMIN: 1,
  EDITOR: 2,
  VIEWER: 3
};

if (user.role === ROLE.ADMIN) {
  // 管理者の処理（意図が明確）
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "rules": {
    "no-unused-vars": "error",
    "no-undef": "error",
    "eqeqeq": "error",
    "no-console": "warn"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// TypeScriptによる型安全なコード
interface User {
  id: number;
  name: string;
  email?: string;
}

function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}

// コンパイル時に型エラーを検出
greetUser({ id: 1 });  // エラー: 'name'が必要です

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function complexFunction(data) {
  // 処理A
  console.log("処理A完了:", data);  // まずここでチェック
  
  // 処理B
  
  // 処理C
  console.log("処理C完了:", data);  // 次にここでチェック
  
  // 処理D
  
  return result;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 環境に応じたログ出力
const isDevelopment = process.env.NODE_ENV === "development";

function debugLog(...args) {
  if (isDevelopment) {
    console.log("[DEBUG]", ...args);
  }
}

// 使用例
debugLog("ユーザーデータ:", userData);  // 開発環境でのみ出力