JavaScript突然動かなくなった|ブラウザやテーマアップデート時のトラブル原因調査|切り分け

勘違いしながらドはまりしながら作り上げていく『JavaScript奮闘記』。事始めのJavaScript常識をまとめたページはこちら。

ポク太郎です。

ホームページを動的に変化させることができるJavaScript。非常に便利ですが、困るのは動いてたプログラム突然動かなくなる現象

本ページの話題は「動いてた筈のJavaScriptプログラムがいつの間にか動かなくなってた」。主にトリガとなるのは、

  • Firefox、Chromeなどのブラウザのアップデート
  • WordPressのアップデート
  • WordPress用テーマのアップデート
  • 無料ブログシステムのアップデート

ページ全体に使用してた場合には全ページに影響。「早急な対処必要!」と焦る最悪のトラブルです。


JavaScriptが動かなくなった場合の確認事項

動いてた筈のJavaScriptプログラムがいつの間にか動かなくなってた」の主な原因は上で書いたように、以下のタイミングがほとんど。

  • Firefox、Chromeなどのブラウザのアップデート
  • WordPressのアップデート
  • WordPress用テーマのアップデート
  • 無料ブログシステムのアップデート

実際にそれらに遭遇したケースの原因と対策を以下表内に。

動いてた筈のJavaScriptプログラムがいつの間にか動かなくなってた」原因と対策
アップデート原因・切り分け・対策方法
Firefox【原因と対策】文末記号;の後ろでない場所に//でコメント記述してたら、アップデートによってそれがエラー停止するように。

if (hoge == 1) {//ここにコメント書いてた
	return true;
} else {
	return false;
}
(正しくは)
if (hoge == 1) {
	//コメントはここじゃないとダメ
	return true;//コメントはここじゃないとダメ
} else {
	return false;
}
WordPress用テーマ【原因と対策】別のWordpress用プラグインと同等の機能がテーマに内包され、競合したか何かで動かなくなった。
以下のプラグインを停止することで復活し、動くように。

  • Autoptimize…CSSJSの空白・改行を削除しデータ容量を小さくするプラグイン。
  • その他高速化系プラグイン…データ圧縮して高速化を謳うようなもの全般。
safari【原因】onload関数の挙動がブラウザアップデートで変化し、JavaScriptがスタートしない状況に陥ってた。

if (frompc == true ) {
	//DOM読込完-iphoneで動かず
	window.addEventListener('load', function(){INI();}, false);}
else {
	document.addEventListener('DOMContentLoaded', function(){INI();}, false);}
	//document.addEventListener('deviceready', function() {INI();}, false);}

iPhone等のスマホではブラウザはページでなくアプリ扱いになるので上記のようにEventListenerの使い方が異なるとのこと。

【対策】ただし、その仕様がアップデートでコロコロ変わるので、できる限りonload関数に頼らないのがベスト。

全ページに影響するのでとにかく焦るトラブル。JavaScriptの一番嫌なとこ。

なので、何かをアップデートする際にどこを確認すべきかをまとめたチェックリストをご自身で作っておくといいかもね。

コメント

タイトルとURLをコピーしました