JavaScriptのモジュール入門【import・export解説】

JavaScript モジュールとは？

プログラムが大きくなると、1つのファイルにすべてのコードを書くのは管理しにくくなります。モジュール（module）を使うと、コードを複数のファイルに分割して管理できます。

export でファイルから値を公開し、import で別のファイルから読み込みます。

named export（名前付きエクスポート）

// math.js
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }
export const PI = 3.14159;

// main.js
import { add, multiply, PI } from './math.js';
console.log(add(3, 5));      // 8
console.log(multiply(3, 5)); // 15
console.log(PI);             // 3.14159

🔥 localStorage入門で実践してみましょう。

default export（デフォルトエクスポート）

ファイルから1つだけエクスポートするときは default を使います。

// greet.js
export default function greet(name) {
  return \`こんにちは、\${name}さん！\`;
}

// main.js（名前は自由につけられる）
import greet from './greet.js';
console.log(greet('田中')); // こんにちは、田中さん！

💡 DOM操作入門で基礎を確認できます。

HTMLでモジュールを使う

<!-- type="module" を指定する -->
<script type="module" src="main.js"></script>

type="module" を指定すると、そのスクリプトでimport/exportが使えます。

🔗 あわせてループ処理入門もチェックしてみましょう。

モジュールを使うメリット

モジュールを使うと、コードを複数のファイルに分割できます。なぜ分割するのでしょうか。メリットを紹介します。

メリット1：コードが整理される

1つのファイルに何百行もコードを書くと、どこに何があるかわからなくなります。機能ごとにファイルを分ければ、「計算処理はcalc.jsに」「表示処理はdisplay.jsに」と整理できます。

メリット2：再利用しやすい

一度作った関数をモジュールにしておけば、別のプロジェクトでもimportするだけで使えます。毎回同じコードを書き直す必要がありません。

メリット3：名前の衝突を防げる

モジュールを使わないと、すべての変数や関数がグローバル（全体）に公開されます。別のファイルで同じ名前の変数を使うと上書きされてしまいます。モジュールなら、exportしたものだけが外から見えるので安全です。

関数の基本を復習したい人は「JavaScript関数入門」を読んでおきましょう。モジュールでは関数をexport/importすることが多いです。

exportとimportの書き方

モジュールの基本は「export（エクスポート）」と「import（インポート）」です。

名前付きエクスポート

関数や変数の前にexportをつけると、他のファイルから使えるようになります。1つのファイルから複数のものをエクスポートできます。

インポートする側では、波かっこの中にエクスポートされた名前を書きます。名前は正確に一致させる必要があります。

デフォルトエクスポート

1つのファイルから「メインの機能」を1つだけエクスポートするときに使います。export defaultと書きます。インポートする側では波かっこなしで、好きな名前をつけて受け取れます。

使い分けの目安は次の通りです。ファイルに1つだけメインの機能があるならデフォルトエクスポート。複数の関数や定数をまとめて公開するなら名前付きエクスポートを使いましょう。

モジュールを使うための設定

ブラウザでモジュールを使うには、scriptタグにtype="module"を追加する必要があります。これがないと、importやexportが使えずエラーになります。

また、モジュールを使うHTMLファイルはサーバー経由で開く必要があります。ファイルをダブルクリックして開く方法（file://プロトコル）ではモジュールが動きません。VSCodeの「Live Server」拡張機能を使えば、簡単にローカルサーバーを起動できます。

モジュールでよくあるミス

ミス1：type="module"を忘れる

scriptタグにtype="module"がないと、importやexportが使えません。「Unexpected token 'import'」というエラーが出たら、まずこれを確認しましょう。

ミス2：ファイルパスの拡張子を省略する

ブラウザのモジュールでは、importするファイルのパスに拡張子（.js）が必要です。「./utils」ではなく「./utils.js」と書きましょう。

ミス3：名前付きエクスポートとデフォルトエクスポートを混同する

名前付きエクスポートは波かっこで受け取り、デフォルトエクスポートは波かっこなしで受け取ります。間違えるとundefinedになります。

ミス4：循環参照になる

ファイルAがファイルBをimportし、ファイルBがファイルAをimportすると、循環参照になります。エラーにはなりませんが、予期しない動作になることがあります。ファイルの依存関係は一方向にしましょう。

JavaScriptの基本がまだ不安な人は「JavaScriptとは？初心者向けにわかりやすく解説」を先に読んでおきましょう。モジュールは中級者向けの機能ですが、基本がしっかりわかっていれば十分に理解できるはずです。挑戦してみましょう。

まとめ

モジュールを使いこなすと、大規模なプログラムが整理しやすくなります。レッスンでさらに実践的な使い方を学んでみましょう。