ややこしい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を用いた制作は必須です。
こちらを上手く使い分けて、構築していくことが大事ですね。

ナカムラ

山口県は、防府天満宮のお膝元、防府市出身。 大自然と海が好きで、萩、長門といった日本海側に進出鬼没です。

Share

Other Blogs

REC.

  1. HOME
  2. BLOG
  3. 仕事と暮らし
  4. ややこしいJSの「import/export」についてまとめ

CONTACT US