getElementByIdで要素を取得したはずなのに、nullが返ってきて操作できないのはなぜですか？

HTML要素が読み込まれる前にJavaScriptが実行されている可能性があります。scriptタグをbody閉じタグの直前に配置するか、scriptタグにdefer属性を付与して読み込み順序を修正してください。

「Uncaught TypeError: Cannot read property '...' of null」というエラーの効率的な解決方法は？

まずはエラーが発生した行の「.」の左側にある変数をconsole.logで確認し、どの時点でnullになっているか特定しましょう。多くの場合、HTMLのID・クラス名のスペルミスや、取得タイミングのズレが原因です。

要素が存在しない場合でも、JavaScriptがエラーで止まらないようにする方法はありますか？

if文を使って「if (element !== null)」のように存在確認を行うか、オプショナルチェイニング（element?.textContent）を活用しましょう。これにより、要素が見つからない場合でも後続の処理を安全に継続できます。

TypeError: null参照エラー｜コードで実践

このレッスンで分かること

この記事では「TypeError: null参照エラー」をデバッグ基礎の現場で使える形で整理します

DOM操作での null エラー をおさえれば、現場で迷ったときに立ち戻れる

よくある原因 をおさえれば、現場で迷ったときに立ち戻れる

エラーメッセージの読み方 をおさえれば、現場で迷ったときに立ち戻れる

取得失敗の原因切り分け をおさえれば、現場で迷ったときに立ち戻れる

TypeError とは

DOM操作でよく発生する null 参照エラーを修正します。本レッスンでは、TypeError の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

DOM操作での null エラー

document.getElementById() などで要素が見つからない場合、null が返されます。その null に対して プロパティアクセス するとエラーになります。

null — 「値が存在しない」ことを表す値。null.textContent のような操作は そもそも対象がない ので必ず TypeError になります。

よくある原因

IDの間違い: 存在しないIDを指定
タイミング: DOM が読み込まれる前に スクリプト が実行された
要素の削除: 動的に削除された要素を参照

エラーメッセージの読み方

プレーンテキスト

TypeError: Cannot set properties of null (setting 'textContent')

「null のプロパティを設定できない」= getElementById などが null を返している

よくある勘違いは 「IDのタイポ」だけ疑うこと。HTML を読み込む前に script が走るパターンも頻出なので、<script> の位置や DOMContentLoaded の有無も合わせて確認します。

取得失敗の原因切り分け

diagram (will load when visible)

解決のコツ

ID が正しいか確認
null チェック を追加
スクリプト の実行タイミングを確認

読み込み順序のイメージ

diagram (will load when visible)

現場でよくある具体例

現場ケース 1 — 「本番だけ落ちる」謎エラーが、環境変数の NODE_ENV 違いで設定ファイルを切り替えていなかったことが原因。二分探索でコミットを絞り 30 分で解決
現場ケース 2 — フロントの無限ローディングは、useEffect 依存配列に毎レンダー新しい関数を渡していた。React DevTools のレンダー回数で気づけた
現場ケース 3 — DB の遅いクエリは EXPLAIN でフルスキャン発覚。複合インデックス追加で 300 倍速く。「測ってから直す」の典型例

次にとるべきアクション

直近 1 週間で詰まったエラーを 1 つ思い出す — そのエラーに「TypeError: null参照エラー」で学んだアプローチを適用してみる
デバッグメモのテンプレを自分用に作る — 現象・再現手順・仮説・検証結果の 4 項目を markdown で固定化する
console.log だけで解いていた問題に DevTools のブレークポイントを使う — ステップ実行を 1 回でも体験する

関連レッスン

参考にした出典

MDN Web Docs「Debugging JavaScript」 — ブラウザ DevTools を使ったデバッグ手順（出典: Mozilla, https://developer.mozilla.org/ja/docs/Tools/Debugger）
Google Chrome DevTools 公式ドキュメント — ブレークポイント・パフォーマンスタブ等の正式仕様（出典: Google, https://developer.chrome.com/docs/devtools/）
IEEE Software「Why Programs Fail」 — 不具合発見と修正プロセスに関する古典研究（出典: Andreas Zeller, Morgan Kaufmann, 2009, https://ieeexplore.ieee.org/）

学習を加速したい方へ

デバッグの基礎ガイドを体系的にマスターするなら、chotdekiru の無料学習ポータルで実際に手を動かして学習を始めるのがおすすめです。質問・つまずきも現役エンジニアが伴走します。

次のレッスン

次は mapのreturn忘れ で、DOM操作でよく発生する null 参照エラーを修正しますを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

型：null参照の要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. 型：null参照とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。