JavaScriptでボタンやメニューが動かないときの確認ポイント

ボタンを押しても反応しない、スマホのメニューが開かない、スライダーが動かない。こうした症状は、JavaScriptのエラーや読み込み不良が原因になっていることがあります。見た目だけでは判断しにくいので、ブラウザの開発者ツールでエラーの有無から確認します。

この記事で分かること

これらは見た目の崩れではなく、「動き（JavaScript）」が途中で止まっているサインです。

動かなくなる原因は、おおむね次のどれかです。

JavaScriptエラーで処理が途中で止まっている
どこか1か所でエラーが出ると、それ以降の動きがまとめて止まることがあります。よくある原因の一つです。
プラグイン同士のJavaScriptの競合
複数のプラグインが同じ仕組み（jQueryなど）を別々に読み込み、ぶつかって動かなくなるケース。
必要なライブラリが読み込まれていない
動作に必要なjQueryなどが読み込まれず、機能が動かないことがあります。
キャッシュに古いJavaScriptが残っている
更新したのに、古いスクリプトが残って動かないだけのこともあります。
更新による互換性の問題
テーマやプラグインの更新で、動きの部分がかみ合わなくなったケース。

原因の多くはエラーメッセージに表れます。順番に確認します。

キャッシュをクリアして再確認する
まずブラウザのスーパーリロード（強い再読み込み）を試します。キャッシュ系プラグインがあれば、それもクリアします。これで直れば、古いスクリプトが残っていただけです。
開発者ツールのコンソールでエラーを見る
パソコンのブラウザで対象ページを開き、開発者ツール（Chromeなら右クリック→「検証」、またはF12）を開いて「Console（コンソール）」タブを見ます。赤い文字のエラーが出ていないかを確認します。
エラーの内容を控える
赤いエラーには、エラーの種類・どのファイルの何行目か、が書かれています。この情報が原因特定の手がかりになります。内容をコピーするか、スクリーンショットを撮っておきます。

コンソールに出る赤いエラーの例

Uncaught ReferenceError: $ is not defined at main.js:3

「ReferenceError」はエラーの種類、「main.js」はエラーが発生したファイル、「3」は行番号です。意味が分からなくても、この3つを控えておくと、相談時の手がかりになります。

どの操作で起きるかを特定する
ページを開いた時点でエラーが出るのか、ボタンを押した瞬間に出るのかを確認します。発生のタイミングで原因の範囲が絞れます。
プラグインを1つずつ無効化して切り分ける
あやしいプラグインを1つずつ無効化し、動きが戻るかを確認します。戻れば、そのプラグインが競合の原因です。本番サイトでは、アクセスの少ない時間に行います。

更新の直後から表示の崩れも出ている場合は、WordPress更新後に表示が崩れたときの原因切り分けもご確認ください。日頃の点検についてはWebサイトの保守チェックをご覧ください。

自分でエラーを確認しても直らないときは、次の情報があると調査が早くなります。

コンソールにエラーは出ているが意味が分からない、どのプラグインの競合か絞れない──そうした場合は、エラーの内容とスクリプトの読み込み順から切り分ける必要があります。

現役のWebエンジニアとして、フロントエンドの不具合調査を中心に対応しています。最初は、対象ページのURL・動かない操作・スクリーンショット（あれば）の3点だけで大丈夫です。エラーの内容から原因を切り分けてご説明します。