グローバル変数の衝突でエラーが発生したけど type="module" で解決できた

5480 ワード

どういうことがあったか

すでに運用されているサイトの一部のページを制作することになり、
自分が作成したJSとは別に、サイト共通で使用されているJSも読み込む必要があった。

<script src="/common.js"></script><!-- 共通ファイル -->
<script src="/new/script.js"></script><!-- 自分が作成した新ファイル -->

これらのJSファイル間で変数名が衝突してしまい、結果としてエラーが発生してしまっていた。

// /common.js
const a = 123;
// /new/script.js
const a = "abc";

※上記あくまでイメージ。

共通ファイルを変えてもらうわけにもいかず、
新ファイルのほうの原因である変数はnpmパッケージで使われているもので、簡単に変更することもできない。

解決:type="module"

結論としては、以下のように新ファイルの読み込みに type="module" を追加して解決しました。
(共通ファイルの読み込みについては、予期せぬところで影響があっては困るのでそのままとしました。)

<script src="/common.js"></script>
<script src="/new/script.js" type="module"></script>

type="module" (JavaScript モジュール)とは

script タグに type="module" を指定することで、読み込むファイルはJavaScript モジュールとして扱われます。

module: コードを JavaScript モジュールとして扱います。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/script#attr-type

JavaScript モジュールは、 importexport 文を用いてインポート・エクスポートができる形式です。