【 JavaScript / TypeScript 】requireとimportの使い分け #tailwindcss

はじめに

JavaScriptやTypeScriptでモジュールをインポートする際に、requireとimportのどちらを使うべきか迷ったことはありませんか？

この記事では、それぞれの違いや使い分けについて詳しく説明します。

requireとimportの違い

require

使用方法
const module = require('module-name');

環境
CommonJSモジュールシステムを使用しているNode.js環境で使用されます。

動作
モジュールを同期的に読み込みます。実行時にモジュールをインポートします。

ファイルの種類
通常、.jsファイルを読み込みますが、TypeScript（.ts）ファイルもコンパイル後の.jsファイルとして読み込むことができます。

import

使用方法
import module from 'module-name';
または
import { specificExport } from 'module-name';

環境
ECMAScriptモジュールシステム（ESM）を使用するモダンなJavaScript環境やTypeScript環境で使用されます。

動作
モジュールを静的に読み込みます。
コンパイル時にモジュールをインポートします。

ファイルの種類
.js、.ts、その他のファイルをインポートできますが、TypeScriptでは通常、importが推奨されます。

TypeScriptファイルの読み込み

TypeScriptファイルをJavaScriptファイルでrequireを使って読み込む場合、以下のような方法があります。

1. コンパイルされたJavaScriptを読み込む

TypeScriptファイル（.ts）をJavaScriptファイル（.js）にコンパイルし、その後requireで読み込みます。

const module = require('./dist/module.js'); // TypeScriptをJavaScriptにコンパイル後

2. ts-nodeを使用する

ts-nodeを使用して、TypeScriptファイルを直接実行できます。

require('ts-node').register();
const module = require('./src/module.ts');

3. ESMとトランスパイル

TypeScriptでESM（ES Modules）を使用し、import文を使用してモジュールをインポートするのが一般的です。

この場合、tscでコンパイルしてから実行するか、ts-nodeを使用して直接実行します。

import { colors } from './src/config/colors';

ESM / ES Modules
JavaScriptの公式なモジュールシステムで、ES6（ECMAScript 2015）で導入されました。ES Modulesは、コードの再利用性を高め、依存関係を明示的に管理しやすくするために設計です。

requireを使わないほうがいいのか？

requireを使うかどうかは、プロジェクトの設定や使用しているモジュールシステムに依存します。

requireを使う場合

CommonJSモジュールシステムを使用している場合

レガシーコードや既存のプロジェクトでrequireが広範に使用されている場合

importを使う場合

ES6モジュールシステムを使用している場合

モダンなJavaScript開発環境やTypeScriptプロジェクト

ブラウザ環境やフロントエンド開発

推奨事項

新しいプロジェクト
可能な限りimportを使用しましょう。

既存のプロジェクト
requireが広範に使用されている場合は急いで変更する必要はありませんが、新しいコードではimportを使用することを検討してください。

混在環境
ES6モジュールの使用を優先し、徐々にコードベースをモダンな標準に移行させることを目指しましょう。

具体例

TypeScriptファイル (colors.ts):

colors.ts

export const colors = {
  primary: 'red',
  secondary: 'blue'
};

JavaScriptファイル (tailwind.config.js):

tailwind.config.js

// ES6のimport文を使用
import { colors } from './src/config/colors';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: colors.primary,
        secondary: colors.secondary,
      },
    },
  },
  plugins: [],
};

まとめ

requireは特定の状況では便利ですが、可能であればimportを使用することが望ましいです。

これにより、モダンなJavaScriptの標準に従うことができ、将来的なメンテナンスや拡張が容易になります。

【 JavaScript / TypeScript 】requireとimportの使い分け