1. HOME
  2. プログラミング
  3. JavaScript
  4. 【JavaScript入門】export / importの使い方

【JavaScript入門】export / importの使い方

【JavaScript入門】export / importの使い方

こんにちは、さくちゃんです。
本日は、JavaScriptのexport / import の使い方について解説していきます。

突然ですが、JavaScriptでコードを書いているとき、こう思うことはないですか？

あーー変数が上書きされている。。。

この関数、他のJSファイルでも使いたいなー。

一度は思ったことがあるのではないでしょうか。

例えば下記のような「a.js」「b.js」の二つのコードの場合、変数nameがお互いに干渉し合ってしまい、a.jsでは正常に出力されるものの、b.jsではエラーになってしまいます。(constは上書きできないため)

<body>
	<h1 id="name"></h1>

	<script src="./js/a.js"></script>
	<script src="./js/b.js"></script>
</body>
// a.js
const name = "これはaのファイルです。";
console.log(name); // これはaのファイルです

//b.js
const name = "これはbのファイルです。";
console.log(name); // エラー

これを解消してくれるのが、新たにES2015(ES6) で導入された、export / importです。
これらを使用することで、上の例の変数の上書きを防止したり、共通で使用する関数の使い回しができるようになります。

ではこのexport / importについてわかりやすく解説していきます。

目次

JavaScriptのexport / importとは？

まずexport / importとは何かというと、exportは「書き出し」、importは「読み込み」です。
他のファイルで書いたJSコードをexportして、他のJSファイルでimportするという流れになります。

この時、これらのファイルを「モジュール」と言います。
このモジュール化を行うことで、機能の再利用や保守性、変数名の競合を防ぐことができます。

では実際に、export / importの書き方について解説していきます。

export / importの書き方

まずは先ほどの「a.js」「b.js」をモジュールとして扱う時は、HTMLのscriptタグのtypeに「module」と指定します。

<body>
	<h1 id="name"></h1>

	<script src="./js/a.js" type="module"></script>
	<script src="./js/b.js" type="module"></script>
</body>

これで各JSファイルをモジュールとして扱うことできます。
では次に、exportの書き方について見ていきます。

export

exportは下記のように書いていきます。

// a.js
// 変数
const name = "a.jsのnameです。";

// 関数
function nameFun(value) {
	console.log(value);
}

export { name, nameFun };

これで、a.jsファイルの変数名nameと、関数名nameFunの書き出しは完了です。
ちなみに、下記のように書くことも可能です。

// a.js
// 変数
export const name = "a.jsのnameです。";

// 関数
export function nameFun(value) {
	console.log(value);
}

このように書くと、最後のexport { }は不要です。

では書き出したa.jsファイルを、実際にb.jsへimportして見ましょう。

import

importは、下記のように書きます。

import { モジュール名 } from "ファイル名";

例えば、a.jsファイルをb.jsファイルにimportする時は、下記のようになります。

// b.js
import { name, nameFun } from "./a.js";

// importした変数、関数を使用
console.log(name);  // a.jsのnameです。
nameFun("これは関数です");  // これは関数です。

これでimportは完了です。
※この場合だと、a.jsはexportしか行っていないので、HTMLでscriptタグの記述は不要です。

これらのexport、importをそれぞれ「named export」、「named import」と言います。

実は、named export / named import とは別に、「default export」「default import」という書き方もあります。

この書き方についても見てみましょう。

default export / default importの書き方

default export

default exportは、下記のように書きます。

// a.js
// 変数
const name = "a.jsのnameです。";

export default name;

また、named exportで書いた下記のような書き方は、関数のみ使用することができます。

// これはできない
export default　const name = "a.jsのnameです。";

// 関数ならOK
export default function nameFun(value) {
	console.log(value);
}

default exportの注意点として、default exportは1モジュールに対して1回しか使用できないのと、exportされるのは、変数名(関数名)ではなくて、再評価された値(要は変数の値)がexportされるので、注意しましょう。

// default exportは1モジュールに対して1回しか使用できないのでこれはエラーになる
const name1 = "a.jsのname1です。";
const name2 = "a.jsのname2です。";

export default name1;
export default name2;


// default exportでexportされるのは、再評価された値
const name = "a.jsのnameです。";

export default name; // 実際には "a.jsのnameです。"がexportされる

次に、default importの書き方について見ていきます。

default import

default importは、下記のように書きます。

import name from "./a.js";

console.log(name);  // a.jsのnameです。

named importと違う点は、モジュール名を{ }で囲わないということだけです。

以上が、default export / default importの書き方でした。

まとめ

小規模な場合は特に影響はないと思いますが、大規模な開発の場合には、変数の上書きなどが発生しやすくなるので、export / import を活用して、関数の使い回しや変数の上書き防止をしていきましょう。

では本日は以上になります。

オススメの教材