https://idea-hack.com/courses/lets-understand-the-tips-to-write-javascript-efficiently-such-as-organizing-the-timing-of-reading-javascript-dividing-files-and-generalizing-processing/lessons/how-to-use-import-export-syntax-that-modularizes-the-processing-with-javascript-and-divides-each-file/
https://idea-hack.com/courses/lets-understand-the-tips-to-write-javascript-efficiently-such-as-organizing-the-timing-of-reading-javascript-dividing-files-and-generalizing-processing/lessons/how-to-use-import-export-syntax-that-modularizes-the-processing-with-javascript-and-divides-each-file/

JavaScriptで処理をモジュール化させ、ファイルごとに分けるimport/export構文の使い方

JavaScriptで処理をモジュール化させ、ファイルを分割して管理する(ESモジュール)

JavaScriptでは処理をモジュール化させファイルを分割して管理する仕組みがあり、それを「ESモジュール」と呼びます。

ESモジュールを採用すると、巨大化したプログラムを1つの JavaScriptファイルに記述しておく必要がないため、作業の効率性の向上やコード量が多く可読性が低くなったために生じるバグ(凡ミス)を防ぐのにも役立ちます。

ファイルを分割するにはexport構文とimport構文をそれぞれ利用します。

構文

構文意味
export 【モジュール】モジュールを外部から参照可能なようにする
import 【モジュール】export済みの外部ファイル内の【モジュール】を参照して読み込む
export / import構文の仕様

Mexport 【モジュール】

exportはモジュールをエキスポート(外部から参照可能な様に公開)するための宣言文です。

export宣言を設定したデータがモジュールとして公開されます。

ここでの「データ」とは主に下記のことです。

  • クラス
  • オブジェクト
  • 変数
  • 定数
  • 関数

1つのファイルに複数のモジュールを書いておくことが可能で、下記のサンプルコードでは4種類のモジュールを登録しています。

JavaScript
//定数targetConstantをexport
export const targetConstant = 2;

//オブジェクトtargetObjectをexport
export const targetObject = {user_id: 1, name: 'Use A'};

//関数targetFunctionをexport
export function targetFunction() {
  console.log( 'target Task' );
}

//クラスtargetClassをexport
export class targetClass {
  constructor() {
  }
}

この様に、exportを複数宣言することで、1つのJavaScriptファイルから複数のモジュールをエキスポートすることができます。

また、1つのJavaScriptファイルに1つのモジュールだけを用意して、それを読み込む場合はexport 【モジュール名】ではなく、【export デフォルト】とすることでモジュールのエキスポートが完了します。

JavaScript
//関数targetFunctionをexport defailt
export default function targetFunction() {
  console.log( 'target Task' );
}

import 【モジュール】

importはモジュールをインポート(取り込む)ための宣言です。基本的には次の形式で取り込みます。

JavaScript
import {【モジュール名】} from 'JavascriptFileName.js';

import文のfromの中ではJavascriptFileName.js」の様に拡張子が必要です。例文ではファイル名のみを指定しています。これは読み込む外部モジュールファイルが同階層にあれば良いですが、階層が異なるファイルを読みこもうとする場合はパスを指定する必要があります。

いくつかの読み込み例を紹介しますので、コメントも合わせて参照してください。

JavaScript
// JavaScriptファイルからモジュールを読み込む
import {【モジュール名】} from 'JavascriptFileName.js';

//JavaScriptファイルからモジュールを複数読み込む
import { 【モジュール名1】, 【モジュール名2】} from 'JavascriptFileName.js';

//モジュール名1をモジュール名2という名前に変換して読み込む
import { 【モジュール名1】as【モジュール名2】} from 'JavascriptFileName.js';

//JavaScriptファイルから、exoprt defaultで定義されたモジュールを読み込む
import {【任意のモジュール名】} from 'JavascriptFileName.js';

//JavaScriptファイルから全てのモジュールを読み込み、モジュール名とする
import * as 【モジュール名】from 'JavascriptFileName.js';

importしたモジュールの実行方法

ここまでで、exportとimportの方法は理解いただけたと思います。

しかし、importしたモジュールをどうやって実行するかについて疑問を持っている人が多いと思います。

import文のパターン別にいくつか実行サンプルを紹介します。

import {【モジュール名】} from ‘JavascriptFileName.js’;

まずは、一般的な「1つのモジュールをimportして実行する」コード例を紹介します。

export文

JavaScript
//関数targetFunctionをexport
export function targetFunction() {
  console.log( 'target Task' );
}

import文

JavaScript
import { targetFunction } from 'JavascriptFileName.js';

importされたモジュールの実行

JavaScript
targetFunction();

export default targetFunctionのimport

次にexport defaultでexportされたimport文の実行方法を紹介します。

export文

JavaScript
//関数targetFunctionをexport defailt
export default function targetFunction() {
  console.log( 'target Task' );
}

import文

JavaScript
//JavaScriptファイルから、exoprt defaultで定義されたモジュールを読み込む
import { overrideTargetFunction } from 'JavascriptFileName.js';

importされたモジュールの実行

JavaScript
overrideTargetFunction();

export defaltでexportしたモジュールをimportする際は「任意のモジュール名を指定してモジュールをimportする」必要があることを念頭におくと理解しやすいでしょう。

ワイルドカードを使ったimport * as【モジュール名】…

一番使い方に関して困るのが、ワイルドカードを使って、外部ファイルの中でexportされたモジュールを一括でimportするimport * as【モジュール名】...ではないでしょうか。

こちらも、使い方を紹介します。

export文

JavaScript
//定数targetConstantをexport
export const targetConstant = 2;

//オブジェクトtargetObjectをexport
export const targetObject = {user_id: 1, name: 'Use A'};

//関数targetFunctionをexport
export function targetFunction() {
  console.log( 'target Task' );
}

//クラスtargetClassをexport
export class targetClass {
  constructor() {
  }
}

import文

JavaScript
//JavaScriptファイルから全てのモジュールを読み込み、モジュール名とする
import * as targetModules from 'JavascriptFileName.js';

importされたモジュールの実行

JavaScript
targetModules.targetConstant;
targetModules.targetObject;
new targetModules.targetClass;
targetModules.targetFunction();

この場合は「targetModules」が名前空間になり、ここを経由して各モジュールにアクセスする形になります。

インストラクター