【JavaScript】モジュール④　モジュールの特徴


#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/f32dd207a0575d268bc9


#目的

* モジュールについての理解を深める

#本題
###1.モジュールの特徴

####前提

`````index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const span = document.createElement('span');
        span.textContent = decodeURI(window.location.pathname);
        document.body.appendChild(span);
    </script>
    <h2>編集用ファイル</h2>
    <a href="../end" style="font-weight: 600; color: red;">
        完成ファイルへ
    </a>

    <div>
        <a href="../../" style="margin-right: 10px;">
            セクションへ
        </a>

        <a href="../../../">
            コースへ
        </a>
    </div>
    <!--スクリプトファイルでmain.jsを読みこむ-->
    <script src="main.js" defer></script>
    <!--typeモジュールでmoduleBを読みこむ-->
    <script type="module" src="moduleB.js"></script>
</body>

</html>
``````

####例1

type = moduleという属性をつけた場合には後に続く読み込みのファイルは**非同期**になる

````index.html
<body>

:
<!--中略-->
:

    <!-- h1 タグを生成 -->
    <h1>モジュールレクチャー</h1>
    <script src="main.js" defer></script>
    <script type="module" src="moduleB.js"></script>
</body>
``````

````main.js
// documentのquerySelectorというメソッドを使ってh1タグの要素を取得
const h1 = document.querySelector("h1");
// documentというオブジェクトの中にHTMLのタグが格納されている
// よってこれらのオブジェクトにアクセスすることで値が取得できる
const text = h1.textContent;
// モジュールレクチャーと表示される
console.log(text);
``````

####例2

読み込む順番を入れ替える

````index.html
<body>
:
<!--中略-->
:
    <!-- textContentが読み込まれなくなる（main.jsが読み込まれたタイミングではまだh1タグが読み込まれていないから） -->
    <!-- scriptタグが見つかった時点で読み込まれる　＝　同期的な処理 -->
    <!-- 非同期にしたい場合にはdeferという属性を付与する -->
    <script src="main.js" defer ></script>
    <!-- main.jsが読み込まれモジュールレクチャーと出力される -->
    <h1>モジュールレクチャー</h1>
    <script type="module" src="moduleB.js"></script>
</body>
`````

####例3

type = moduleと書くことでdeferが付与されていることになる

````index.html
<body>
:
<!--中略-->
:
    <script src="main.js" defer ></script>
    <!-- h1タグより先に読み込む -->
    <script type="module" src="moduleB.js"></script>
    <h1>モジュールレクチャー</h1>
</body>
``````

`````moduleB.js
// main.jsで書いた処理をmoduleBで書いても同様の出力結果が得られる
const h1 = document.querySelector("h1");
const text = h1.textContent;
console.log(text);
`````


####例4

main.jsは（モジュールでないものは）何回も読み込むとその回数分だけ実行されるが、モジュールは1回のみ読み込まれる

````main.js
// main.jsが読み込まれた時に出力
console.log("main.js")
`````

`````moduleB.js
// moduleB.jsが読み込まれた時に出力
console.log("moduleB.js")
`````

````index.html
<body>
:
<!--中略-->
:
    <!-- コンソールで3度出力される -->
    <script src="main.js" defer ></script>
    <script src="main.js" defer ></script>
    <script src="main.js" defer ></script>
    <!-- 一度しか出力されない -->
    <script type="module" src="moduleB.js"></script>
    <script type="module" src="moduleB.js"></script>
    <script type="module" src="moduleB.js"></script>
</body>
`````

importを使用した場合も同様
モジュールは最初の一回のみ


今日はここまで！

#参考にさせて頂いた記事

* [【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)
* [Let'sプログラミング JavaScript入門](https://www.javadrive.jp/javascript/)