HTML
JavaScript
HTML5

JavaScriptでエラーが起きた時、別scriptタグに影響があるか調べてみた

JavaScriptはエラーが起きると、エラー箇所以降の行が実行されなくなる性質がある。
scriptタグに書いたJavaScriptコードでエラーが起きた時、
別のscriptタグに書かれたJavaScriptコードに影響があるかどうかを調べてみました。

検証環境

  • Google Chrome 61
  • Firefox 55
  • Microsoft Edge 40

検証1:直接書いたJavaScriptがエラーになった時、別scriptタグのコードは実行されるか?

scriptタグを分けてJavaScriptコードを書き、エラーを起こした時どんな挙動になるか確認した。

検証コード

test.html
<html>
<body>
<script>
console.log("hoge");
</script>
<script>
// 定義されていない変数を参照する
var aaa = bbb;
console.log("fuga");
</script>
<script>
console.log("piyo");
</script>
</body>
</html>

実行結果

スクリーンショット 2017-09-18 20.03.38.png

定義されていない変数を参照したところでエラーが起きている。
エラーの次の行にある console.log("fuga") が実行されていない。
しかし、その後に出てくる別scriptタグ内に記述された console.log("piyo") は実行されている。
このことから、エラー以降の行が実行されない性質は、scriptタグの中に留まることが言えそう。

検証2:読み込んだJavaScriptがエラーになった時、別scriptタグで読み込んだ内容は実行されるか?

検証1のコードを外部ファイルに直してみた。

検証コード

test.html
<html>
<body>
<script type="text/javascript" src="./hoge.js"></script>
<script type="text/javascript" src="./fuga.js"></script>
<script type="text/javascript" src="./piyo.js"></script>
</body>
</html>
hoge.js
console.log("hoge");
fuga.js
// 定義されていない変数を参照する
var aaa = bbb;
console.log("fuga");
piyo.js
console.log("piyo");

実行結果

スクリーンショット 2017-09-18 20.23.44.png

検証1と同様の結果になった。
エラー以降の行が実行されない性質はエラーが起きたscriptタグだけに留まっている。

まとめ

scriptタグに書いたJavaScriptコードでエラーが起きても、
別のscriptタグに書かれたJavaScriptコードはちゃんと実行されることが分かった。
このことから全てのJavaScriptのコードを1箇所にまとめず、scriptタグをあえて分ける方法も考えれそう。

例えば、自サイトにアフィリエイトを貼り付けているとしたら...

<script type="text/javascript" src="自サイトのロジックが書かれたjsファイル"></script>
<script type="text/javascript" src="アフィリエイトのjsファイル"></script>

といった感じに書けば、自サイトのロジックがバグってエラーを起こしても、アフィリエイトの貼り付けは問題なくできる。

必要に応じてscriptタグを分けるといいのかもしれない。