サイトアイコン プログラマー(PG)・システムエンジニア(SE)になるための入門講座

importとrequireの違いとは？初心者向けにモジュールの読み込み方法を分かりやすく解説

pgse

importとrequireの違いとは？初心者向けにモジュールの読み込み方法を分かりやすく解説

結論として、importは「ECMAScript（ES Modules）のモジュールを読み込む新しい仕組み」、requireは「CommonJS形式のモジュールを読み込む従来の仕組み」です。

どちらもJavaScriptやNode.jsで別のファイルやライブラリを利用するために使われますが、対応するモジュール方式や読み込みのタイミングが異なります。

importとrequireとは？

importとは

importは、ECMAScript Modules（ESM）で採用されているモジュールの読み込み方法です。

現在のJavaScript開発では標準的な方法であり、ブラウザやNode.jsでも広く利用されています。

特徴 内容
モジュール形式 ES Modules（ESM）
利用環境 ブラウザ、Node.js
現在の推奨 〇

requireとは

requireは、Node.jsで長く利用されてきたCommonJS（CJS）のモジュール読み込み方法です。

現在でも多くの既存システムで利用されていますが、新規開発ではimportを採用するケースが増えています。

特徴 内容
モジュール形式 CommonJS（CJS）
利用環境 主にNode.js
現在の推奨 既存システムで利用

イメージで理解する

例 import require
会社の備品管理 事前に必要な備品を申請して準備する 必要になったタイミングで倉庫から持ってくる

importは「最初に必要なものを準備する」イメージです。

requireは「必要になったときに取りに行く」イメージと考えると理解しやすくなります。

主な違い

比較項目 import require
モジュール形式 ES Modules CommonJS
読み込み 静的（基本的に実行前に解析） 動的（実行時に読み込み）
ブラウザ対応 〇 ×（そのままでは利用不可）
Node.js 〇 〇
新規開発 推奨 既存資産で利用されることが多い

なぜ違いを理解する必要があるのか

JavaScriptやNode.jsでは、プロジェクトによってimportとrequireのどちらが使われているかが異なります。

既存システムの保守ではrequire、新規開発ではimportを扱うことが多いため、両方の違いを理解しておくことが重要です。

IT現場ではどんな場面で使われるのか

importが使われる例

requireが使われる例

初心者が混乱しやすいポイント

どちらもライブラリを読み込める

役割は同じですが、採用しているモジュール方式が異なります。

importは必ずファイルの先頭に書くことが多い

importは静的解析されるため、通常はファイルの先頭に記述します。

一方、requireは関数や条件分岐の中でも使用できます。

Node.jsでは設定が必要な場合がある

Node.jsでimportを利用するには、プロジェクトの設定（例：package.jsonでモジュール形式を指定するなど）が必要になる場合があります。

実際のIT現場での利用例

ReactやVue.jsなどのフロントエンド開発では、ほぼすべてimportが使用されています。

一方、Node.jsの保守案件ではrequireが残っていることも珍しくありません。

実務では、「新しく書くコードはimport」「既存システムはrequire」というケースをよく見かけます。

筆者が新人時代に失敗したこと

Node.jsの既存プロジェクトで、requireを使うべき箇所へimportを書いたことがありました。

その結果、モジュールの設定が一致せず、起動時にエラーが発生しました。

それ以来、開発を始める前に「このプロジェクトはES Modulesなのか、それともCommonJSなのか」を確認するようにしています。

業務でよくあるトラブル例

トラブル 原因
Cannot use import statement outside a module ES Modulesの設定になっていない
require is not defined ES Modules環境でrequireを使用している
モジュールが読み込めない 読み込み方法がプロジェクトと一致していない
ビルドエラー importとrequireを混在させている

原因の切り分け

  1. プロジェクトがES ModulesかCommonJSか確認する
  2. package.jsonの設定を確認する
  3. Node.jsのバージョンを確認する
  4. 読み込み方法が統一されているか確認する
  5. エラーメッセージを確認する

確認方法

GUIで確認する方法

Visual Studio Codeでは、エラー表示や補完機能からモジュール形式の問題を確認できます。

package.jsonの設定やファイル拡張子（.js、.mjsなど）も確認しましょう。

CUIで確認する方法

Node.jsでプログラムを実行すると、モジュール形式が一致しない場合はエラーメッセージが表示されます。

また、Node.jsのバージョンは次のコマンドで確認できます。

node -v

確認結果の見方

初心者がやりがちなミス

業務で上司へ報告するポイント

エスカレーションするタイミング

応用知識

Node.jsは現在、ES ModulesとCommonJSの両方をサポートしています。

方式 特徴
ES Modules（import） JavaScriptの標準仕様。新規開発で主流。
CommonJS（require） Node.jsで長く利用されてきた方式。既存システムで多く採用。

新規開発ではimportを採用するケースが増えていますが、保守業務ではrequireを扱う機会も多いため、両方の読み方を理解しておくと役立ちます。

関連するIT用語

よくある質問（FAQ）

importとrequireは同じ意味ですか？

どちらもモジュールを読み込むための仕組みですが、対応するモジュール形式や動作が異なります。

新規開発ではどちらを使えばよいですか？

現在はJavaScriptの標準仕様であるimport（ES Modules）を採用するケースが一般的です。

既存システムでrequireが使われていても問題ありませんか？

問題ありません。多くのNode.jsプロジェクトでは現在もCommonJSが利用されており、保守業務では頻繁に見かけます。

importとrequireを同じプロジェクトで使えますか？

利用できる場合もありますが、設定や互換性を考慮する必要があります。保守性を高めるためにも、基本的にはプロジェクト内でモジュール方式を統一することが推奨されます。

まとめ

importとrequireはどちらもモジュールを利用するための仕組みですが、採用しているモジュール方式が異なります。

迷ったときは、「新規開発ならimport」「既存のNode.jsプロジェクトならrequireが使われている可能性がある」と覚えておくと、実務でもスムーズに対応できます。

モバイルバージョンを終了