【JsvaScript】ESModulesのimport/exportについて

はじめに

初学者のアウトップト兼備忘録です。
間違いや補足等あればご指摘ください。

今回はJSのESModulesについてまとめます。

ESModulesとは

JSファイルをモジュール化して、他のJSファイルで使うことができるものです。
モジュール化することで、コードを再利用でき、保守性の向上につながります。

使い方

１ jsを読み込むscriptタグにtype="module"を記述します。
２ 読み込ませたいJSファイルの関数の頭にexportを記述します。

module.js

export const hello = () => {
  console.log("hello!");
};

３ 読み込みたいJSファイルでimportを記述して読み込みます。

main.js

import { hello } from "./module.js";
hello();

export、importの書き方

export、importの書き方は大きく分けて3つあります。
１ constで宣言する。

module.js

export const hello = () => {
  console.log("hello!");
};

main.js

import { hello } from "./module.js";
hello();

２ オブジェクトリテラルで読み込む

module.js

class User {
  constructor(name) {
    this.name = name;
  }
  hello() {
    console.log(this.name)
  }
}

export { User }

main.js

import { User } from "./module.js";

const user = new User("Tom")
user.hello();

３　デフォルトエクスポート

module.js

const hello = () => {
 console.log("hello!");
}

export default  hello;

main.js

import Halo from "./module.js"

Halo();

export defaultを使う場合、importでは{}で囲わない。
また、Haloの部分は変更できます。

デフォルトエクスポートはモジュールにつき１つのみ使用できます。

終わり