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

if (hoge == 1) {//ここにコメント書いてた
	return true;
} else {
	return false;
}
(正しくは)
if (hoge == 1) {
	//コメントはここじゃないとダメ
	return true;//コメントはここじゃないとダメ
} else {
	return false;
}

【対策】FireFoxのバグと思われますが、自分のでなく閲覧者のブラウザのバージョンで動作可否が決まるので、将来のバージョンで修正されようがどの道対応要。

⇒下で示すように最初から自力でコメントを削除してしまう方が安全。

• Autoptimize…CSS、JSの空白・改行を削除しデータ容量を小さくするプラグイン。
• その他高速化系プラグイン…データ圧縮して高速化を謳うようなもの全般。

今回はプラグイン更新時の発覚でしたが、テーマアップデート時も同様に発生するパターンと考えられます。

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関数に頼らないのがベスト。

• Autoptimize…CSS、JSの空白・改行を削除しデータ容量を小さくするプラグイン。

プラグインの単なるバグだと思われますが、Autoptimizeはトラブルが多いので排除し、できる限り自力で最小化する方向で再構築するのが適。

//カスタムJavaScript欄でのみ動くソース
	var url=location.href;
	var tmp = url.split('/recall-');
		var tmp2 = tmp[1].split('.html');
//★ここでtmp[1]に何も代入されない場合が発生し、それを元にtmp2を計算させてエラー発生！
	

//修正ソース
	var url=location.href;
	var tmp = url.split('/recall-');
	if (tmp[1] != null) {
		var tmp2 = tmp[1].split('.html');
	}

【対策】修正ソースのように、if文でnull確認し処理をしっかり指定することでファイル読込<script async src=”name.js”></script>でも無事動くように。

このケースは、文法チェックではエラー無し→実行させてエラーとなるタイプが当てはまるかと。圧倒的に多いのがいわゆるNull Objection。散々自分がやらかすのは、

【対策】うちはもしもかんたんリンクをすべて撤去しました。

【確認方法】WordPressであれば大抵はアフィリエイトタグのテンプレート使用かと。

なので、ダミー記事に全アフィリエイトタグを並べ、その下に(実行順が後になるように)動作確認済のJavaScriptを貼って正常動作することを確認します。