More than 3 years have passed since last update.

【JavaScript】モジュール①　import と export

JavaScript

Posted at 2021-11-26

#はじめに

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: (...)

今日はここまで！

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【JavaScript】モジュール① import と export

【JavaScript】モジュール①　import と export