javascript モジュールを作成する
- 作成日 2020.10.13
- 更新日 2022.07.11
- javascript
- javascript
javascriptで、ES6(ECMAScript 2015)から利用することができるモジュールを作成する方法を記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 103.0.5060.114
モジュール作成
「hoge.js」というファイル名で、export文を使用して以下のコードを記述します。
//export関数
export function foo(msg) {
console.log(msg);
}
次に、import文を作成したモジュールを実際に利用してみます。
<script type="module">
import { foo } from "./hoge.js";
foo('Hello World'); // Hello World
</script>
import文にある、fromは、「./」「../」「/」を使ったパスで記述しなければエラーとなります。
import { foo } from "hoge.js"; // ←とすると以下のエラーとなります。
Uncaught TypeError: Failed to resolve module specifier "hoge.js". Relative references must start with either "/", "./", or "../".
「モジュール」は「js」ファイルで作成することができ、export文を使用して、エクスポートして、
エクスポートされたモジュールを「import」文を使って、利用することが可能です。
また、「<script type=”module”>」内は「常に Strict mode として動作」します。
<script type="module">
import { foo } from "./hoge.js";
foo('Hello World');
str = "test"; // Uncaught ReferenceError: str is not defined
</script>
以下のように、URLを指定して importを行うことも可能です。
<script type="module">
import * as THREE from 'https://unpkg.com/three@0.121.1/build/three.module.js';
const scene = new THREE.Scene();
</script>
複数エクスポート
複数エクスポートすることも可能です。
エクスポート側(hoge.js)
//変数をエクスポート
export const bar = 'bar';
//export関数
export function foo(msg) {
console.log(msg);
}
インポート側
<script type="module">
import { bar, foo } from "./hoge.js";
foo(bar); // bar
</script>
まとめて宣言することも可能です。
//変数をエクスポート
const bar = 'bar';
//export関数
function foo(msg) {
console.log(msg);
}
// exportするものを宣言
export { foo, bar };
以下のエラーが発生する場合は、ブラウザのキャッシュを削除してみてください。
※「hoge.js」がキャッシュされている可能性があります。
Uncaught SyntaxError: The requested module './hoge.js' does not provide an export named 'xxx'
defaultエクスポート
defaultエクスポートを使用すると、1つしかエクスポートできないモジュールを作成することができます。
// defaultエクスポート関数
export default function foo(msg) {
console.log(msg);
}
インポートする際の名前は、任意となります。
<script type="module">
import { foo } from "./hoge.js";
foo('mebee');
</script>
他のものをインポートしようとするとエラーになります。
エクスポート側
//変数をエクスポート
export const bar = 'bar';
//エクスポート関数
export default function foo(msg) {
console.log(msg);
}
インポート側
<script type="module">
import { bar, foo } from "./hoge.js";
foo(bar);
</script>
エラー
Uncaught SyntaxError: The requested module './hoge.js' does not provide an export named 'foo'
以下のように、defaultエクスポートを宣言することも可能です。
export default function foo(msg) {
console.log(msg);
}
export default foo;
asを使用
「as」を使用して別名でエクスポートしてインポートすることも可能です。
// 変数
const foo = 'foo';
// アロー関数
const bar = (msg) => console.log(msg);
// 別名でエクスポート
export { foo as f, bar as b};
インポート側
<script type="module">
import {f, b} from "./hoge.js";
b(f); // foo
</script>
逆にインポート側で、asを使用することも可能です。
// 変数
const foo = 'foo';
// アロー関数
const bar = (msg) => console.log(msg);
// 別名でエクスポート
export { foo, bar };
インポート側
<script type="module">
import { foo as f, bar as b} from "./hoge.js";
b(f);
</script>
全てのモジュールを、asで別名を指定して、以下の用に利用することも可能です。
<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
コメントを書く