#はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
#目的
- モジュールについての理解を深める
#本題
###1. ES Modules と CommonJS
モジュールとはソースコードを機能ごとに分割して、メンテナンスしやすくする仕組み。
→ 代表的なものにES Modules（ESM）と CommonJS（CJS）がある
####CommonJS
- Node.js上でモジュールを管理する仕組み
- requireやexportsというキーワードをつかってモジュールを読み込み、外部サイトへの露出を行う
- 拡張子は.cjs
####ES Modules
- ブラウザ上でECMAScriptを元にモジュールを管理する
- import, exportを使って読み込み、外部サイトへの露出を行う
- .mjsという拡張子を使う
###2.import と export
import:モジュールの読み込みに使用
export:モジュールの露出に使用
####例1
前提
index.htmlファイルでmoduleBを読み込んでいる状態
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>
<h1>編集用ファイル</h1>
<a href="../end" style="font-weight: 600; color: red;">
完成ファイルへ
</a>
<div>
<a href="../../" style="margin-right: 10px;">
セクションへ
</a>
<a href="../../../">
コースへ
</a>
</div>
<script type="module" src="moduleB.js"></script>
</body>
</html>
moduleAにmoduleBで使う変数や関数を定義する
moduleA.js
// 変数publicValは0と定義
export let publicVal = 0;
// 関数publicFnを定義
export function publicFn(){
console.log(`publicFn called: `)
}
上記内容をmoduleBで使用する
moduleB.js
// moduleAの読み込みを行う
// from以下で読み込むファイルを指定する
import { publicVal, publicFn } from "./moduleA.js";
// 0と出力される
console.log(publicVal);
// publicFn calledと出力される
publicFn();
####例2
読み込み先で名前を変更
moduleAは変わらず
moduleB.js
// asを使用してこのファイル内でのみ使用できる名前にする
import { publicVal as val, publicFn as fn } from "./moduleA.js";
// asに合わせて名前を変更
console.log(val);
fn();
// 出力結果は変わらない
####例3
defaultを使って書く場合
moduleA.js
export let publicVal = 0;
export function publicFn(){
console.log(`publicFn called: `)
}
// defaultを露出
export default 1;
moduleB.js
// defaultを使って書く場合は{}をつけない
// defaultを使う場合は変数をimportの後に準備
import defaultVal,
{ publicVal as val, publicFn as fn } from "./moduleA.js";
console.log(val);
// 出力結果は1となる
console.log(defaultVal);
fn();
####例4
moduleAを全体取得した場合
moduleBを変更する
moduleB.js
// *をつけるとmoduleAの変数関数がexportされる
import * as moduleA from "./moduleA.js";
console.log(moduleA);
// 上記のようにすると以下の出力結果からmoduleAがファイルの内容を取得していることがわかる
// default: (...)
// publicFn: (...)
// publicVal: (...)
今日はここまで！
#参考にさせて頂いた記事