Javascriptのimportとrequireの違い - Web開発における知見共有系ページ

Javascriptのimportとrequire
- import
- require
- 主な違い
- 例

Javascriptのimportとrequire

JavaScriptのimportとrequireは、モジュールを読み込むための方法ですが、それぞれ異なる目的と使い方があります。

import

- 使用方法:
ES6（ECMAScript 2015）以降のモジュールシステムで使用されます。
- 構文:

import { something } from 'module-name';
import * as moduleName from 'module-name';
import defaultExport from 'module-name';
import { something as alias } from 'module-name';

- 特徴:

静的インポート: モジュールがファイルの先頭で宣言され、コードが実行される前にすべてのインポートが解決されます。
ES6の標準: ES6+のJavaScriptで標準化されており、モダンなJavaScriptのプロジェクトで広く使用されています。
ツリ―シェイキング: 未使用のエクスポートを自動的に削除する最適化が可能です。

require

- 使用方法:
CommonJSモジュールシステムで使用され、Node.js環境で広く使われています。
- 構文:

const module = require('module-name');
const { something } = require('module-name');

- 特徴:

動的インポート: モジュールが必要なときにインポートされます。

たとえば、関数内でrequireを使用して条件付きでモジュールをインポートすることができます。

Node.jsの標準: Node.jsの標準モジュールシステムとして広く使用されており、サーバーサイドのJavaScriptで特に一般的です。
シンプル: モジュールを簡単にインポートする方法として歴史的に広く採用されています。

主な違い

1. モジュールシステム:

import: ES6モジュール
require: CommonJSモジュール

2. タイミング:

import: 静的インポート、コード実行前に解決
require: 動的インポート、実行時に解決

3. 互換性:

import: モダンなブラウザとJavaScriptランタイムでサポートされる。トランスパイラ（例: Babel）を使用して古い環境でも使えるようにすることが可能。
require: Node.js環境でネイティブにサポートされる。

例

// importの例
import { readFile } from 'fs/promises';

async function readFileAsync(filePath) {
  try {
    const data = await readFile(filePath, 'utf8');
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}
readFileAsync('example.txt');

// requireの例
const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(data);
});

どちらを使うべきかは、プロジェクトの設定や環境に依存します。
ブラウザ向けのモダンなアプリケーションではimportを使用し、Node.jsでのサーバーサイド開発ではrequireが一般的です。
しかし、Node.jsもES6モジュールをサポートしており、今後はimportがますます一般的になると思われます。