export / import によるJavaScriptのESモジュール[ブラウザ]

2019年6月26日

ESモジュール(ES Modules / ECMAScript Modules)を実装してみます。

 

ESモジュールを作成し、ブラウザで表示させてみます。

 

 

 

export


 

モジュールを作成します。

 

modules.js

クラス、関数、変数等にexportキーワードを付与することによって外部に公開することが可能となります。exportが付与されていない場合は、外部から参照できません。

 

exportは下記のようにまとめることが可能です。

 

exportする要素が一つだけの場合、defaultを指定することができます(後述)。

 

 

 

import  モジュールのインポート


 

モジュールをインポートして利用します。

 

main.js

import命令によってモジュールを取り込みます。本記事ではブラウザで表示させるため、モジュールは / や ./ などのパス表記で記述し、拡張子を付ける必要があります。 

 

exportの要素が一つでdefaultを指定した場合は、importの際に別の変数名を付けることが可能です。

 

それぞれの要素をリネームすることもできます。

 

モジュール内の全ての要素を一括して取り込みます。

 

 

 

ブラウザ


 

ブラウザで表示させてみます。Webサーバー上でのみ実行可です。

 

index.html

type属性にmoduleを指定します。利用できるブラウザは JavaScript modules via script tag をご参照下さい。

 

関連ページ

Babel7によるNode.jsのトランスパイル

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー