【JavaScript】ESモジュールについて初心者メモ
はじめに
ファイルを役割ごとに分けて使用することを、いざ実践してみようとしたとき、そのファイルの内容を別のファイルにどうやって適用するのか、悩んだことはないでしょうか？
この記事では、どのようにしてファイルに記述した内容を別のファイルに適用するのか、その方法の1つを解説していきます。
ESモジュールとは
ESモジュールは、JavaScriptのコードを複数のファイルに分割し、お互いに連携させるための仕組みです。これは、コードを整理し、再利用しやすくするために非常に重要とされています。
モジュール
プログラムを1つのファイルで書くと、プログラムが大規模化したとき、コードが複雑で読みにくくなり、管理が難しくなります。
モジュールを使うと、コードを部品（モジュール）として小さなファイルに分割できます。
例えば、以下のように役割ごとにファイルを分けることができます。
- Word.js: 言葉に関するクラス（言葉、言葉の解説など）
- Emotion.js: 感情に関する（感情、感情を表す絵文字など）
- main.js: メイン関数（実際に処理を行なうファイル）
このように分割することで、それぞれのファイルがシンプルになり、誰が読んでも理解しやすくなります。
ESモジュールの基本ルール
ESモジュールには、主に2つのキーワードがあります。
1. export
他のファイルで使いたい変数や関数、クラスなどを公開するために使います。
// classの前に"export"を付けます
export class Word {
constructor(word, definition, pictureUrl){
this.word = word;
this.definition = definition;
this.pictureUrl = pictureUrl;
}
}
2. import
export された変数や関数、クラスなどを使えるようにするために使います。
→ 他のファイルで公開されている部品を「読み込む」ために使います。
import { Word } from './Word.js';
これによって、使用したいファイルでクラスなどを使用できるようになります。
ESモジュールを使用する場合の注意点
ブラウザでESモジュールを使うには、HTMLのscriptタグにtype="module"という属性を追加する必要があります。
<!DOCTYPE html>
<html>
<body>
<script type="module" src="main.js"></script>
</body>
</html>
これがないとブラウザに表示できないため、注意しましょう。
まとめ
ブラウザに作ったJavaScriptが反映されていない！
という体験から、関数やクラスなどをモジュール化し、他のファイルで使えるようにすること、それをHTMLファイルの script タグで type 属性を追加することが、必要であることがわかったため、この記事にまとめさせていただきました。
もし、同じような状況にあった場合に参考にしていただけますと幸いです。
最後までお読みいただき、ありがとうございました。
参考URL
Discussion