はじめに
この記事は、コードの書き方は説明していません。
なぜ、ESモジュールに興味を持ったか、また、テスト的に作成したモジュールで実行した体験記です。
ESモジュールに興味を持った経緯
この仕様は2015年版とのことです。
javascriptのコードステップ数が増大してくると、モジュール化して分割してロードする必要が出てくるということです。
今のコードは確かに延べたんで、だらだらと長くなっています。あとから見ると理解に時間がかかっています。
もう少し、すっきりしとしたコーディングはできないものかと思っていました。
クラス化やオブジェクト化も進めた方がいいと思っています。
そういう時に、以前にもこのES5とかES6とかしいう文字はネットで目にしていました。モジュールかなのかという程度で、それ以上深入りはしませんでした。
この仕様が、公開されたのが2015年ということですから、すでに9年近く経っています。
その時は、少し、exportやimportを試してみましたが、全く動作できませんでした。結構、難解かなと思ってあきらめていました。今日まで、その状態で来てしまいましたが、
そろそろ、もう一度試してもいいかなと思いはじめました。
調べて行くうちに
いろいろ、調べて行くと、何でもかんでもES対応できるというものではないようです。
たとえば、youtube player APIのようなスクリプトファイルはES対応していないとか、ChromeのプラグインはES対応していないとか出てきます。
ただし、ある対処をすれば、ES化することは可能とも出ています。
確かに、youtube player APIの時は、exportやimportを試しても全く動作しませんでした。
プラグインの時もどのようにして、type='module'を指定すればいいのかがわかりませんでした。
それらについても、調査を続けて行くうちに、その解決方法に出会いました。まだ、試してはいませんが、対処方法はあるようです。
どのようなテストをしたか
やはり、これまでもyoutube player APIを使用して、動画の再生ページを作成してきましたから、そのあたりでexport/importをテストしようと思いました。ただ、ネットにもでていましたが、youtube player APIは、そのままでは対応していないので、その周辺からESモジュール化を試してみました。
今回のテストでは、youtube player APIはそのまま使用しています。モジュール化したのは、再生リストの作成、表示部分です。
かなりの試行錯誤をしてようやく成功しましたが、そこで、わかったことは、次のことです。
-
決定的だったことは、この
<script type='module' src='........'></script>のtype='module'でした。このスクリプトタグで、jsのモジュールファイルを指定することが必要だったことです。
<script type ='module' src="./js/stampTube.js"></script> -
exportの指定
これについても様々な指定方法があるようです。
export default List; -
importの指定
import List from 'https://favorite.tecoyan.net/slim/js/favoriteClass.js';
ちょっと邪道かもしれませんが
モジュール内で生成したオブジェクトですが、本来であれば、他のモジュールでimportはできるようですが、モジュールになっていない通常のjsファイルがそのオブジェクトを参照したいときがあります。モジュールのオブジェクトなので、グルーバル変数にもできないようで、この時にwindow.オブジェクト変数= 生成したモジュールのオブジェクト変数が代入されるようで、そうすると他のjsファイルからもそのオブジェクト変数が参照できるようになりました。
結果
今回のモジュールテストで、youtube player APIを使用して、リストの再生、リストのサムネイルクリック再生、リストの自動連続再生(リストのループ)が確認できました。
ただし、youtube player APIは、ES対応はしていません。
とにかく、要件がそろわないとexport/importは動かないということはわかりました。
最初はかなり、難解でした。
あとがき
今後は、javascriptのESモジュール化は推進して行くかまだ、迷っています。どこをどうモジュール化するかの設計がまだ明確にできていないためです。中途半端にES化をしてしまうとES化していないjsファイルとうまく、整合がとれなくなりそうで、するとなると大変なボリュームなので、無理かなと思っています。
過去のものは捨てて、新規のみにするとかしないと混乱するかと思っています。
利用しているライブラリーやAPIにもまだ、ES対応していないものもあります。
今は、少し勉強したかなという段階です。