![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB_9NY-1DPrY8NWneMy_8K236gY3N6Iy56IPBh4oEqpXaMa1t40eL5mS97T02dZ2TsfB2VEINxVJ59F5uosHxNnoQYmE7dqWKb0-cK9xT46cGu_WeGNjVtXu5ZY2K9AmBtS6A_z5Wy6YRo1_jCOHg8eAzT2_lKl-nAYcYx-kLZ7OtPeSqddrLlhRGP/s1600-rw/1620515898_0.jpg)
下位互換は大事だと思うけど、プログラムの新しい機能は大好きな、弓削田です。
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」さんに聞いてみました。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKSFRviizj8KNsjUX48RMTc1I-rTq9EN66YCt9brGw5L0TGehgp2YcU0NVHxum57OvuP_Kkzfn6AU6_nDkb67iiz7zRvFSiB-eDBEOSCGfaRHMy9SqAGTitj2G7HzsfnSrehrc06S5qL0yu5TapV5JOCIzH2EAk5I4yY3dRJT7B8V_OqSdv7-uF20WXa8/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%2823%29.jpeg)
はい、これ!
iOS : 12~|
Chrome : 64~
IE : allダメ
意外と最近です。
古いブラウザはアウトです。
ですよね。最近の機能ですからね〜。
でも、今時のサイトでの利用を考えると問題ないでしょう。
え〜い!使っちゃえ!!!
0 件のコメント:
コメントを投稿