importとrequireの違いを徹底解説：現場で迷わないモジュールの選び方

---

importとrequireの違いを徹底解説：現場で迷わないモジュールの選び方

プログラミングを始めたばかりの人にとって、「import」と「require」は似ているようで別の道具です。この二つは同じ目的の道具ではなく、使える場所や書き方、挙動が異なるため、混同するとエラーや動作の遅さ、思わぬ挙動の原因になります。この記事では、中学生にもわかる丁寧な言葉で、なぜこの二つが共存しているのか、どう使い分ければよいのかを段階的に解説します。

まず結論から言うと、ESモジュール（import/export）は現代の標準で、ブラウザと最新のNode.jsの両方で公式に推奨される仕組みです。一方、CommonJS（require/module.exports）は従来のモジュール方式で、特に古いNode.jsの環境や特定のツールチェーンでまだ使われています。この違いを理解することで、今後の学習がぐっと楽になります。以下では、実際の使い方、動作の違い、そして設定のポイントを段落ごとに詳しく解説します。

ポイントは次の通りです。
・importはトップレベルの書き方で読み込みを行い、モジュールの境界を厳密に管理します。
・requireは関数として呼び出し、条件やタイミングで動的に読み込むことができる場合があります。
・実行環境の設定次第で、どちらを使うべきかが変わります。
・互換性の問題を避けるには、プロジェクトのルールを最初に決めておくことが大切です。

able>項目importrequire基本書き方import something from 'module-name'require('module-name')実行タイミング静的読み込み（解析時に決定）動的読み込みが容易エコシステム適合最新ツールとブラウザの標準古い環境や一部ツールで安定ble>

現場での使い分けと注意点

現場での使い分けは、ただ書き方を覚えるだけでは終わりません。大切なのはプロジェクトの方針を最初に決め、統一した書き方を守ることです。例えば新しくモジュールを追加する場合、ブラウザ対応が必要ならimportを選ぶのが無難です。また、ツールチェーンの制約がある場合は動作環境に応じて適切に読み込み方法を選びます。
未対応の箇所で無理にimportを使うと、ビルドがこける原因になることがあります。

ピックアップ解説

休憩中の会話から始めます。友だちのミカは import と require の違いをあまり理解していません。私はコーヒーを一口すすりながら、import は箱をきちんと閉じてから使う感じ。モジュールの中身が外から決まる勢いで読み込まれると伝えます。彼女は でもその箱はどこに置くのと聞きます。私は 箱はブラウザでもNodeでも共通の土台に置くんだ。 type module にしてESモジュールを使えば、静的に読み込むことができるしトップレベル await も使えると伝えます。さらに CommonJS の require は関数として呼ぶタイプで、必要な時にだけ読み込む柔軟さがある反面、環境依存の差が生まれやすいと話します。ミカは つまり最初に方針を決めておけばいいのね と理解を深め、二人の雑談はモジュールの世界の入口を開く一歩となりました。

---