ややこしいJSの「import/export」についてまとめ

ややこしいJSの「import/export」についてまとめ

みなさんこんにちは、本日は、JSの少しややこしい
「import/export」について簡単にまとめてみました。

ちなみに「import/export」とは、部品化したモジュールを別ファイルから
呼び出したり行える機能のことでES6より出てきました。

このexportには、2種類の記述方法があり、それぞれ以下のような特徴があります。

named export（名前付きエクスポート）

・1つのモジュール内に複数exportが可能
・呼び出し側で、export時の名前でimportする

export const test = () => {
  return サンプル
}

export const test02 = () => {
  return テスト02
}

呼び出し側

import {test, test02} from './sample'

default exports（デフォルトエクスポート）

・1つのモジュール内に1つだけexportが可能
・呼び出し側では、名前を自由に定義できる(以下では、testDefaultでなくとも大丈夫)

const test = () => {
  return サンプル
}

export default testDefault

呼び出し側

export default testDefault

このモジュール機能少しややこしいのが、
Node.jsにも「require/exports」という機能があります。
この「require/exports」は、「import/export」と同様の機能なのですが、
ブラウザで動く、JS(ES Modules)ではサポートしていないため、
Node.js(CommonJS)上でのみで動かすことができます。

また、「require/exports」は、Node.js初期からサポートされてあるため、
多くの既存のライブラリやモジュールでは「require/exports」が用いられています。

昨今のWeb制作では、Node.jsを用いた制作は必須です。
こちらを上手く使い分けて、構築していくことが大事ですね。