JavaScriptファイルを読み込む際に使用する<script>タグの2つの方法
伝統的な方法
<script src="script.js"></script>
モジュール方式
<script type="module" src="script.js"></script>
2つの方法の主な違い
伝統的な方法：
ブラウザが伝統的な<script>タグに出会うと、すぐにそのJavaScriptコードを読み込み、実行します。これは、コード内のグローバル変数や関数がグローバルスコープを汚染し、名前の競合や変数の上書きなどの問題を引き起こす可能性があることを意味します。
モジュール方式：
type="module"属性を使用すると、ブラウザにこの<script>タグ内のJavaScriptコードがモジュールであることを伝えます。ブラウザはモジュール方式でコードを読み込み、実行します。これには依存関係の解析や非同期読み込みが含まれます。モジュールは独自のスコープを持ち、モジュール内の変数や関数はグローバルスコープを汚染せず、他のモジュールの影響も受けません。
type="module"を使用してJavaScriptモジュールを読み込む際の一般的なエラーとその原因
・SyntaxError: Unexpected token
原因：モジュールのインポート文で旧バージョンのブラウザがモジュール構文をサポートしていないか、モジュールに文法エラーが含まれています。
解決方法：モジュール構文をサポートする最新バージョンのブラウザを使用し、モジュールの文法エラーを確認してください。
・TypeError: Cannot use import statement outside a module
原因：import文を使用しているが、コードがモジュール内で実行されていない、またはtype="module"が正しく指定されていません。
解決方法：HTMLの<script>タグにtype="module"属性を追加し、そのスクリプトがモジュールであることをブラウザに伝えてください。
・404 Not Found - Failed to load module script
原因：ブラウザが指定されたパスのモジュールファイルを見つけることができません。
解決方法：モジュールファイルのパスが正しいことを確認し、サーバーがそのファイルを正しく提供できることを確認してください。
・CORSエラー
原因：クロスオリジンリソース共有（CORS）ポリシーにより、他のドメインからのモジュールの読み込みがブロックされています。
解決方法：サーバーが正しいCORSヘッダーを設定し、クロスオリジンリクエストを許可するようにしてください。
・NetworkError when attempting to fetch resource
原因：ブラウザがサーバーからモジュールリソースを取得できない、ネットワークの問題やサーバーの障害が原因です。
解決方法：ネットワーク接続を確認し、サーバーが正常に動作していることを確認してください。
・Circular dependency detected
原因：モジュール間に循環依存関係が存在し、モジュールを正しく読み込むことができません。
解決方法：コードをリファクタリングして循環依存関係を解消するか、モジュール構造を再設計してください。
・ReferenceError: exports is not defined
原因：モジュール内でCommonJSのexportsキーワードを使用していますが、ES6モジュールではexportsは定義されていません。
解決方法：ES6のexportキーワードを使用してモジュールの内容をエクスポートしてください。
・SyntaxError: Cannot use import statement '...' in a script before the module containing the import is loaded
原因：現在のモジュールが読み込まれる前に、他のモジュールをimportしようとしています。
解決方法：モジュール内でimportを使用する位置が正しいことを確認し、モジュール外のコードでimportを使用しないでください。