import と export - JavaScript入門

JavaScriptで外部ファイルから、関数やクラスを読み込むにはimportを使います。
また、importで読み込みをできるようにするには、exportを使って書きだす必要があります。

※ES2015(ES6)のお話です

JavaScriptで関数やクラスをimportで読み込む

JavaScriptで関数やクラスを読み込むには、importを使います。
importの使い方は簡単です。
以下に例を示します。

import { defineComponent } from "vue";
import { User } from "./user.js";
import * as Hello from "./hello.js";

一つ目は、vueがインストールされている環境で、vueからdefineComponentという関数を読み込んでいます。
二つ目は、カレントディレクトリに存在するuser.jsファイルからUserクラスを読み込んでいます。
三つめは、カレントディレクトリに存在するhello.jsファイル全体をHelloという名前で読み込んでいます。

このimport文の下で、defineComponentやUserは、通常の関数やクラスのように利用することができます。
また、hello.jsから読み込んだものについては、Hello.~という形で利用することができます。

JavaScriptで関数やクラスをexportで書きだす

外部ファイルから関数やクラスを読み込むにはimportを使います。
importで読み込まれる側のファイルでは、関数やクラスをexportを使って書きだす必要があります。

方法の一つとしては宣言時にexportをつけることで書きだす方法です。

export const SEED = 1234; // 定数の書き出し
export function hello(name) { // 関数の書き出し
  console.log('hello' + name);
};
export class User { 省略 }; // クラスの書き出し

また、宣言時以外にもexportを使うことで書きだすことはできます。

const SEED = 1234;
function hello(name) {
  console.log('hello' + name);
};
class User { 省略 };

export SEED;
export hello;
export User;

export default を使う

JavaScriptでは、デフォルトのexportを１ファイルに一つ設定できます。
方法はexportの後にdefaultをつけるだけです。
この場合、関数名やクラス名を省略することができます。

export default class { 省略 };

こうすると、import時に{}が不要になります。

import User from "./user.js";

また、importする側が名前を自由につけることができます。

import User2 from "./user.js";

終わり