STUDY MEMO

勉強した内容をアウトプットしていきます。

<javascript ES6> ファイル間の関連付け

export(出力)について

 

クラス定義のあとで、下記の記載をするとそのクラスを他のファイルへ出力できるように設定できる。

 

class クラス名{

  ・・・

}

export default クラス名;

 

クラス名の部分を変数名や定数名で記載すれば、それらもexport可能。

 

 

 

import(読み込み)について

 

ファイルの冒頭で以下の記載をすることで、exportされている他クラスを読み込むことができる。

 

import クラス名 from "ファイル名";

 

 

 

 

デフォルトエクスポート

export default(デフォルトエクスポート)は、他ファイルにimportされるとexportされた情報が自動的にimportされるため、export時とimport時の名称が違っても問題ない。

exportした値やクラスが自動的にimportされてしまうため、1つのファイルにつき1つの値にしか使用できない。

もし2つ以上の情報をexport defaultで扱おうとすると以下のエラーが発生する。

 

SyntaxError: src/ファイル名: Only one default export allowed per module.

 

名前付きエクスポートとインポート

名前付きの場合{}で定数等の値を囲む。

 

export {定数等};

 

import {定数等} from "ファイル名";

 

複数の定数やクラスを指定するには、{}をカンマで区切る。