NEW ARTICLE
Error: Cannot find module ‘@babel/core’ の解決方法
  1. HOME
  2. javascript
  3. javascript モジュールを作成する

javascript モジュールを作成する

javascript モジュールを作成する

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

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.114
Javascript サンプル集はこちら

モジュール作成

「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 として動作」します。

use strictについて
<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により、複数のモジュールをインポートした際に、同名のモジュール名が存在した場合のエラーを回避することが可能です。