JavaScript Cannot read properties of null の原因と解決法

nullが入った変数のプロパティを読もうとすると発生します。getElementByIdで要素が取れていない（=null）ケースが最も多い原因です。

このエラーメッセージ

原因

• getElementByIdに渡したidがタイプミスで存在しない
• 要素が生成される前（HTMLの読み込み前）にスクリプトが実行されている
• querySelectorのセレクタが間違っている

❌ エラーになるコード

document.body.innerHTML = '<h1 id="title">Hello</h1>';
const el = document.getElementById("titel"); // idのタイポ
console.log(el.textContent);

✅ 修正したコード

document.body.innerHTML = '<h1 id="title">Hello</h1>';
const el = document.getElementById("title");
if (el) {
  console.log(el.textContent);
} else {
  console.log("要素が見つかりません");
}

解決のポイント

getElementByIdは要素が見つからないとnullを返すため、idのつづりをまず確認します。HTMLより前に実行される場合はDOMContentLoadedイベントの中で実行するか、scriptタグをbodyの最後に置きます。el?.textContent（オプショナルチェーン）を使えばnullでもエラーにならず undefined になります。

よくある質問