AI AIワークナビ AI Work Studio
メニュー
AIワークナビ ホーム

JavaScriptのエラーをConsoleで確認する方法。ブラウザIDEでデバッグ練習

記事

JavaScriptを練習していると、画面が動かないのに原因が分からないことがあります。そんなときは、Previewだけを見るのではなくConsoleも一緒に確認すると、エラーの場所を見つけやすくなります。

Consoleを見る理由

JavaScriptの構文ミス、変数名の間違い、存在しない要素への操作などは、画面だけでは分かりにくいことがあります。Consoleにはエラー文が表示されるため、どの行や処理で止まったのかを推測できます。

AI Work Studioでの確認手順

  1. AI Work StudioでJavaScriptタブを開く
  2. ボタンやDOM操作のコードを書く
  3. Run Previewを押す
  4. Consoleタブ、またはSplit表示でエラーを見る
  5. 修正後にもう一度Run Previewを押す

よくあるエラー例

const button = document.querySelector(".start");
button.addEventListener("click", function () {
  console.log("clicked");
});

このコードでは、HTML側にclass名startの要素がないと、buttonがnullになりエラーになります。HTMLとJavaScriptの指定が一致しているかを確認しましょう。

エラーを防ぐ修正例

HTML側に.startのclassを持つボタンがない場合、document.querySelector(".start")の結果はnullになります。そのままaddEventListenerを使うとエラーになります。

安全に書くなら、次のように要素が見つかったときだけ処理を実行します。

const button = document.querySelector(".start");

if (button) {
  button.addEventListener("click", function () {
    console.log("clicked");
  });
} else {
  console.log("buttonが見つかりません");
}

この書き方にすると、ボタンが見つからない場合でも、どこを確認すればよいかConsoleで分かりやすくなります。

よくあるConsoleエラー

Cannot read properties of null

HTMLに存在しない要素をJavaScriptで取得しようとしたときによく出ます。class名やid名がHTMLとJavaScriptで一致しているかを確認してください。

Unexpected token

括弧、カンマ、引用符などの書き忘れで出ることがあります。直前の行も含めて確認すると原因を見つけやすいです。

何も表示されない

エラーが出ていなくても、イベントが発火していない場合があります。まずconsole.log("ここまで動いた")のような確認用の出力を入れて、どこまで処理が進んでいるか確認しましょう。

よくある質問

Consoleはどこで確認しますか？

Run Previewを押したあと、ConsoleタブまたはSplit表示で確認します。エラー文、行番号、ファイル名を見ると原因を探しやすくなります。

Cannot read properties of nullは何が原因ですか？

HTMLにない要素をJavaScriptで取得しようとしたときによく出ます。id名やclass名がHTMLとJavaScriptで同じか確認してください。

エラーがないのに動かないときはどうしますか？

console.logで処理がどこまで進んでいるか確認します。クリックイベントが動いているか、ファイルが読み込まれているかを順番に見直しましょう。

次に読むおすすめ記事