MENU
  1. ホーム
  2. サイト作成
  3. JavaScript
  4. JavaScriptが動かない時に確認してほしいこと

JavaScriptが動かない時に確認してほしいこと

サイト作成 JavaScript

テスト用サイトにJavaScriptのテストコードを書いていたら、

JavaScript
console.log('aaa');

すらコンソールに表示されないことがありました。

うーん、これは困った。

その時に確認していったことをまとめますので、参考にしてください。

目次

部品化したレイアウトを通しているか？

PHP
<?php require __DIR__ . '/layouts/header.php'; ?>
テスト
<?php require __DIR__ . '/layouts/footer.php'; ?>

であればOKだけれども、

PHP
<?php
echo "テスト";

のように、テスト用サイトの場合、footerに書いたJavaScriptの読み込みコードが書いていない場合があります。

今回はしっかり書いていたので、これは違いました。

読み込まれているかどうかは下記の方法で確認できます。

STEP
右クリック→[ページのソースを表示]

右クリックはテスト用サイト上で行ってください。

また、[ページのソースを表示]は右クリックした後のメニューの下の方にあります。

STEP
表示されたページのソースからJavaScriptのファイル名を検索

検索して見つからない場合はJavaScriptのファイルが読み込まれていません。

見つかる場合は別の原因ということになります。

パスが壊れている

例えば

HTML
<script src="js/main.js"></script>

でも、テスト用のViewのパスが

code
/test/index.php

だと

code
/test/js/main.js

を探しに行きます。

存在しないと読み込まれません。

従って、ConsoleのNetworkタブが404になっていないか確認しましょう。

途中でdie()やexitしている

PHPでよく途中でdie()やexitをして変数や配列の確認をすることがありますよね？

そのテストコードが残った状態で動かしている可能性もあります。

そうすると、footerに書いたJavaScriptまで到達できないので、確認しておきましょう。

scriptにdeferが付いている

HTML
<script src="main.js" defer></script>

となっていないか確認してみてください。

scriptにdeferが付いていると、HTML解析完了後に実行されてしまうので、

DOMContentLoaded 等よりも前に実行されてしまうため、

JavaScript
document.addEventListener("DOMContentLoaded", ...)

が既に終わったイベントとして登録されてしまうため、発火しません。

もしdeferがscriptに書いてあれば、取り除いて実行してみてください。

DOMが無い

HTML
<input id="search">

が無いのに

JavaScript
const yoji_search = document.getElementById('search');
search.addEventListener(...)

なんて書いていると当然ですが発火しません。

それどころか、エラーでスクリプトが止まります。

Consoleに赤いエラーが表示されていないか確認しましょう。

テスト用サイトのViewだけbody構造が違う

<html>が無かったり、<body>が閉じていなかったりしませんか？

こういった場合、DOMContentLoadedの挙動が変わることがあります。

自分のサイトの場合：エラーで止まっていた

JavaScriptの一番上に

JavaScript
console.log('JS Loaded');

と書いてコンソールでJavaScriptの読み込みを確認。

その後、JavaScriptを読み込みたい場所に

JavaScript
console.log('DOM Loaded');

と書いたがコンソールに表示されない。

それどころか、コンソールに

code
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at HTMLDocument.<anonymous>

という赤いエラーがたくさん出ていた。

つまり、対象の要素が無いのにaddEventListerしようとしていたことが原因でした。

なので、リスナ登録する要素がある場合は

JavaScript
document.addEventListener("DOMContentLoaded", function() {

  const search = document.getElementById("search");

  if (!search) return;

  // ここから通常処理
});

と要素が無い場合はreturnすればこれらのエラーを回避できるということです。

おわりに

JavaScriptには苦手意識がすごかったんだけれども、これで少し苦手意識が薄れた気がします。

直接リスナ登録するよりも先にDOMContentLoadedをリスナ登録してから書いた方が安全ですね。

少しでも参考になれば嬉しいです。

サイト作成 JavaScript
JavaScript
  • URLをコピーしました！
目次