javascript モジュールを作成する

2020.10.13
javascript
javascript

javascriptで、ES6（ECMAScript 2015）から利用することができるモジュールを作成する方法を記述してます。

1. 環境
2. モジュール作成
3. defaultエクスポート
4. asを使用

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 84.0.4147.105

windows10にApacheのインストール

モジュール作成

「hoge.js」というファイル名で、export文を使用して以下のコードを記述します。

//export関数
export function foo(msg) {
    console.log(msg);
}

//export関数

export function foo(msg) {

console.log(msg);

}

次に、import文を作成したモジュールを実際に利用してみます。

<script type="module">

import { foo } from "./hoge.js";
foo('Hello World'); // Hello World

</script>

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 "../".

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を行うことも可能です。

<script type="module">

import * as THREE from 'https://unpkg.com/three@0.121.1/build/three.module.js';
const scene = new THREE.Scene();

</script>

import * as THREE from 'https://unpkg.com/three@0.121.1/build/three.module.js';

const scene = new THREE.Scene();

</script>

複数エクスポートすることも可能です。

エクスポート側

//変数をエクスポート
export const bar = 'bar';

//export関数
export function foo(msg) {
    console.log(msg);
}

//変数をエクスポート

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>

import { bar, foo } from "./hoge.js";

foo(bar); // bar

</script>

まとめて宣言することも可能です。

//変数をエクスポート
const bar = 'bar';

//export関数
function foo(msg) {
    console.log(msg);
}

// exportするものを宣言
export { foo, bar };

//変数をエクスポート

const bar = 'bar';

//export関数

function foo(msg) {

console.log(msg);

}

// exportするものを宣言

export { foo, bar };

defaultエクスポート

defaultエクスポートを使用すると、1つしかエクスポートできないモジュールを作成することができます。

//　defaultエクスポート関数
export default function foo(msg) {
    console.log(msg);
}

//　defaultエクスポート関数

export default function foo(msg) {

console.log(msg);

}

インポートする際の名前は、任意となります。

<script type="module">

  import test from "./hoge.js";

  test('mebee');

</script>

import test from "./hoge.js";

test('mebee');

</script>

他のものをインポートしようとするとエラーになります。

エクスポート側

//変数をエクスポート
export const bar = 'bar';

//エクスポート関数
export default function foo(msg) {
    console.log(msg);
}

//変数をエクスポート

export const bar = 'bar';

//エクスポート関数

export default function foo(msg) {

console.log(msg);

}

インポート側

<script type="module">

  import { bar, foo } from "./hoge.js";

  foo(bar);

</script>

import { bar, foo } from "./hoge.js";

foo(bar);

</script>

エラー

Uncaught SyntaxError: The requested module './hoge.js' does not provide an export named 'foo'

1	Uncaught SyntaxError: The requested module './hoge.js' does not provide an export named 'foo'

以下のように、defaultエクスポートを宣言することも可能です。

// アロー関数
const foo = () => console.log("mebee");

export default foo;

// アロー関数

const foo = () => console.log("mebee");

export default foo;

asを使用

asを使用して別名でエクスポートしてインポートすることも可能です。

// 変数
const foo = 'foo'; 

// アロー関数
const bar = (msg) => console.log(msg);

// 別名でエクスポート
export { foo as f, bar as b};

// 変数

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>

import {f, b} from "./hoge.js";

b(f); // foo

</script>

逆にインポート側で、asを使用することも可能です。

// 変数
const foo = 'foo';

// アロー関数
const bar = (msg) => console.log(msg);

// 別名でエクスポート
export { foo, bar };

// 変数

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>

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>

import * as hogehoge from "./hoge.js";

hogehoge.bar(hogehoge.foo);

</script>

asにより、複数のモジュールをインポートした際に、同名のモジュール名が存在した場合のエラーを回避することが可能です。

javascript モジュールを作成する

環境

モジュール作成

defaultエクスポート

asを使用

C# listBoxで選択されている値を削除する 2020.10.13

WordPress phpのバージョンを5.6から7.3に上げた時にLION BLOGでエラーが発生 2020.10.13