過去バージョン

script 要素とは

<script> は HTML にJavaScript を埋め込むための要素です。外部の JS ファイルを読み込むこともできれば、要素内に直接コードを書くこともできます。type 属性を module にすると ES Modules として動作します。

基本構文

外部ファイル読み込み

<script src="/js/app.js"></script>

インラインスクリプト

<script>
  console.log("hello from inline script");
</script>

主要な属性

読み込みタイミングの違い

具体例

<!-- 同期: ここに来ると HTML パースが止まる。原則使わない -->
<script src="/js/legacy.js"></script>

<!-- defer: 推奨のデフォルト。DOM 完成後に記述順実行 -->
<script defer src="/js/app.js"></script>
<script defer src="/js/main.js"></script>

<!-- async: 解析と独立。広告・分析タグなどで -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXX"></script>

<!-- ES Modules: 自動的に defer 相当、strict mode -->
<script type="module" src="/js/app.mjs"></script>

type="module"（ES Modules）

type="module" を指定すると ES Modules として読み込まれます。以下の特徴があります。

• import / export 構文が使える
• 自動で strict mode
• 自動で defer 相当のタイミング
• スクリプトのスコープがモジュールスコープ（グローバルを汚さない）
• 同じ URL の重複読み込みはキャッシュされる

<script type="module">
  import { greet } from "/js/util.mjs";
  greet("World");
</script>

type="application/json"（データブロック）

実行されないデータ用のスクリプトブロックです。JSON-LD（構造化データ）や、JS から後で読み出すためのデータ埋め込みに使います。

<script id="initial-data" type="application/json">
  {"user":"Alice","count":3}
</script>

<script>
  const data = JSON.parse(
    document.getElementById("initial-data").textContent
  );
  console.log(data.user); // "Alice"
</script>

SRI（Subresource Integrity）

CDN から JS を読むとき、ファイル改ざんを検知するためにハッシュを integrity 属性で検証できます。

<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-abc123...xyz"
  crossorigin="anonymous"
></script>

CSP との関係

Content Security Policy（CSP）で script-src が制限されていると、外部 URL やインラインスクリプトはブロックされます。インラインを許可するには nonce または hash を使います。

<!-- nonce 付きインラインスクリプト -->
<script nonce="aBcD1234">
  console.log("CSP 通過");
</script>

Content-Security-Policy: script-src 'self' 'nonce-aBcD1234';

script の置き場所

• 内 + defer — 現在の推奨パターン
• 直前 — 古い対処法。defer が使える今はあまり使わない
• 内で属性なし — レンダリングをブロックするので非推奨

セキュリティ上の注意

• untrusted な文字列を innerHTML / document.write しない — XSS
• ユーザー入力を JS リテラルに直挿入しない
• 外部 CDN は SRI + CSP でガード
• 分析タグなど一括埋め込み系はタグマネージャ経由で管理

script の挿入順序とパフォーマンス

ページの表示速度はJavaScript の読み込み戦略で大きく変わります。同期スクリプトは HTML パースを止めてしまうため、First Contentful Paint（FCP）に直撃します。

• クリティカルでない JS は defer — メイン UI の操作を担う JS のデフォルト
• 独立した広告 / 分析タグは async — 失敗してもページに影響しない
• ファーストビューを描画するための最小スクリプトのみインラインで上部に置く
• 大型ライブラリは動的 import() で必要時のみ読み込み（コード分割）

動的に script を追加する

JS から後付けで <script> を挿入することもできます。サードパーティライブラリの遅延読み込みなどで使います。

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const s = document.createElement("script");
    s.src    = src;
    s.async  = true;
    s.onload  = () => resolve(s);
    s.onerror = () => reject(new Error("load failed: " + src));
    document.head.appendChild(s);
  });
}

// 必要になったタイミングでロード
button.addEventListener("click", async () => {
  await loadScript("/js/chart.min.js");
  drawChart();
});

よくあるトラブル

関連

• JavaScript — ブラウザ用スクリプト言語
• ES Modules — モダンな JS モジュール仕様
• defer / async — 非同期読み込み属性
• SRI / CSP — スクリプトのセキュリティ
• document.write — レガシーな書き出し API（非推奨）