下位互換は大事だと思うけど、プログラムの新しい機能は大好きな、弓削田です。
B2BのSaaSサービスを、作り続けて15年以上経ちましたが、
Javascriptの成長をIE4あたりから、ずっと見守ってきました。
IEだけでなく、FirefoxやOperaの墜落から、
Chromeの成長、
Safariが若干IE化してきている傾向などなど・・・
ブラウザの歴史は、インターネットの歴史と言ってもいいかもしれません。
読み込んだJavascriptの管理について
HTMLでscriptタグsrc属性で読み込まれたjavascriptプログラムは、
HTMLに内包するjavascriptプログラムと同様に扱われますが、
読み込みタイミングや、重複読み込みなど、
これまで、読み込み管理をonloadでしかできなかったんですが、
import.metaという便利な機能が搭載されていたことに気がつきました。
ちなみに、これまではどうやっていたかと言うと、
javascriptの読み込み重複を回避するためには、
ファイルに内包する無名関数をグローバル変数で保持して、
その変数がundefinedかどうかで、読み込みが完了しているかを判定していました。
また、読み込みとなる対象javascriptのファイルパス(URL)を取得するには、
scriptタグにIDを付与しておいて、
それをgetElementByIdで参照するという方法で行っていましたが、
めんどくさい手間がかかるし、一般的な使い方ではないので、OSSなどで使うには、
標準的な使い方としては、わかってもらいづらい。
苦肉の策として、scriptタグが読み込まれた直後に、getElementsByTagName("script")として、
返ってきた配列の一番最後の値が、読み込まれた直後のjavascriptタグだという事で処理をしたりもしていましたが、
精度は悪くないんですが、最近では、async属性などをつけられると、途端に破綻してしまう処理となってしまいました。
汎用性に欠けると言う事で、これまでは、これらの方法のどれも、落ち度があって、結局は、読み込まれたjavascriptって、
一体、どのファイルモジュールのものかを判定する決定的な手段がありませんでした。
神機能到来！
それが、
import.metaです。
この機能は、scriptタグで読み込まれたjavascriptプログラムで、console.log(import.meta)とすると、読み込まれたsrc属性の値を取得することができます。
この値を元に、scriptタグを探すこともできるし、
重複読み込みを回避する事もできます。
何より、安定して使えるのが、うれしくてしかたがない。
ただし、普通に読み込んだscriptタグでは、エラーがでてしまうので、
type属性で"module"の値を指定してあげなければいけません。
この辺は、お作法として、登録するようにした方がよさそうですね。
<script type="module" src="http://example.com/import.js"></script>
// module内に以下を記述
console.log(import.meta);
> "http://example.com/import.js"
なんと言う事でしょう。
これまで10年以上もできなかったことを、最も簡単に実現してくれたじゃありませんか。
これでwebライブラリを作る効率が、グンと上がること間違い無しです！。
ありがとう、javascript
注意点
まてよ・・・
これって、どの辺バージョンに対応しているのだ？
いつもの、「Can I use」さんに聞いてみました。
はい、これ！
iOS : 12~|
Chrome : 64~
IE : allダメ
意外と最近です。
古いブラウザはアウトです。
ですよね。最近の機能ですからね〜。
でも、今時のサイトでの利用を考えると問題ないでしょう。
え〜い！使っちゃえ！！！
