【JavaScript】　ES6のimportとexportについて簡単にまとめてみた

さて、javascriptもES6になり、クラスの設計もできるようになったんですが、いろんなクラスを使う時に他の言語でもimport文も使っていましたがjavascriptではどう使うのか忘備録としてメモ。

１つのモジュールをexport・ import する方法

まずは、クラスファイルについてです。^{_{＊下記クラスファイルは適当に用意。}}

クラスファイルをexport・importするには

// ファイル名：parent.js
//クラス Parent
class Parent{
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

//Parentクラスをexportする
exprot default Parent;

読み込み側

//import で読み込む
import Parent from "./parent";

クラスを読み込むのにparent.js側で「export default+クラス名」としています。 1つの JS ファイルから1つのモジュール (オブジェクト)しか 「export default」としてエクスポートすることしか出来ません。エクスポートする際は、「export default 定数名」としましょう。

他の値をexport するには

クラス以外にも関数や数値・文字列もexportすることができます。

// ファイル名：text.js
//定数　txt_world
const txt_world="hello world";

//txt_worldをexportする
export default txt_world;

//import で読み込む
import txt_world from "./text";

複数のモジュールをexport・ import する方法

これまでは、1つのモジュール（クラスファイルやテキストなど）をexportしていましたが、複数の場合はどうするのか？

その方法は「export default」の代わりに 「export { 名前1, 名前2 }」 という書き方で可能です。名前付きexportと言われます。

// ファイル名：test.js
//Parentクラスのファイルをimportする
import Parent from "./parent";

// parentクラスのインスタンスを作成する
const parent1 = new Parent();
const parent2 = new Parent();

// 定数 parent1, parent2をエクスポートしてください
export {parent1,parent2};

//import で読み込む
import {parent1,parent2} from "./test";

//もちろんParentクラスのインスタンスなのでメソッドが定義されていれば使えます。
parent2.helloworld();

まとめ

ざっくりとメモとして書きましたが、もっといろんな書き方があります。下記のブログを参考にしました