5-5. よくあるエラーと解決方法

// ❌ エラーの例
const element = document.getElementById('myElement');
element.innerHTML = 'Hello';  // elementがnullの場合エラー

// ✅ 解決方法
const element = document.getElementById('myElement');
if (element) {
    element.innerHTML = 'Hello';
} else {
    console.error('要素が見つかりません');
}

// ❌ エラーの例
console.log(myVariable);  // 変数が定義されていない

// ✅ 解決方法
let myVariable = 'Hello';
console.log(myVariable);

// ❌ エラーの例
const data = {
    name: 'Test',
    value: 100,  // 最後のカンマに注意（古いブラウザでエラー）
}

// ✅ 解決方法
const data = {
    name: 'Test',
    value: 100
};

// ❌ エラーの例
fetch('https://other-domain.com/api/data')
    .then(response => response.json())
    // CORSエラーが発生

// ✅ 解決方法（PHP側で対応）
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type');
?>

// ❌ エラーの例
<?php
if ($condition) {
    echo "Hello"
}  // セミコロンがない
?>

// ✅ 解決方法
<?php
if ($condition) {
    echo "Hello";
}
?>

// ❌ エラーの例
<?php
$result = myFunction();  // 関数が定義されていない
?>

// ✅ 解決方法
<?php
function myFunction() {
    return "Hello";
}
$result = myFunction();
?>

// ❌ エラーの例
<?php
echo "Hello";
header('Location: page.php');  // 出力後にheader()を実行
?>

// ✅ 解決方法
<?php
header('Location: page.php');
exit;
?>

// ❌ エラーの例
<?php
$name = $_POST['name'];  // キーが存在しない場合エラー
?>

// ✅ 解決方法
<?php
$name = $_POST['name'] ?? '';  // Null合体演算子
// または
$name = isset($_POST['name']) ? $_POST['name'] : '';
?>

// ❌ エラーの例
$pdo = new PDO('mysql:host=localhost;dbname=test', 'wrong_user', 'wrong_pass');

// ✅ 解決方法
$pdo = new PDO('mysql:host=localhost;dbname=test', 'correct_user', 'correct_pass');

// ❌ エラーの例
SELECT namee FROM users  -- カラム名のスペルミス

// ✅ 解決方法
SELECT name FROM users

// 1. console.log()で変数の内容を確認
console.log('変数の値:', myVariable);

// 2. console.table()で配列やオブジェクトを見やすく表示
console.table(users);

// 3. debuggerステートメントで実行を一時停止
function myFunction() {
    debugger;  // ここで実行が止まる
    // 処理...
}

// 4. try-catchでエラーをキャッチ
try {
    // エラーが起きそうな処理
    riskyOperation();
} catch (error) {
    console.error('エラー詳細:', error.message);
    console.error('スタックトレース:', error.stack);
}

<?php
// 1. var_dump()で変数の詳細を表示
var_dump($variable);

// 2. print_r()で配列を見やすく表示
print_r($array);

// 3. error_log()でログファイルに出力
error_log("デバッグ情報: " . print_r($data, true));

// 4. try-catchでエラーをキャッチ
try {
    $pdo->query($sql);
} catch (PDOException $e) {
    error_log("データベースエラー: " . $e->getMessage());
}

// 5. エラー表示設定（開発環境のみ）
ini_set('display_errors', 1);
error_reporting(E_ALL);
?>