MDNのドキュメントからモジュールについて勉強しました。モジュールファイルが複数になったとき、それらをまとめておくファイルを作れます。今回は、square.jsとcircle.jsをshapes.jsにまとめて、エクスポートします。インポートする側では、shapes.jsだけをインポートします。
ファイル構造
- index.html
- main.js
- modules/
- shapes.js
- shapes/
- square.js
- circle.js
ファイルの役割
- index.html
- main.jsの読み込み
- main.js
- モジュールの読み込み
- shapes.js
- モジュールの集約(エクスポート)
- square.js
- 長方形に関するクラス
- circle.js
- 円に関するクラス
モジュールのサンプルコード
shapes.jsにsquare.jsとcircle.jsをまとめて、エクスポートします。
<!-- index.html --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>モジュールの練習5</title> <script type="module" src="./main.js"></script> </head> <body></body> </html>
/* square.js */ // 長方形に関する変数や関数の定義 class Square{ //コンストラクタ constructor(x, y, w, h){ this.name = '長方形'; this.x = x; this.y = y; this.w = w; this.h = h; } print(){ return `この${this.name}は、座標(${this.x}、${this.y})、幅${this.w}、高さ${this.h}です。`; } } // クラスをエクスポートする export { Square };
/* circle.js */ // 円に関する変数や関数の定義 class Circle{ //コンストラクタ constructor(x, y, r){ this.name = '円'; this.x = x; this.y = y; this.r = r; } print(){ return `この${this.name}は、座標(${this.x}、${this.y})、半径${this.r}です。`; } } // クラスをエクスポートする export { Circle };
/* shapes.js */ // モジュールの集約 export { Square } from './shapes/square.js'; export { Circle } from './shapes/circle.js';
/* main.js */ // モジュールのインポート import { Square, Circle } from './modules/shapes.js'; let square = new Square(0, 0, 10, 10); console.log(square.print()); let circle = new Circle(0, 0, 10); console.log(circle.print());
main.jsでは、shapes.jsだけをインポートします。
実行結果
ブラウザのコンソールに以下のように表示されます。
この長方形は、座標(0、0)、幅10、高さ10です。 この円は、座標(0、0)、半径10です。
