【scriptタグ】scriptを埋め込む、または外部参照してみよう！「HTML・解説」- ノブレコ
nobreco★<script>タグの特徴
・タグのカテゴリ ―― インライン要素。
・コンテンツモデル ―― メタデータコンテンツ、フローコンテンツ、フレージングコンテンツ。
・タグの省略 ―― 不可。（開始タグと終了タグが必要）
・使用可能な親要素 ―― メタデータコンテンツを許容するすべての親要素、またはフレージングコンテンツを許容するすべての親要素。
・グローバル属性を持つ。
・ARIAロール ―― 標準でのARIAロールは無し。
<script>の説明
<script>とは
このタグは、HTML内に javascript を埋め込んだり、外部の javascript を参照したりするためのタグです。
<script>要素は、ほとんどの要素の子要素になることができ、メタデータコンテンツ、フローコンテンツ、フレージングコンテンツの他に supporting-element にも分類されます。
またこの要素は<head>要素と<body>要素内のどちらでも記述できます。
■使用目的
HTML内に javascript や VBscript などのコードを埋め込んだり、外部の javascript を読み込むために使用するタグです。
javascrip の他に GLSL shaderプログラミング言語や、JSONなどの言語にも使用することが可能です。
使用にはtype属性が必須で、この値にjavascript、JSONなどの必要な言語名を指定します。
<script>要素に対応していないような古いブラウザに対しては、スクリプトの記述を「<!--と-->」のように記号で囲んでコメントを記述します。こうすることで、非対応のブラウザに対して囲んだスクリプト部分が表示されることを防ぐことができます。
<script>要素の内容の挙動は、過去との互換性の都合上もあり非常に複雑なものになります。そのため以下のような指針を取ることが望ましいです。
・可能な限り<script>要素に内容を含めず、src属性で外部リソースを指定する。
・<script>要素に内容を含める必要がある場合は、文字列「<!--と-->」を含めないようにします。また、もし文字列に「</」があればこれを回避します。
■使える属性
・async
・crossorigin
・defer
・integrity
・nomodule
・nonce
・referrerpolicy
・src
・type
■非推奨の属性
・charset
・language
使用上の注意点
① テキストをマークアップするものではない。
<script>要素は特定のセマンティックを持たないため、他のHTML要素とは異なります。この要素はユーザーに対して何かを提示するものではありあせん。
② 終了タグの扱いになってしまう
<script>要素内に「</script」という文字列が出現した場合、<script>要素の終了とみなされることがあるため注意してください。こういう場合は、青色で示した文字列「</--<script>内容</script>-->」で囲むことで終了とみなされずに問題なく動作します。
ただし、この処理が逆に意図しない挙動を招くことがあります。
終了タグとみなされないようにはなるものの、</script>という終了を意味する文字列は<script>要素の内容の一部として扱われるようになるため、これ以降の内容も<script>要素の内容とみなされてしまいます。
③ 要素内のHTMLコメントの扱いの注意
<script>要素内に「<!--HTMLコメント-->」文字列があってもHTMLコメントとしては扱われず、内容の一部として扱われます。
「<!--例-->」はそのままスクリプトエンジンに渡され、スクリプトエンジン側でjavascriptの1行コメントとして扱われます。
内容モデル
<script>要素の内容モデルは複雑です。
有効なsrc属性が指定されている場合には、意味のある内容を含めることはできません。
有効なsrc属性が指定されていない場合に含めるこのができる内容としては、スペース、タブ、改行、javascriptのコメントと解釈される値のみです。また有効なsrc属性が指定されていない場合は、特定の文字列を除いた内容を含めることができます。
含めた内容は、そのままスクリプトエンジンに渡され、javascriptとして解釈されます。
ただし、後述するように、<script>要素がデータブロックである場合は何もしません。
<script>の記述例
■基本的な使用例
★HTML
この例は外部ファイルからscriptのコードを読み込むときの記述例です。
外部からの読み込みにはsrc属性を使用して指定します。
まとめ
この記事では、<script>タグについての解説をいたしました。
この要素はHTML内にjavascriptを埋め込んだり、外部のjavascriptを読み込むために使われるタグです。
HTML文書に動的なページを採用することができるようになるタグで、使用すること自体は簡単ですが、内容の解釈が複雑でjavascriptの知識も必要になるため、使いこなすにはそれなりのが記述方法の学習が必要になるかもしれません。
それらを覚えて動的なwebサイトやアプリなどを作成することができるようになれば、もっとコーディングの幅が広がり、プログラミングの世界が楽しくなると思います。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん👍
