元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

トップ > JavaScript入門 > JavaScript:モジュールの基本

JavaScript:モジュールの基本

JavaScript入門

MDNのドキュメントからモジュールについて勉強しました。参考サイトの内容で充分に理解できましたが、この記事では簡易的なコードに置き換えて残します。まずは、ファイル構成やファイルの役割、モジュールの書き方について書きます。

ファイル構造

  • index.html
  • main.js
  • modules/
    • square.js
    • circle.js

ファイルの役割

  • index.html
    • main.jsの読み込み
  • main.js
    • モジュールの読み込み
  • square.js
    • 長方形に関する変数と関数の定義
  • circle.js
    • 円に関する変数と関数の定義

モジュールのサンプルコード

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>モジュールの練習1</title>
    <script type="module" src="./main.js"></script>
</head>
<body></body>
</html>

/* square.js */
// 長方形に関する変数や関数の定義
const RECT = "長方形";

let rect = {
    x: 0,
    y: 0,
    w: 100,
    h: 100
};

function printRect(){
    return `この${RECT}は、座標(${rect.x}、${rect.y})、幅${rect.w}、高さ${rect.h}です。`;
}

// 変数、関数、オブジェクトをエクスポートする
export { RECT, rect, printRect };

/* circle.js */
// 円に関する変数や関数の定義
const CIRCLE = "円";

let circle = {
    x: 0,
    y: 0,
    r: 10
};

function printCircle(){
    return `この${CIRCLE}は、座標(${circle.x}、${circle.y})、半径${circle.r}です。`;
}

// 変数、関数、オブジェクトをエクスポートする
export { CIRCLE, circle, printCircle };

/* main.js */
// モジュールから変数、関数、オブジェクトを読み込む
import { RECT, rect, printRect  } from './modules/square.js';
import { CIRCLE, circle, printCircle } from './modules/circle.js';

console.log(RECT);
console.log(rect);
console.log(printRect());

console.log(CIRCLE);
console.log(circle);
console.log(printCircle());

モジュール側でエクスポートして、main.jsでインポートして使います。

実行結果

ブラウザのコンソールに以下のように表示されます。

長方形
{x: 0, y: 0, w: 100, h: 100}
この長方形は、座標(0、0)、幅100、高さ100です。
円
{x: 0, y: 0, r: 10}
この円は、座標(0、0)、半径10です。

参考

ランキング参加中
プログラミング

» HTML入門のまとめはこちらです。