モジュールのメリット

モジュールを使うことで、以下のようなメリットがあります。

他のコードとの依存性が少なくなるので、変更や拡張がしやすくなる
モジュール毎に適切な変数名（名前空間）を割り当てることで、変数名の競合リスクを減らすことができる
どの機能がどこに書かれているのかが把握しやすくなる
汎用性の高いコードをモジュールにすることで再利用しやすくなる

モジュールの基本

// lib/Util.js
const AUTHOR = 'tappei nagatsuki'

export class Anime {
  constructor(title) {
    this.title = title;
  }

  callTitle() {
    return this.title;
  }
}

export class Workout {
  constructor(name) {
    this.name = name;
  }

  getTrainingVolume(weight, rep, set) {
    return `${}のトレーニングボリュームは${weight * rep * set}kgです`;
  };
}

モジュールは1つのファイルとして定義するのが基本です。

この例だとlib/Util.jsがそれです。

モジュールとして外部から使用するためにはexportキーワードを記述します。

ここでは、Animeクラス、Workoutクラスに記述していますが、それ以外に、

変数、定数、関数の宣言にも記述できます。

定数AUTHORにはexportの記述がないため外から参照することはできません。

// main.js
import { Anime, Workout } from './lib/Util'

const anime = new Anime('リゼロ');
console.log(anime.callTitle());
// リゼロ

const workout = new Workout('ベンチプレス');
console.log(workout.getTrainingVolume(100, 10, 5));
// ベンチプレスのトレーニングボリュームは5000kgです

別ファイルで定義されたモジュールをインポートするためにはimport命令が必要です。

ここでは、Animeクラス、Workoutクラスをインポートしています。

import命令の様々な記法

1. モジュール全体をまとめてインポート

// main2.js
import * as app from './lib/Util'

const anime = new app.Anime('リゼロ');
console.log(anime.callTitle());
// リゼロ

const workout = new app.Workout('ベンチプレス');
console.log(workout.getTrainingVolume(100, 10, 5));
// ベンチプレスのトレーニングボリュームは5000kgです

アスタリスク*でモジュール内の全ての要素をインポートできます。

この場合as句で別名を指定する必要があります。

2. モジュール内の個々の要素に別名を付与する

// main2.js
import { Anime as MyAnime, Workout as MyWorkout } from './lib/Util'

const anime = new MyAnime('リゼロ');
console.log(anime.callTitle());
// リゼロ

const workout = new MyWorkout('ベンチプレス');
console.log(workout.getTrainingVolume(100, 10, 5));
// ベンチプレスのトレーニングボリュームは5000kgです

モジュールの個々の要素に別名を付与することもできます。

3. デフォルトのエクスポートをインポートする

// lib/Anime.js

export default class {
  constructor(title) {
    this.title = title;
  }

  callTitle() {
    return this.title;
  }
}

モジュールに含まれる要素が1つであれば、デフォルトのエクスポートを宣言できます。

クラス名、関数名を書かずにdefaultキーワードをつけます。

// main_default.js
import Anime from './lib/Anime'

const anime = new Anime('リゼロ');
console.log(anime.callTitle());
// リゼロ

import命令により、Animeモジュールのデフォルトエクスポートに対して、Animeという名前でアクセスできます。

マッスル・メモリー

筋肉エンジニアのブログ

【js】ES6 モジュール