scriptタグで読み込んだJavascriptのファイル(URL)名を取得する方法

2021/05/16

Javascript テクノロジー

t f B! P L
eyecatch 下位互換は大事だと思うけど、プログラムの新しい機能は大好きな、弓削田です。 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ダメ
意外と最近です。 古いブラウザはアウトです。 ですよね。最近の機能ですからね〜。 でも、今時のサイトでの利用を考えると問題ないでしょう。 え〜い!使っちゃえ!!!

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ