English 中文 العربية 日本語 Português

<script>: SCRIPT 要素

最終更新：2026-10-13

<script>SCRIPT 要素

インタラクション用の JavaScript を埋め込むか参照します。head または body に置き、描画を速くするため body の末尾に置くことが多いです。

カテゴリスクリプトと埋め込み
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </script> タグ
ステータス標準

📝 構文

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

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性値説明
srcURL of an external script (inline code ignored when src is set).
typeScript type, default text/javascript (module for ES modules).
asyncExecutes as soon as downloaded, without blocking parsing.
deferRuns after parsing, before DOMContentLoaded.
crossoriginCORS setting for cross-origin scripts.
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<script> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： 外部ファイルには src を使い、インラインコードはタグ間に書きます。async/defer は外部スクリプトにのみ有効です。

❓ よくある質問

Qscript の async と defer の違いは何ですか？
Aどちらも外部スクリプトをノンブロッキングで読み込みます。async はダウンロード完了後すぐ実行し、順序は保証されません（解析タグなど独立したスクリプト向き）。defer は DOM の解析完了後に順序どおり実行します（DOM に依存する主スクリプト向き）。どちらも付けないと、ダウンロード中に HTML の解析が止まります。現代のプロジェクトでは外部スクリプトに少なくともどちらかを付けましょう。
Qscript は head と body の末尾のどちらに置くべきですか？
Adefer を付けたスクリプトなら head で構いません（早くダウンロードでき、描画も止めません）。インラインスクリプトや、DOM に依存する defer なしのスクリプトは body の末尾に置きます。現代のデフォルトは head と defer の組み合わせで、module タイプならデフォルトで defer 相当の挙動になります。
Qscript の type='module' の特徴は何ですか？
AES Module を有効にします。import/export に対応し、自動で厳格モードになり、デフォルトで defer 相当の遅延実行になり、スコープが独立します（グローバルを汚染しません）。従来の module なしのスクリプトは、デフォルトでグローバルスコープ・同期実行です。新規プロジェクトでは module に統一するのがおすすめです。
<noscript> <head> <body>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%