【JavaScript】exportと importを使ったモジュール化【module】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

JavaScriptの解説シリーズです。

今回はexportとimportを使ったモジュール化について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

モジュール化が何かわかる
importとexportを使って他のJavaScriptファイルの関数・変数が呼び出せる

大規模システムになると、同じ記述を何度もするのは非効率！
何度も使うものはモジュール化しよう！

importとexportを使ってモジュール化しよう
実際にモジュール化してみよう！
まとめ

importとexportを使ってモジュール化しよう

モジュール化とは

モジュールというのは、部品やパーツという意味です。

例えば、データを取得する関数を複数のJavaScriptファイルで使用する場合
すべてのファイルでイチからデータを取得する関数を叩くよりも、
データ取得モジュールを1つ作り、それを各ファイルで呼び出すほうが
効率的かつ、保守性が高いシステムとなります。

このように、何度も使用する処理やデータをまとめることをモジュール化といいます。

モジュール化のメリットはたくさんあるけど、1番は保守性の向上だよ！
例えば上記のデータ取得処理に変更があった場合に、モジュールを改修するだけで済みますが、
全ファイルでベタ書きしていた場合、それら全てに変更を加える必要があって非効率だよ！

exportとは

exportとは、モジュールを公開するための記述です。
この記述をすることで、他のJavaScriptファイルから
モジュールを読み込むことが出来るようになります。

関数をexportする

export function 関数名(引数名) {
    // 処理
}

変数をexportする

export const 変数名 = "値";

クラスをexportする

export class クラス名 {
    constructor(引数) {
        // 初期処理
    }
}

まとめてexportする

function 関数名(引数名) {
    // 処理
}

const 変数名 = "値";

class クラス名 {
    constructor(引数) {
        // 初期処理
    }
}

// エクスポートしたいものをまとめて指定
export {関数名, 変数名, クラス名}

1つの機能のみをexportする

export default エクスポートしたいもの

これは、1つの機能だけexportする場合の記述です。
ケースバイケースですが、モジュール・部品という意味ではこの使い方が比較的好まれます。

これでモジュールを読み込む準備ができたよ！

importとは

importとはモジュールを読み込むための宣言です

モジュールをそのままimportする

import { モジュール名 } from "./モジュールのファイル名"

同一ディレクトリにある場合もパスに ./ をつけることは必須だよ！

モジュールを複数importする

import { モジュール名1, モジュール名2 } from "./モジュールのファイル名"

別名でimportする

import * as 別名 from "./モジュールのファイル名"

// モジュールの呼び出し
別名.モジュール名

超重要！：HTML側の記述

moduleをimportするには、scriptタグにtype=”module”と記述する必要があります。

exportするファイルは記述しなくてOKだよ！

実際にモジュール化してみよう！

まず大前提として対象ファイルはこのように、
すべて同じディレクトリに格納されています。

index.html → HTMLファイル
myModule.js → モジュール化してexportするJavaScriptファイル
script.js → モジュールを読み込む(import)するJavaScriptファイル

■ myModule/js

const myMessage = "こんにちは！";

const myFunction = (message, name) => {
  alert(message + name + "です!");
};

// messageとmyFunctionをエクスポートする
export { myMessage, myFunction };

■ script.js

// myModule.jsの「すべてのexport」を「modules」という名前でインポート
import * as modules from "./myModule.js";

// modules・・・つまり、myModule.jsのmyFunction関数を呼び出し、
// 第一引数にmyMessageを渡す
modules.myFunction(modules.myMessage, "サメハック");

■ index.html

<html>
  <body>
    <!-- script.jsを外部モジュールをインポート出来るようにして読み込み -->
    <script type="module" src="./script.js"></script>
  </body>
</html>

このようにscript.jsが外部モジュールである
myModule.jsの関数と変数を使用することが出来ました。

外部モジュールのimportが理解できてえらい！

まとめ

モジュール化・・・何度も使用する処理やデータをまとめること
export・・・モジュールを公開するための宣言
import・・・外部モジュールを読み込むための宣言
importを使用するにはscriptタグにtype=”module”の宣言が必要

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram