HTMLのscriptタグのtype属性について

.htmlファイルでスクリプト（Javascriptのファイル）を読み込む際、下記のようなscriptタグを使うときの、type属性について調査した
<script type="text/javascript" src="./app.js"></script>

概要

  • type属性はscriptの種類を指定し、それに合わせてHTMLがscriptを読み込む
  • とりうる種類は下記の3通り（それ以外のtypeを設定した場合、scriptタグが無視される）
    • MIMEタイプ
      • デフォルト値のため、scriptタグにtype属性を設定しない場合、text/javascriptが設定される（Javascriptファイルをsrc属性に設定している場合を考えている）
      • 詳細はこちら：MIMEタイプについて
    • module
      • Javascriptファイルがmoduleとして扱われる
    • importmap
      • Javascriptファイルがimport mapとして扱われる

MIMEタイプ

module

  • srcに設定したJavascriptファイル内でexportをラベル付けしたオブジェクト（変数・関数）を、import宣言でインポートして利用することができる
  • 例 
    import {sayHi} from './sayHi.js';

importmap

  • import mapは、JavaScript moduleをインポートするときにブラウザーがモジュール指定子を解決する方法を制御できるようにするJSON オブジェクト（import宣言でどう書いたら何がインポートされるかを決めるJSON）
  • 例 
    <script type="importmap">
{
  "imports": {
    "dayjs": "https://cdn.skypack.dev/dayjs@1.10.7",
  }
}
</script>
<script type="module">
  import dayjs from 'dayjs';
</script>

参照

俯瞰調査Javascript,React,HTML

Posted by ttnt