javascript モジュールを作成する
- 2020.10.13
- javascript
- javascript

javascriptで、ES6(ECMAScript 2015)から利用することができるモジュールを作成する方法を記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 84.0.4147.105
モジュール作成
「hoge.js」というファイル名で、export文を使用して以下のコードを記述します。
1 2 3 4 |
//export関数 export function foo(msg) { console.log(msg); } |
次に、import文を作成したモジュールを実際に利用してみます。
1 2 3 4 5 6 |
<script type="module"> import { foo } from "./hoge.js"; foo('Hello World'); // Hello World </script> |
import文にある、fromは、「./」「../」「/」を使ったパスで記述しなければエラーとなります。
1 2 3 |
import { foo } from "hoge.js"; ←とすると以下のエラーとなります。 Uncaught TypeError: Failed to resolve module specifier "hoge.js". Relative references must start with either "/", "./", or "../". |
モジュールはjsファイルで作成することができ、export文を使用して、エクスポートして、エクスポートされたモジュールをimport文を使って、利用することが可能です。
また、モジュールは「常に Strict mode として動作」します。
以下のように、URLを指定して importを行うことも可能です。
1 2 3 4 5 6 |
<script type="module"> import * as THREE from 'https://unpkg.com/three@0.121.1/build/three.module.js'; const scene = new THREE.Scene(); </script> |
複数エクスポートすることも可能です。
エクスポート側
1 2 3 4 5 6 7 |
//変数をエクスポート export const bar = 'bar'; //export関数 export function foo(msg) { console.log(msg); } |
インポート側
1 2 3 4 5 6 7 |
<script type="module"> import { bar, foo } from "./hoge.js"; foo(bar); // bar </script> |
まとめて宣言することも可能です。
1 2 3 4 5 6 7 8 9 10 |
//変数をエクスポート const bar = 'bar'; //export関数 function foo(msg) { console.log(msg); } // exportするものを宣言 export { foo, bar }; |
defaultエクスポート
defaultエクスポートを使用すると、1つしかエクスポートできないモジュールを作成することができます。
1 2 3 4 |
// defaultエクスポート関数 export default function foo(msg) { console.log(msg); } |
インポートする際の名前は、任意となります。
1 2 3 4 5 6 7 |
<script type="module"> import test from "./hoge.js"; test('mebee'); </script> |
他のものをインポートしようとするとエラーになります。
エクスポート側
1 2 3 4 5 6 7 |
//変数をエクスポート export const bar = 'bar'; //エクスポート関数 export default function foo(msg) { console.log(msg); } |
インポート側
1 2 3 4 5 6 7 |
<script type="module"> import { bar, foo } from "./hoge.js"; foo(bar); </script> |
エラー
1 |
Uncaught SyntaxError: The requested module './hoge.js' does not provide an export named 'foo' |
以下のように、defaultエクスポートを宣言することも可能です。
1 2 3 4 |
// アロー関数 const foo = () => console.log("mebee"); export default foo; |
asを使用
asを使用して別名でエクスポートしてインポートすることも可能です。
1 2 3 4 5 6 7 8 |
// 変数 const foo = 'foo'; // アロー関数 const bar = (msg) => console.log(msg); // 別名でエクスポート export { foo as f, bar as b}; |
インポート側
1 2 3 4 5 6 7 |
<script type="module"> import {f, b} from "./hoge.js"; b(f); // foo </script> |
逆にインポート側で、asを使用することも可能です。
1 2 3 4 5 6 7 8 |
// 変数 const foo = 'foo'; // アロー関数 const bar = (msg) => console.log(msg); // 別名でエクスポート export { foo, bar }; |
インポート側
1 2 3 4 5 6 7 |
<script type="module"> import { foo as f, bar as b} from "./hoge.js"; b(f); </script> |
全てのモジュールを、asで別名を指定して、以下の用に利用することも可能です。
1 2 3 4 5 6 7 |
<script type="module"> import * as hogehoge from "./hoge.js"; hogehoge.bar(hogehoge.foo); </script> |
asにより、複数のモジュールをインポートした際に、同名のモジュール名が存在した場合のエラーを回避することが可能です。
-
前の記事
C# listBoxで選択されている値を削除する 2020.10.13
-
次の記事
WordPress phpのバージョンを5.6から7.3に上げた時にLION BLOGでエラーが発生 2020.10.13
コメントを書く