当サイトでは、読み方（ルビ）の表示／非表示の切り替えをするため、
切替ボタンを用意し、JavaScriptを呼び出して使っています。
正常に動いていたボタンが突然動かなくなりました。
理由がわかったので、ご説明したいと思います。
エラーの詳細を確認しよう
何が原因で使えなくなったか把握するため、エラーの詳細を確認しましょう。
エラー詳細確認手順
①該当のページで右クリックし、
chromeブラウザの場合は、「検証」をクリックします。
②右側に表示されたDevToolsの「Console」をクリックすると、
が表示されます。
今回のエラーの原因は、以下であることがわかりました。
Uncaught SyntaxError: Unexpected token ‘function’って？
これは、
functionの周辺に予期しない構文エラーがありますよ。という意味です。
よくあるエラーの原因としては、
入力間違いなどがあります。
今一度、余計な文字が入っていないか、
逆に必要な文字があるか、
これを最初に確認しましょう。
今回のUnexpected token ‘function’の原因
今回は正しく動いていたものが、突然動くなりました。
つまり、構文エラーではありません。
じゃぁ、エラーが起こる前から、何か変更をしなかったか、
これを思い返す必要があります。
いろいろ思い出した結果、
Cocoonのサイト高速化の設定をしたことを思い出しました。
この設定を元に戻したところ、
エラーがなくなり、無事、JavaScriptが動くようになりました。
サイト高速化とは
以下googleサイトで、調べたいサイトのURLを入力することで、ページの読み込み時間の計測をすることができます。
数値の意味はそれぞれ以下のとおりです。
- 0～49：遅い
- 50～89：平均的
- 90～100：速い
Cocoonを使っている場合、サイトの表示が遅いときに、速くするための設定ができます。
全てのチェックを入れると、それだけ速度は速くなります。
今回の対応
そんなときは、以下対応をしましょう。
- 「JavaScriptを縮小化する」のチェックは外す
- その他の項目のチェックを入れる
まとめ
今回のルビ表示では、上記設定で正常に動きましたが、
他の箇所でエラーになっているかもしれません。
問題なく動いているかテストし、確認をしましょう。
コメント