ESモジュールの魅力とGalp5での活用方法

2024年6月23日 2024年6月23日 12分27秒

タスラ t3l

今回は、JavaScriptのESモジュール（ECMAScript Modules, ESM）について、解説しその魅力をGulp5で活用していけるように自分の備忘も兼ねて紹介していきたいとおもいます。

1 ESモジュールとは？
- 1.1 ESモジュールの歴史
2 ESモジュールの基本的な使い方
- 2.1 モジュールのエクスポート
- 2.2 モジュールのインポート
3 ESモジュールのメリット
4 Gulp5でESモジュールを使用するメリット
5 複雑なプロジェクトの構造化
6 再利用性の高いコード
7 ESモジュールのちょっとしたおまけ知識
8 まとめ

ESモジュールとは？

ESモジュールは、JavaScriptの公式なモジュールシステムで、モダンなJavaScript開発において欠かせない要素です。
2015年にES6（ECMAScript 2015）で導入され、以降、JavaScriptの標準的なモジュールシステムとして広く使用されています。

自分は存在は知っていたのですが、今回改めて調べるまで全然内容を知りませんでした。。。

ESモジュールの歴史

JavaScriptには、元々標準のモジュールシステムではなかったため、Node.jsのCommonJSやAMD（Asynchronous Module Definition）など、いくつかのモジュールシステムが提案され、使用されてきました。

これらのモジュールシステムの利点を取り入れつつ、JavaScriptの標準仕様として策定されたのがESモジュールです。

ESモジュールの基本的な使い方

ESモジュールの基本的な使い方について説明します。まず、ファイルの拡張子を.mjsに変更し、インポートとエクスポートの文法を使います。

モジュールのエクスポート

モジュール内で定義された関数や変数を他のファイルで使用できるようにするには、exportを使ってエクスポートします。

// math.mjs
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

モジュールのインポート

エクスポートされたモジュールを他のファイルで使用するには、importを使います。

javascriptコードをコピーする// main.mjs
import { add, subtract } from './math.mjs';

console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2

ESモジュールのメリット

ESモジュールには多くのメリットがあります。ここでは、その主なポイントを紹介します。

標準的なモジュールシステムの使用

ESモジュールはJavaScriptの公式なモジュールシステムであり、他のJavaScriptプロジェクトやツールとの互換性が高いです。

ツリーシェイキング

ESモジュールを使用すると、ビルドツールが未使用のコードを除去（ツリーシェイキング）しやすくなり、出力ファイルのサイズが小さくなります。

モジュール間の明確な依存関係

モジュール間の依存関係が明確に定義されているため、コードの可読性とメンテナンス性が向上します。

非同期のモジュール読み込み

ESモジュールは非同期に読み込むことができ、パフォーマンスが向上します。これは特にネットワークを介したモジュールの読み込みに有利です。

スコープの分離

モジュールごとにスコープが分離されるため、グローバル変数の競合を防ぎ、コードの安全性が高まります。

Gulp5でESモジュールを使用するメリット

Gulp 5でESモジュールを使用することには特に多くのメリットがあります。
以下にその理由を詳しく説明します。

モダンな開発手法との親和性

Gulp 5は、モダンなJavaScript開発環境と高い親和性を持っています。
ESモジュールを使用することで、他の最新ツールやライブラリとシームレスに統合でき、効率的な開発が可能です。

プラグインの利用が簡単

ESモジュールを使用することで、Gulpプラグインのインポートが直感的かつ簡単になります。
以下の例のように、プラグインを個別のモジュールとして管理できます。

// styles.mjs
import gulp from 'gulp';
import sass from 'gulp-sass';

export const styles = () => {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
};

非同期タスクのサポート

Gulp5でESモジュールを使用することで、非同期タスクの定義がより簡単になります。非同期処理を含むタスクを自然に書くことができます。

// gulpfile.mjs
import gulp from 'gulp';
import del from 'del';

const clean = async () => {
  await del(['dist']);
};

const build = gulp.series(clean, gulp.parallel(styles, scripts));

export default build;

他のモダンツールとの統合

Gulp5とESモジュールを組み合わせることで、WebpackやRollupなどの他のビルドツールと簡単に統合できます。
個人的にはあまり使用しないですが、これにより、複雑なビルドプロセスも効率的に管理できます。

// webpack.config.mjs
import path from 'path';

export default {
  entry: './src/index.mjs',
  output: {
    filename: 'bundle.js',
    path: path.resolve('dist'),
  },
};

// gulpfile.mjs
import gulp from 'gulp';
import webpack from 'webpack-stream';

const bundle = () => {
  return gulp.src('src/index.mjs')
    .pipe(webpack(require('./webpack.config.mjs')))
    .pipe(gulp.dest('dist'));
};

export default bundle;

複雑なプロジェクトの構造化

複数のタスクや多くのファイルを含むプロジェクトでは、モジュール化が非常に有効です。モジュール化することで、各タスクを個別のファイルとして管理でき、プロジェクト全体の構造が明確になります。
以下の例では、スタイル処理とスクリプト処理のタスクをそれぞれ別のモジュールに分割しています。

// styles.mjs
import gulp from 'gulp';
import sass from 'gulp-sass';

export const styles = () => {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
};

// scripts.mjs
import gulp from 'gulp';
import uglify from 'gulp-uglify';

export const scripts = () => {
  return gulp.src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
};

// gulpfile.mjs
import gulp from 'gulp';
import { styles } from './styles.mjs';
import { scripts } from './scripts.mjs';

export default gulp.series(styles, scripts);

再利用性の高いコード

共通の機能やユーティリティ関数をモジュール化し、プロジェクト全体で再利用できますので、れにより、コードの重複を減らして保守性を高めることができます。

// utils.mjs
export const logError = (error) => {
  console.error(error);
};

// gulpfile.mjs
import gulp from 'gulp';
import { logError } from './utils.mjs';

const task = () => {
  return gulp.src('src/js/**/*.js')
    .pipe(somePlugin().on('error', logError))
    .pipe(gulp.dest('dist/js'));
};

export default task;

ESモジュールのちょっとしたおまけ知識

ブラウザでの使用

ブラウザでもESモジュールを使用することができます。以下のように、<script type="module">タグを使ってモジュールを読み込みます。

<script type="module">
  import { add } from './math.mjs';
  console.log(add(2, 3)); // 5
</script>

トランスパイルとバンドリング

モダンなブラウザではESモジュールがネイティブにサポートされていますが、古いブラウザや環境ではサポートされていない場合があります。そのため、BabelやWebpackなどのツールを使ってトランスパイルやバンドリングを行うことが一般的のようです。

名前空間の分離

ESモジュールは名前空間を分離するため、グローバルスコープの汚染を防ぎます。
これにより大規模なプロジェクトでも安全にコーディングすることができます。

まとめ

ESモジュールは、モダンなJavaScript開発において非常に重要な要素です。特にGulp 5でESモジュールを使用することで、コードの可読性、再利用性、パフォーマンスを向上させることができます。
プロジェクトの規模や複雑さに関わらず、ESモジュールを積極的に取り入れることで、開発効率が大きく向上するでしょう。
今後のプロジェクトでは、ぜひESモジュールを取り入れてみてください。

以上、ESモジュールについての解説でした。