JavaScript基礎メモその5

#クラスのエクスポート、インポート
クラスの定義の後で『export default クラス名』とすることで、そのクラスをエクスポート（出力）し
、他のファイルへ渡すことができる。

animal.js

class Animal {
//
}
export default Animal;
// Animalクラスを他のファイルでも使用できるようにする設定

『dog.js』内でAnimalクラスを使用できるようにする。
他のファイルで定義されているクラスを使用するにはインポート（読込）をする必要がある。
使用するファイルの先頭で『import クラス名 form "./ファイル名"』と書くことでインポートすることができる。
ファイル名の拡張子の『.js』は省略できる。
>```javascript
import Animal from "./animal";

#値のエクスポート、インポート
エクスポートする場合は『export default 定数名』
インポートする場合は『import 定数名 form "/ファイル名"』
>```javascript:sample1.js
const text = "Hello World";
export default text;

sample2.js

import text from "./sample1";
console.log(text);

結果
Hello World

#デフォルトエクスポート
『export default』はデフォルトエクスポートと呼ばれ、そのファイルがインポートされると自動的に『export default 値』の値がインポートされる。そのためエクスポート時の値の名前と、インポート時の名前に違いがあっても問題ない。
>```javascript:dogData.js
const dog = new Dog("reo", 4, "チワワ");
export default dog;

script.js

import doggy from "./dogData"
// 名前に違いがあっても定数dogの値が入っている (dog → doggy)
doggy.info()

デフォルトエクスポートは1ファイル1つ飲み使える。
>```javascript:dogDate.js
const dog1 = new Dog("han", 3, "柴犬");
const dog2 = new Dog("ryo", 2, "プードル");
>
export default dog1;
export default dog2;
// export default dog2; はエラーになる

#名前つきエクスポート
名前付きエクスポートは複数の値をエクスポートできる。またデフォルトエクスポートと違い、複数の定数やクラスを指定してエクスポートできる。
『export{名前１, 名前2}』という形で書くことにより、1つのファイルから複数のエクスポートができる。
>```javascript:dogData.js
const dog1 = new Dog("han", 3, "柴犬");
const dog2 = new Dog("ryo", 2, "プードル");
>
export { dog1, dog2 };

script.js

import { dog1, dog2 } from "./dogData";
dog1.info();
dog2.info();