読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

Microsoft Edge で Modules を使ってみる

開発 JavaScript Microsoft Edge

現状、実装途中ですが調べたついでに書き留めています。

 

まずは注意点

実装途中ですので動かないものがあります。

 

その1

どうやら、名前からの呼び出しとデフォルトメンバーからの呼び出しをまだできません。
仕様上、以下の import が使えますが、動くのは赤文字のものだけです。

import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";

 

その2

import の際に相対のパスの場合 "./" を付けないと import できません。

import { sum } from "math.js"; // 動かない

 

その3

import の際、モジュール名の".js" を省くと動作しません。

import { sum } from "./math"; // 動かない

 

 

Modules とは?

JavaScript から他の JavaScript の指定しているプロパティ、関数、オブジェクトを呼び出すことができます。

 

使い方

以下の3つを行うと使用できます。

  • 使用する場合、読み込む script タグに type="module" の属性を追加
  • 読み込む方は import で呼び出し
  • 呼び出し側は読み込むプロパティ、関数、オブジェクトに export をつける

 

下準備

アドレスバーに about:flags を入力し、JavaScript の項目の「試験的な JavaScript 機能を有効にする」にチェックを入れ有効にしてください。

また、Insider Preview Build 14342 で使用できます。
(Mobile でも使えます)

 

使ってみる

math.js の足し算をする関数を import してを alert 関数で表示させます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Modules</title>
    <script type="module" src="app.js"></script>
</head>
<body>
</body>
</html>

app.js

import { sum } from "./math.js";
alert(sum(1, 2));

math.js

export function sum(a, b) { return a + b; }
export function mul(a, b) { return a * b; }

 

複数の export を呼び出す

export で設定したものは、明示的に指定しないと呼び出すことができません。

app.js

import { sum, mul } from "./math.js";
alert(sum(1, 2));
alert(mul(4, 2));

 

別名で export を呼び出す

app.js と math.js でプロパティ、関数、オブジェクトなどが被ってしまうとエラーが出ます。
そのため、回避するために sum の後に "as 別名" を付け別名で呼び出します。

app.js

import { sum as SUM } from "./math.js";
alert(SUM(1, 2));

 

仕様? バグ?

確か明確には記載されていなかった気がしますが、import する JS のプロパティ、関数、オブジェクトに export がないと import 側でそのまま読み込めてしまします。
alert() など即実行すものを書くと、import した時点で実行されるようです。

 

参照元

blogs.windows.com

スポンサーリンク