【javascript】モジュールの使用

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

• 入門JavaScriptプログラミング

#モジュールの使用
##モジュールの場所を指定
###import

基本構文

import X from Y

出典：入門JavaScriptプログラミング

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

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

出典：入門JavaScriptプログラミング

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

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

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

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

出典：入門JavaScriptプログラミング

##モジュールから値をインポート
###デフォルトインポート

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

出典：入門JavaScriptプログラミング

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

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

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

出典：入門JavaScriptプログラミング

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

function currency(num) {
  //処理
}

function number(num) {
  //処理
}

export {
  currency,
  number
}

出典：入門JavaScriptプログラミング

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

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

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

出典：入門JavaScriptプログラミング

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

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

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

出典：入門JavaScriptプログラミング

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

##インポートされた値はどのような仕組みでバインドされるか
デフォルトインポートと名前付きインポートは読み取り専用の値。
インポートした値への再代入は不可能。

import ajax from './ajax'

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

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

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

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

import './google_analytics'

出典：入門JavaScriptプログラミング

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

setup()

import '.my_script/'

出典：入門JavaScriptプログラミング

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