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

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

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

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>モジュールの練習3</title>
    <script type="module" src="./main.js"></script>
</head>
<body></body>
</html>

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

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

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

export { name, param, print };

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

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

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

export { name, param, print  };

/* main.js */
// モジュール全体をオブジェクトそしてインポートする
import * as Square from './modules/square.js';
import * as Circle from './modules/circle.js';

console.log(Square.name);
console.log(Square.param);
console.log(Square.print());

console.log(Circle.name);
console.log(Circle.param);
console.log(Circle.print());

実行結果

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

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

参考

ランキング参加中

プログラミング

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