HTMLに書かれたscriptタグが複数あるとそれぞれのスコープは共通になるのか？

構造化されたJavascriptであれば、スコープの理解は重要で必須です。 ところで、HTMLに直接記述されたscriptタグが複数ある場合、それらは別々のスコープになるのだろうか？ 個人的には同じページに書かれたscriptタグは、全て１つのスコープとして解釈されるんじゃないかと想像しているのだが、 それを検証してみようと思います。

検証実施

1. どノーマルパターン

<script> const a = 1 </script> <script> console.log(`a : ${a}`) </script> 実行結果 > a : 1 scriptタグ間は、何の問題もなく、スコープされるようだ。

2. 中括弧でくくってみる

<script> const a = 1 </script> <script> {const b = 1} </script> <script> console.log(`a : ${a} b : ${b}`) </script> 実行結果 > 002.html:10 Uncaught ReferenceError: b is not defined oops!いきなりのスコープ外勃発。 でも、これ、単一で書いてもスコープ外になるので、何の不思議もありません。

3. javascriptタイプとmoduleタイプ

<script> const a = 1 </script> <script type="module"> const b = 1 </script> <script> console.log(`a : ${a}`) console.log(`b : ${b}`) </script> 実行結果 > a : 1 002.html:10 Uncaught ReferenceError: b is not defined わざと中間のscriptタグをtype="module"にしてみたところ、その箇所のみスコープ外となってしまいました。 どうやらscriptタグ同士でもタイプが違うとスコープ対象外になるようです。

4. moduleタイプ同士

<script type="module"> const a = 1 </script> <script type="module"> console.log(`a : ${a}`) </script> 実行結果 > 002.html:10 Uncaught ReferenceError: a is not defined どうやら、moduleタイプは同一タイプの場合でも、タグの中だけがスコープ対象になるようです。

結果評論

今回のタグ検証を、GoogleChromeブラウザ、Firefox、Safari（すべてMacOSのみ）で検証したところ、どれも同じ結果でした。 最近、class構造で、モジュールタイプのscriptタグばかり書いているので、今回のスコープの検証をしてブラウザの挙動を知ることができたので、HTMLでのトリッキーな記述にも対応できそうです。

あとがき

今回の検証は、手軽に行うことができたんですが、これをネットで調べてみた所、 調べ方が良くなかったのか、どこにも書かれていませんでした。 もしかしたら、w3cのレギュレーションのどこかに書かれているかもしれませんが、それも探しきれませんでした。 どこのサイトもJavascriptのプログラム内部におけるスコープのみの説明で、ローカル変数やらグローバル変数の説明ばかりで、scriptタグレベルの説明してくれているページって無かったんですよね。 Webエンジニアの人は、是非今回のスコープ概念を認識している必要があるな〜と思った、本日の疑問と検証ブログでした。