2026.03.09

【JavaScript】モジュールをつかって大きく複雑になったファイルを分割しよう

takahide

おはようございます。タカヒデです。

「わわ…コード量が多くなりすぎて見づらいー。複数ファイルに分けてコードが書けたら良いのになあ…」

こんなことを思ったことはありませんか？

私はありません。

しかし参考書を見ていると、しばしばコードを管理しやすくするためにファイルを分割しています。

ということで本日は、「モジュールを使って、JavaScriptにおける『ファイルの分割』を行おう」という記事です。

こんな人にオススメ

JavaScriptにおけるファイル分割をできるようにしたい
モジュールにおける「import」「export」の記載方法を知りたい

ぜひ本記事を参考にしてください。

Contents

モジュールとは？
モジュールの使い方とは？
まとめ

モジュールとは？

ではさっそく、「モジュールとは何か？」というところから紹介していきましょう。

モジュールとは、「アプリを機能単位に分割する仕組み」のことです。

ちょっとこの言葉だけでは分かりづらいので図にしてみます。

モジュールを使用しない場合、左側の図のようにメインのJavaScriptファイルに「メインコード」「クラスA」「クラスB」とそれぞれ記載します。

一方モジュールを使用した場合、右側の図のようにメインのJavaScriptファイルに「メインコード」・classAのJavaScriptファイルに「クラスA」・classBのJavaScriptファイルに「クラスB」という形でそれぞれの機能ごとに分割して記載することができます。

当然ですが、大きくなったコードを分割できるため、

ファイルサイズを小さく
コードを明確にできる

という特徴があります。
1つのファイルにあれもこれも記載してあっても読みにくいですしね。

モジュールの使い方とは？

では、そんなモジュールの使い方を見ていきましょう。

モジュールを利用するには3つのSTEPが必要となります。

HTMLファイルに「type=“module”」を指定
呼び出されるJavaScriptファイルの要素に「export」命令を記載
呼び出すJavaScriptファイルに「import」命令を記載

たったこれだけです。
ではそれぞれのSTEPを見てみます。

①「type=”module”」を指定

まずは、HTMLファイルのscriptタグに「type=”module”」を指定します。

記載方法はこんな感じ。

<!-- 記載方法 -->

<script type="module" src="○○"></script>

<!-- 記載方法 -->

<script type="module" src="○○"></script>

実際に記載してみたのがこちらです。

<!-- HTML -->
<script type="module" src="script.js"></script>

<!-- HTML -->
<script type="module" src="script.js"></script>

この、「type=”module”」の記載がないとエラーになってしまうので注意してください。

②「export」命令を記載

続けて、呼び出されるJavaScriptファイルの要素に「export」命令を記載します。

ここでは、

呼び出すJavaScriptファイル：script.js
呼び出されるJavaScriptファイル：test.js

としています。

//記載方法

export 呼び出される要素

//記載方法

export 呼び出される要素

要素の先頭に「export」を記載するだけですね。

実際の記載例も見てみます。

//test.js
export function testFunction(num1, num2) {
    return num1 + num2;
};

//test.js
export function testFunction(num1, num2) {
    return num1 + num2;
};

このように、呼び出すことができる要素には、「関数」「クラス」「変数」「定数」などがあります。

この「testFunction」を「script.js」ファイルから呼び出してみましょう。

②「import」命令を記載

最期に、呼び出すJavaScriptファイルに「import」命令を記載します。

この「import」命令はファイルの先頭などにまとめて記載されるものです。

こちらも記載方法から見てみましょう。

//記載方法

import{呼び出す要素} from “パス”

//記載方法

import{呼び出す要素} from “パス”

具体的な記載例です。

//script.js
import { testFunction } from "./test.js";

console.log(testFunction(1, 2));

//実行結果：3

//script.js
import { testFunction } from "./test.js";

console.log(testFunction(1, 2));

//実行結果：3

「test.js」ファイルに記載していた「testFunction」関数を利用して「script.js」ファイルで「console.log」を実行できていることが分かりますね。

まとめ

以上が「モジュールを使って、JavaScriptにおける『ファイルの分割』を行おう」という記事でした。

まとめ

モジュールとは、アプリを機能単位に分割する仕組みのこと
ファイルサイズを小さくコードを明確にできる
モジュールを利用するには3つの記載が必要
- １：HTMLファイルに「type=“module”」を指定
- ２：呼び出されるJavaScriptファイルの要素に「export」命令を記載
- ３：呼び出すJavaScriptファイルに「import」命令を記載

この記事が誰かの参考になれば幸いです。

お疲れさまでした。

ABOUT ME