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

htmlやcssを学んでいると

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

JavaScriptを学び始めたい

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

今回は、scriptタグの

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

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

1 scriptタグとは
2 scriptタグの基本的な使い方
3 HTMLのパース（ブラウザがHTMLを解析）が終了してからscriptを読み込む方法
- 3.1 scriptタグをbodyの閉じタグ直前に記述する方法
- 3.2 scriptタグをdefer属性を利用して記述する方法
4 まとめ

scriptタグとは

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タグの基本的な使い方

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

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

<script src="スクリプトファイルのURL" type="text/javascript"></script>

1	<script src="スクリプトファイルのURL" type="text/javascript"></script>

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

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

注意

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

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

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

<script>

   //ここに直接スクリプトを記述する
   alert('アラートダイアログを表示する");

</script>

//ここに直接スクリプトを記述する

alert('アラートダイアログを表示する");

</script>

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

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

注意

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

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

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <span>サンプルです</span>
    そうですよ

    <div id="box1">書き変わります</div>

    <script>
      
      //すでに読み込まれたbox1を操作しようとするので動きます。
      let box1 = document.getElementById("box1");
      box1.innerHTML = "書き換えました";

      //こちらは、まだ読み込まれていないbox2を操作しようとするので動きません。
      let box2 = document.getElemetById("box2");
      box2.innerHTML = "これは書き換えられません";
    </script>

    <div id="box2">書き変わりません</div>

    <span>よみこまれますか</span>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<span>サンプルです</span>

そうですよ

<div id="box1">書き変わります</div>

//すでに読み込まれたbox1を操作しようとするので動きます。

let box1 = document.getElementById("box1");

box1.innerHTML = "書き換えました";

//こちらは、まだ読み込まれていないbox2を操作しようとするので動きません。

let box2 = document.getElemetById("box2");

box2.innerHTML = "これは書き換えられません";

</script>

<div id="box2">書き変わりません</div>

<span>よみこまれますか</span>

</body>

</html>

注意

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

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

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

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

<head>
  <meta charset="utf-8">
</head>
<body>

  <!-- ここにはHTMLが記述されているとします -->

  <script type="text/javascript" src="sample.js"></script>

</body>

<head>

</head>

<body>

</body>

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

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

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

<head>
  <meta charset="utf-8">

  <!-- defer属性をつけて記述 -->
  <script defer type="text/javascript" src="sample.js"></script>

</head>
<body>

  <!-- ここにはHTMLが記述されているとします -->

</body>

<head>

</head>

<body>

</body>

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

注意

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

まとめ

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

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

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

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

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。