JavaScript モジュール インポート 比較

「require(x)」と「import x」のJavaScriptにおける違い

「require(x)」 と 「import x」 は、Node.jsやTypeScriptなどのJavaScript環境でモジュールをインポートするための手段です。両者にはいくつかの重要な違いがあります。

「require(x)」

• オブジェクト を返します。
• ファイルパス を引数として受け取ります。
• 同期的に モジュールをロードします。つまり、モジュールがロードされるまでスクリプトの実行が一時停止されます。
• CommonJS モジュールシステムに基づいています。

例

const fs = require('fs');

「import x」

• モジュールそのもの をインポートします。
• 非同期的に モジュールをロードすることが可能ですが、通常は同期的にロードされます。
• ES Modules (ESM) システムに基づいています。

import fs from 'fs';

Node.jsでの使用

• ESM
  Node.js 14以降では、--experimental-modules フラグを付けて実行することでESMを使用できます。
• デフォルト
  Node.jsはCommonJSモジュールシステムを使用するため、デフォルトでは「require(x)」を使用します。

TypeScriptでの使用

• CommonJS
  TypeScriptはCommonJSモジュールシステムもサポートしており、「require(x)」も使用できますが、ESMの使用が推奨されています。
• デフォルト
  TypeScriptはESMをサポートしているため、デフォルトでは「import x」を使用します。

どちらを使うべきか

• 既存のプロジェクト
  既存のコードベースに合わせて選択してください。
• 新しいプロジェクト
  ESMを使用することを推奨します。

「require(x)」と「import x」の例と比較

// CommonJS
const fs = require('fs');

fs.readFile('file.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

• 非同期処理のため、コールバック関数を使用して結果を処理します。
• fs.readFile メソッドを使用してファイルを読み込みます。
• require('fs') で fs モジュールをインポートします。

// ES Modules
import fs from 'fs';

fs.promises.readFile('file.txt', 'utf8')
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

• Promise を使用して非同期処理を管理します。
• import fs from 'fs'; で fs モジュールをインポートします。

比較

• モジュールシステム
  「require(x)」は CommonJS モジュールシステムに基づいています。「import x」は ES Modules システムに基づいています。
• 非同期処理
  「require(x)」ではコールバック関数を使用します。「import x」では Promise を使用します。
• 同期性
  「require(x)」は同期的にモジュールをロードします。「import x」は非同期的にロードすることも可能ですが、通常は同期的にロードされます。
• インポート方法
  「require(x)」はファイルパスを指定し、オブジェクトを返します。「import x」はモジュール名を指定し、モジュールそのものをインポートします。

Dynamic Import

• 特徴
  
  • 非同期的にモジュールをロードします。
  • モジュールをオンデマンドでロードすることができ、コードの分割や遅延読み込みに役立ちます。
• 構文
  import()

const button = document.getElementById('myButton');

button.addEventListener('click', async () => {
  const module = await import('./myModule');
  module.doSomething();
});

SystemJS

• 特徴
  
  • さまざまなモジュールフォーマット（CommonJS、ES Modules、AMDなど）をサポートします。
  • カスタムローダーを作成することができます。
• ライブラリ
  SystemJS

System.import('./myModule')
  .then(module => {
    module.doSomething();
  })
  .catch(err => {
    console.error(err);
  });

Parcel

• 特徴
  
  • 自動的にモジュールを解決し、バンドルします。
  • さまざまなモジュールフォーマットをサポートします。
• バンドラー
  Parcel

• Parcelを実行すると、自動的にモジュールをインポートし、バンドルします。
• Parcelの設定ファイル（package.json）でモジュールを指定します。

Webpack

• 特徴
  
  • 柔軟なモジュールバンドリングを提供します。
• バンドラー
  Webpack

• Webpackの設定ファイル（webpack.config.js）でモジュールを指定します。