JavaScriptのES Modules入門！importとexportの基本と使い方を初心者向けに徹底解説

1. ES Modulesとは何か

1. ES Modulesとは何か

JavaScriptのES Modulesとは、プログラムを複数のファイルに分けて管理するための仕組みです。大きなプログラムを一つのファイルに全部書いてしまうと、読みにくくなり、修正も大変になります。そこで、機能ごとにファイルを分けて整理する方法が必要になります。

ES Modulesは、ECMAScriptというJavaScriptの公式仕様で定められたモジュール機能です。モジュールとは、部品という意味です。つまり、JavaScriptのコードを部品として分けて、必要な部品だけを読み込むことができる仕組みがES Modulesです。

Web開発やフロントエンド開発、Node.js開発でも、importやexportを使ったモジュール管理は必須の知識です。初心者のうちからES Modulesの基本を理解しておくことで、実務レベルのJavaScriptに近づくことができます。

2. exportの基本的な使い方

2. exportの基本的な使い方

exportは、自分のファイルの中で作った機能を外に公開するためのキーワードです。公開とは、他のファイルから使えるようにするという意味です。

例えば、計算をする関数を別のファイルに用意してみましょう。

export function add(a, b) {
  return a + b;
}

このようにfunctionの前にexportを付けることで、このadd関数は他のJavaScriptファイルからimportして使えるようになります。これがES Modulesの基本です。

JavaScript初心者の方は、exportは外に出す合図と覚えておくと分かりやすいです。

3. importの基本的な使い方

3. importの基本的な使い方

importは、他のファイルでexportされた機能を読み込むためのキーワードです。読み込むとは、別ファイルの部品を使えるようにすることです。

import { add } from "./calc.js";

const result = add(3, 5);
console.log(result);

8

fromの後には、読み込むファイルのパスを書きます。ここではcalc.jsというファイルからadd関数を読み込んでいます。

中括弧で囲んでいるのは、名前付きエクスポートと呼ばれる形式だからです。名前付きとは、exportした名前をそのまま指定して読み込む方法です。

4. デフォルトエクスポートの使い方

4. デフォルトエクスポートの使い方

exportにはもう一つ、defaultという書き方があります。これをデフォルトエクスポートと呼びます。デフォルトとは標準という意味です。

export default function greet(name) {
  return "こんにちは、" + name + "さん";
}

これを読み込む側では、次のように書きます。

import greet from "./greet.js";

console.log(greet("太郎"));

こんにちは、太郎さん

デフォルトエクスポートは中括弧を使いません。名前は自由に付けられるという特徴があります。これもJavaScriptのES Modulesの重要なポイントです。

5. 複数の値をexportする方法

5. 複数の値をexportする方法

一つのファイルから複数の関数や変数をexportすることもできます。実際のWebアプリ開発では、この使い方がとても多いです。

function multiply(a, b) {
  return a * b;
}

const pi = 3.14;

export { multiply, pi };

読み込む側では次のようにします。

import { multiply, pi } from "./math.js";

console.log(multiply(4, 5));
console.log(pi);

20
3.14

このように、JavaScriptのimportとexportを使うことで、コードを整理しやすくなります。プログラムが大きくなっても管理しやすいという大きなメリットがあります。

6. HTMLでES Modulesを使う方法

6. HTMLでES Modulesを使う方法

ブラウザでES Modulesを使う場合は、scriptタグにtype属性を指定します。これを忘れるとimportは使えません。

<script type="module" src="main.js"></script>

typeにmoduleと書くことで、このJavaScriptはモジュールとして読み込まれます。これがES Modulesをブラウザで使うための基本設定です。

JavaScript初心者の方は、なぜ動かないのか分からず悩むことが多いですが、type属性の指定を確認することが大切です。

7. ES Modulesを使うメリットと注意点

7. ES Modulesを使うメリットと注意点

ES Modulesを使うメリットは、コードの再利用がしやすいこと、可読性が高まること、チーム開発で分担しやすいことです。大規模なWeb開発やフロントエンド開発では必須の知識です。

注意点としては、ファイルパスを正しく書くこと、ブラウザではローカルファイルを直接開くとエラーになる場合があることです。その場合は簡易サーバーを使って実行します。

JavaScriptのimport exportを正しく理解することは、モダンJavaScriptを学ぶ上でとても重要です。ES Modulesは現在の標準的なモジュール管理方法ですので、初心者のうちからしっかりと基本を身につけておきましょう。

まとめ

まとめ

今回は、JavaScriptのES Modules入門として、importとexportの基本と使い方を中心に解説してきました。ES Modulesとは、JavaScriptのコードを部品化し、複数のファイルに分割して管理するための標準的なモジュール機能です。大規模なWeb開発やフロントエンド開発、Node環境での開発においても、importとexportは欠かせない重要な知識です。

まず理解しておきたいのは、exportは機能を外に公開するためのキーワードであり、importは公開された機能を読み込むためのキーワードだという点です。JavaScriptのモジュール管理では、どの機能を公開し、どの機能を内部専用にするのかを明確にすることが、保守性の高いプログラムを書く第一歩になります。

名前付きエクスポートでは、exportした名前をそのまま中括弧で指定してimportします。一方、デフォルトエクスポートでは、中括弧を使わずに自由な名前で読み込むことができます。この違いを正しく理解することが、JavaScriptのimport exportを使いこなす上で非常に重要です。

また、複数の関数や変数をまとめてexportする方法も学びました。実際のJavaScript開発では、一つのモジュールに関連する処理をまとめて定義し、必要な部分だけをimportする設計がよく使われます。これにより、コードの再利用性が高まり、可読性や拡張性も向上します。

さらに、HTMLでES Modulesを使用する場合は、scriptタグにtype属性としてmoduleを指定する必要があることも確認しました。この設定を忘れるとimportが使えず、エラーの原因になります。JavaScript初心者にとってはつまずきやすいポイントですが、基本を押さえておけば確実に対応できます。

ES Modulesは、モダンJavaScriptにおける標準的なモジュール管理手法です。従来のスクリプトを単一ファイルに書く方法とは異なり、機能ごとに分割し、必要な機能だけを読み込む設計思想が根本にあります。この考え方を身につけることで、より実践的なJavaScriptプログラミングに近づくことができます。

理解を深めるサンプルプログラム

ここで、JavaScriptのES Modulesの基本を復習するためのサンプルプログラムを確認しましょう。計算機能を持つモジュールを作成し、それを別ファイルでimportして利用する流れです。

export function subtract(a, b) {
  return a - b;
}

export const version = "1.0.0";

上記のようにexportを使って関数と定数を公開します。次に、別ファイルでimportします。

import { subtract, version } from "./calc.js";

console.log(subtract(10, 3));
console.log("version:", version);

7
version: 1.0.0

このように、JavaScriptのimportとexportを使うことで、機能ごとに整理されたコードを書くことができます。ES Modulesを理解することは、効率的なプログラム設計、保守性の高いコード作成、そして実務で通用するスキルの習得につながります。