こちらの記事は以下の書籍を参考に執筆しました

入門JavaScriptプログラミング

モジュールの使用

モジュールの場所を指定

import

基本構文

import X from Y

モジュールの場所とモジュールから何をインポートするかの指定は文字リテラルでする。

const myModule ='./my_format.js'
import myFromatFunction from myModule//無効

インポートは他のどのコードよりも実行されるため、変数はまだ定義されていないため使用できない。

ファイルの拡張子はオプション

ファイル拡張子がついていないパスはindex.jsを含んでいるディレクトリを表す事がある。

// ./src/file.js と ./src/file/index.jsの両方と一致
import myVal from './src/file'

// ./src/file.jsのみと一致
import myVal from './src/file.js'

モジュールから値をインポート

デフォルトインポート

export default function currency(num) {
  //処理
}

このモジュールを./utils/format/currency.jsに配置してインポートするとこうなるかもしれない

//デフォルトエクスポートの値をインポートするとこうなる
import formatCurrency from './utils/format/currency.js'

function price(num) {
  return formatCurrency(num)
}

この関数名currencyをformatCurrencyでインポートしている。モジュールからデフォルトエクスポートの値のインポートには好き名前を使用できる。

名前付きインポート

function currency(num) {
  //処理
}

function number(num) {
  //処理
}

export {
  currency,
  number
}

インポート構文は似ている。

import {
  currency,
  number
} from './utils/format'

function details(product) {
  retun `
    price:${currency(product.price)}
    ${number(product.quantityAvailable)} in stock ready to ship.
  `;
}

名前付きエクスポートをすべてインポート

1つのモジュールから名前付きエクスポートをすべてインポートしたい場合はアスタリスクを使用する

//formatという新しいイブジェクトが作成され
//このモジュールの値がすべて割当られる
import * as format from './utils/format'

format.currency(1)
format.number(3000)

これにより新しいオブジェクトが作成されモジュールの名前付きエクスポートがそれぞれのプロパティとして設定される。
これは便利だが本来は使用する値だけをインポートすべき

インポートされた値はどのような仕組みでバインドされるか

デフォルトインポートと名前付きインポートは読み取り専用の値。
インポートした値への再代入は不可能。

import ajax from './ajax'

ajax = 1 //エラー ajaxは読み取り専用

ただしデフォルトインポートとは異なり、名前付きインポートはエクスポート元の変数に直接バインドされる。

つまりエクスポート元のファイルでそのヘンスが変化した場合はその変数をインポートしたファイルでも変化する。

副作用を目的としたインポート

モジュールのコードを実行したいが、モジュールの値を使用するための参照は必要ないど言う場合がある。
例としてGoogle Analyticsをセットアップするコードが含まれ他モジュール。
以下は副作用を目的としたインポート

import './google_analytics'

このインポートではインポートがどこで発生するかに関わらず、インポ0ともとのファイtに含まれているすべてのコードがインポート先のファイルのコードよりも先に実行される。

setup()

import '.my_script/'

これはsetup()よりもimportのコード全体が先に実行される。

【javascript】モジュールの使用