名前空間を使用

異なるモジュールで同じ名前の関数や変数を定義しても衝突することがありません。名前空間を使用することで、コードの衝突や混乱を防ぐことができます。

通常のjavascriptでconst　langを宣言しているindex.jsとscript.jsを見てみましょう。

上記の通り、type=”module”に変更したところ、エラーが解消されどちらも正常にコンソールログが表示されています。

impoert/export文の活用

通常のJavaScriptでは、全てのコードがグローバルスコープに存在し、他のファイルやプロジェクトでの再利用が難しい場合があります。しかし、モジュールを使用することで、関数や変数をエクスポートして他のファイルから利用することができます。

このようにファイルを分割すれば、管理しやすくなります。

開発環境における制限

一部のブラウザは、file:// URLからのモジュールの読み込みを許可しないため、ローカルファイルシステムからの開発が困難になることがあります。この問題を回避するためには、ローカルの開発サーバーを使用する必要があります。VsCodeのLiveServerなどがおすすめです。LiveServerについてはこちらを参照ください。

ブラウザのサポート

古いブラウザはESモジュールをサポートしていない場合があります。ただし、2023年現在、主要なブラウザの多くはモジュールをサポートしています。

他の利点や欠点もありますが、特に上記のことは重要な内容です。ChatGTPを使えば、詳細な情報を教えてくれるので、ぜひ活用してみてください。