この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: HTMLへの埋め込み
SEOタイトル: HTML に JavaScript を埋め込む完全ガイド

この記事の要点

  • 2. 外部ファイル (推奨)

    3. インライン属性 (非推奨)

    script タグの属性 (defer / async / type)

    属性ダウンロード実行タイミング順序用途
    なし同期、HTML パース停止即時HTML 内記述順互換性、最終手段
    defer非同期HTML パース完了後、DOMContentLoaded 前HTML 内記述順★通常のアプリスクリプト
    async非同期ダウンロード完了次第不定独立した解析タグ等
    type="module"非同期defer 相当記述順ES Modules

    ES Modules

    

    // main.js
import { greet } from './utils.js';   // 拡張子必須
greet('World');

// utils.js
export function greet(name) {
  console.log(`Hello, ${name}`);
}

    module は CORS / MIME (application/javascript) / 厳格モードが強制されるため、HTTP サーバ経由でアクセスする必要があります（file:// 直接開きは不可）。

    DOM 操作の基本

    Hello
    

      
    
    • A
      • 
    
    • B
      •

    innerText / textContent / innerHTML の違い

    プロパティHTML タグ非表示要素パフォーマンスXSS
    textContent取得・設定とも文字列扱い（エスケープ済）含む★高速安全
    innerText表示テキストのみ含まない遅い（レイアウト必要）安全
    innerHTMLHTML として解釈含む遅い（パース必要）★危険

    XSS (クロスサイトスクリプティング) 対策

    // ❌ 危険: ユーザー入力を innerHTML に直接
const userInput = '';
element.innerHTML = userInput;    // → スクリプト実行される

// ✅ textContent で文字列扱い
element.textContent = userInput;  // → ""']/g, m => ({
    '&': '&', '<': '<', '>': '>', '"': '"', "'": '''
  }[m]));
}
element.innerHTML = escapeHtml(userInput);

    DOMContentLoaded と load イベント

    イベント発火タイミング用途
    DOMContentLoadedHTML パース + defer スクリプト完了時★ DOM 操作開始
    load画像/CSS/iframe 含め全リソース完了サイズ計算等、画像確認
     
    document.addEventListener('DOMContentLoaded', () => {
  // ここから安全に DOM 操作可能
  init();
});

window.addEventListener('load', () => {
  // 画像 size などの最終確認
});

// 既に発火済みかチェック
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  init();   // 既に発火後なら即実行
}

    FAQ

    Q: defer と body 末尾配置、どちらが良い？
    A: 機能的にはほぼ同じですが、defer + head 配置のほうが「ダウンロードが HTML パースと並行して始まる」ぶん体感が速くなります。

    Q: document.write は？
    A: 非推奨。HTML パース後に呼ぶとページ全体を破壊します。広告タグ等の互換目的以外は使わないこと。

    Q: jQuery の $(function(){}) と DOMContentLoaded の違いは？
    A: 同じです。jQuery 内部でも DOMContentLoaded を待つ実装になっています。