scriptタグとは?どの位置で読み込むのが良いのかを解説します

scripttag

htmlやcssを学んでいると

Webページに動きをつけるため

JavaScriptを学び始めたい

と感じたことは無いでしょうか。

今回は、scriptタグの

・基本的な使い方
・HTMLの描画(レンダリング)が終了してからscriptを読み込む方法

について説明します。是非参考にしてみてください。

scriptタグとは

scripttag01

scriptタグの読み方

scriptタグは、スクリプトタグと読みます。JavaScriptのScriptと同じです。

スクリプトは一般的には「脚本」「台本」などと訳されます。プログラム言語などのscriptには、一連の処理手順を記述したものという意味を持ちます

scriptタグの説明

scriptタグには現在は基本的にはJavaScriptを記述します。

まず、scriptタグにはインラインで直接HTMLに記述する方法と、外部ファイルを読み込む方法があります

また、scriptタグはheadタグ内にも、bodyタグにも記述することが出来ます

注意
インラインで記述した場合や、属性タグで何も指定してない場合には、読み込まれた順にscriptが実行されます。順番によってはJavaScriptが操作したい要素より先に実行されてしまいエラーになる場合があります。

scriptタグで利用できる属性

scriptタグでは以下の属性を使うことができます。

属性 説明
src スクリプトを書いたファイルのURLを指定
async srcで指定したスクリプトを非同期でダウンロードして実行
defer srcで実行したスクリプトをHTMLの後で読み込み実行
type スクリプトのMIMEタイプを指定
charset スクリプトの文字エンコーディングを指定

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
nternet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

scriptタグの基本的な使い方

scripttag02

scriptタグで、JavaScriptを記述した外部ファイルを読み込む方法

外部ファイルとして読み込むには下記のように記述します

一般的なWebサイトでは、JavaScriptは外部ファイルに書いて読み込むことが多いです。

Webサイトを作る場合には、複数のページであることが多いです。その複数のWebページから、同じ内容を流用するために外部ファイルに記述して、すべてのページから参照する方が効率が良いです。

注意
html5から、type属性はデフォルト値として「text/javascript」が定義されますが、html5より前のバージョンではtype属性が必須であったため記述する場合が多いです

scriptタグでHTMLに直接記述(インラインで記述)する方法

インラインで記述するには、下記のように記述します

これはインラインのCSSと同様に、HTMLに直接インラインで書くことが出来ます。

利点としては、HTMLを読み込む際に外部ファイルを読むことで、処理が少し重くなることを防ぐことが出来ます。

注意
インラインでスクリプトを記述すると、後述するdeferやasync属性は動作しません。そのためスクリプトは記述された位置で実行されます。

scriptタグが実行されるタイミング

scriptタグは、defer属性とasync属性を指定しない場合には記述した位置でスクリプトが実行されます。

例えば下記のように、scriptタグをHTMLのど真ん中に記述したとします。

その記述で、scriptタグより前に書いたdiv要素を操作するスクリプトを書くと、そのスクリプトは動作します

しかし、scriptタグより後に書いたdiv要素を操作するスクリプトは動作しません

注意
説明のために記載しましたが、上記のように、HTMLの真ん中でscriptタグを差し込むことはほとんどありません。

HTMLのパース(ブラウザがHTMLを解析)が終了してからscriptを読み込む方法

scripttag03

scriptタグをbodyの閉じタグ直前に記述する方法

一般的にはこの方法がとられています。scriptタグは書かれている位置で実行するので、一番最後に書いておけば問題が起こりません

scriptタグをdefer属性を利用して記述する方法

defer属性をつけてscriptタグを記述すると、HTMLのパースが終わった後に実行します

これは、上記で説明したbodyタグの閉じタグの直前にscriptタグを書いたのと同じことになります。

scriptタグを複数定義した場合で、deferタグがすべてについている場合には、HTMLのパースが終わった後に記述順で読み込み・実行が行われます。

注意
defer属性ありのscriptタグとないscriptタグが混在する場合には、混乱しやすいので出来るだけどちらかに統一するのが好ましいです。

まとめ

いかがでしたでしょうか。

チームでWebサイトを制作・開発していくと、scriptの実行されるタイミングで動作しないことなどが稀にあるので覚えておきましょう。

scriptタグを利用してJavaScritが書けるようになると、Webページの表現力が格段に上がります。

この記事が参考になれば幸いです。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?