はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
目的
- モジュールについての理解を深める
本題
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を使用した場合も同様
モジュールは最初の一回のみ
今日はここまで！