【JavaScript】ファイルを分割してデータを引き渡す・受け取る：export・import

ファイルを分割する

コードを１つのファイルに書こうとすると途方もない量になることがあります。そのため、ファイルを分割して整理をします。

ファイル同士で値の引き渡しができるようにする必要があります。出力する側には、「export default クラス名;」を書き、引き受ける側には「import クラス名 from “ファイル場所とファイル名”;を記します。同じ階層にあるanimals.jsというファイルの場合には”./animals”と書きます。

class Animal{

}
export default Animal;
//Animalクラスを他のファイルからでも使える

import Animal from "./animals";

また、exportできるのはクラスだけに限らず、変数、関数など、どんな値でも可能です。

デフォルトエクスポートとは

export defaultで値を渡す方法をデフォルトエクスポートと呼びます。デフォルトエクスポートでは、インポート側の名前が違っていても問題ありません。下のコードでは、dogの値がdogmanに入れられます。

export default dog;

import dogman from "./dog"

複数の値を受け渡す：名前付きエクスポート

デフォルトエクスポートでは基本的に１つの値しか渡せません。そのため、名前付きエクスポートを行います。export { }の中に、複数の値を入れることができます。

export {dog1,dog2};

import {dog1,dog2} from "./dog"

相対パスとは

同じ階層に引用したいファイルがある場合には「./ファイル名」だけで済みましたが、階層が異なる場合があります。その場合には相対パスを用います。

１つ上の階層に戻る倍には「../」を使います。

import {dog1,dog2} from ".//class/dog"