Web活のロゴ

Web制作Output&初心者のための徹底ガイド

Javascriptのtype=”module”とは

2023.08.14Javascriptのtypeモジュールとは
はじめに
概要

JavaScriptには、「module」という種類があります。通常のJavaScriptとは何が異なるのかを説明していきます。非常に便利なものですので、ぜひ上手に活用しましょう。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

moduleで出来ること

名前空間を使用

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

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

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

impoert/export文の活用

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

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

注意事項

開発環境における制限

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

ブラウザのサポート

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

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

まとめ
  • モジュールを活用することで、管理がしやすくなる
  • 変数の衝突によるエラーが回避できる
  • 「エラーが発生しない場合にデバッグが困難である」ということもデメリットとなる。
  • 開発環境では一部制限を受ける
  • 古いブラウザではサポートしていない場合もある