script要素

2023 10/23

2023.10.21 2023.10.23

記事の内容

script要素

script要素は、HTML文書内でJavaScriptコードを埋め込むために使用される要素です。

内部スクリプトファイル

script要素をHTML文書のhead要素やbody要素に埋め込む形になります。

script要素

記法1

<head>
　<script>埋め込むjs</script>
</head>

記法2

<body>
　<script>埋め込むjs</script>
</body>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>script要素に関して</title>
    <script>
     function alertFunc() {
      alert("ボタン押しましたか？");
     }
    </script>
  </head>
  <body>
    <button onclick="alertFunc()">ボタン押してね♡</button>
  </body>
</html>

出力結果

外部スクリプトファイル

JavaScriptコードをHTMLファイルから切り離し、外部スクリプトファイルから読み込むこともできます。

script要素

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./main.js"></script>
    <title>script要素に関して</title>
  </head>
  <body>
    <button id="alert_btn" type="button">もう一度ボタン押してね♡</button>
  </body>
</html>

window.onload = function () {
  let button = document.getElementById("alert_btn");
  // 実行したい処理
  button.onclick = function () {
    alert("またボタン押しましたか？");
  };
};

出力結果

非同期および遅延属性

async(非同期)

記法

スクリプトを非同期で読み込む
他のリソースと同時にダウンロードおよび実行

defer(遅延)

記法

スクリプトを非同期で読み込む
HTML解析が一時停止し、文書が読み込まれた後にスクリプト実行

モジュール属性

jsファイルをパーツごとに分割し効率的に読み込む時にモジュール指定をします。
※実務で当たりに行われます

script要素(モジュール属性)

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>script要素(module属性)に関して</title>
  </head>
  <body>
    <button id="alert_btn" type="button">ボタン押してね♡</button>
    <script type="module" src="./modules/main.js"></script>
  </body>
</html>

import { alertName } from "./alert.js";

window.onload = function () {
  let button = document.getElementById("alert_btn");
  // 実行したい処理
  button.onclick = function () {
    alertName("tomoji");
  };
};

export function alertName(name) {
  alert(`私の名前は${name}です！`);
}

出力結果

位置と読み込み位置スピードの違い

script要素は、head要素内・body要素の直前・末尾など3パターンあります。
※HTMLファイルの読み込み速度に違いが出る

パターン1(head要素内)

body要素内で呼び出す関数を定義したい場合など、事前に読み込んでおく必要がある時に記述します。

head要素内

記法

<!DOCTYPE html>
<html lang=”ja”>
　<head>
　　<meta charset=”UTF-8″>
　　<meta name=”viewport” content=”width=device, initial-scale=1.0″ />
　　<script src=”jsファイルのURL”></script>
　　<title>タイトル</title>
　</head>
　<body>
　　===========================
　　==========　コード　==========
　　===========================
　</body>
</html>

パターン2(body要素の直前)

script要素内の処理結果を、ページに直接出力するために利用します。
しかし、可読性や保守性が望ましくないので昨今ではあまり使われることはありません。

body要素の直前

記法

<!DOCTYPE html>
<html lang=”ja”>
　<head>
　　<meta charset=”UTF-8″>
　　<meta name=”viewport” content=”width=device, initial-scale=1.0″ />
　　<title>タイトル</title>
　</head>
　<body>
　　<script src=”jsファイルのURL”></script>
　　===========================
　　==========　コード　==========
　　===========================
　</body>
</html>

パターン3(body要素の末尾)

ページ読み込みの高速化としてscript要素末尾に記述します。
一般的なブラウザでは、スクリプト(JavaScript)の読み込みや実行が完了するまで、ページ描画を行いません。

body要素の末尾

記法

<!DOCTYPE html>
<html lang=”ja”>
　<head>
　　<meta charset=”UTF-8″>
　　<meta name=”viewport” content=”width=device, initial-scale=1.0″ />
　　<title>タイトル</title>
　</head>
　<body>
　　===========================
　　==========　コード　==========
　　===========================
　　<script src=”jsファイルのURL”></script>
　</body>
</html>