モジュールについて

モジュールとは

ソースコードを機能ごとに分割し、メンテナンスしやすくする仕組み
「import / export」キーワードで、モジュールの読み込みや外だしが可能になる

モジュールをHTMLに読み込む場合

モジュール利用時は、必ず「<script type="module">」属性を使用する
↓モジュール読み込み例

 <!DOCTYPE html>
 <html>
   <body>
     <!-- 通常のJS読み込み時 -->
     <script src="main.js"></script>

     <!-- モジュール読み込み時 -->
     <script src="hogemodule.js" type="module"></script>
   </body>
</html>

拡張子「.mjs」と「.js」の違い

どのファイルがモジュールで、どのファイルが通常のJavaScriptであるかを明確にするために拡張子をわけることができる

モジュール読み込み時の挙動

モジュールは、非同期読み込みとなる（通常のJavaScriptに、defer属性を付与した時の様な挙動になる）
モジュール内部では自動的に厳格モードが使われる（"use strict" を記載した時の挙動になる）

モジュール読み込み時の「import」「require」の違い

両方の読み込み方法を見かけたのでメモ。
モジュールの、読み込み仕様の違いによるもの。

ES Module（ESM）	CommonJS（CJS）
ECMAScriptに基づくモジュール管理の仕組み	Node.js上でモジュールを管理する仕組み
importやexportといったキーワードを使ってモジュールの読み込みを行う	requireやexportといったキーワードを使ってモジュールの読み込みを行う

参考URL

nok

厳格モード（Strictモード）

厳格モードとは

コードチェックを厳しくしてくれるモードで、以下の様な効果を得られるもの
- 意図しないバグの混入を防ぐ
- 予約語の確保
- コードをセキュアに保つ
- など

厳格モードの使い方（スクリプト全体に適用する場合）

ファイルの先頭に「use strict」を追加する

hoge.js

"use strict";
const value = "Hello World";

厳格モードの使い方（関数内に適用する場合）

関数内に「use strict」を追加する

hoge.js

function hoge () {
    "use strict";
    const value = "Hello World";
}