LoginSignup
1

More than 1 year has passed since last update.

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

Posted at

はじめに

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

今日はここまで!

参考にさせて頂いた記事

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1