scriptタグの使い方とJavaScriptをHTMLに組み込む方法をわかりやすく解説

2024.09.12
スポンサーリンク
スポンサーリンク

scriptの概要

JavaScriptをHTMLに組み込む HTMLタグ

<script>JavaScriptコード</script>

概要 scriptタグは、HTML文書内でJavaScriptコードを記述し、動的な動作を追加するために使用されます。外部ファイルを読み込むことも可能です。
  • HTML内に直接JavaScriptを記述できる。
  • 外部JavaScriptファイルを読み込むことも可能。
  • ページの動作を制御し、インタラクティブな機能を追加できる。

scriptタグの主な属性

属性 説明 使用例
src 外部JavaScriptファイルのURLを指定 <script src="script.js"></script>
async スクリプトを非同期で実行 <script src="script.js" async></script>
defer HTML解析後にスクリプトを実行 <script src="script.js" defer></script>
type スクリプトのMIMEタイプを指定（デフォルトはtext/javascript） <script type="text/javascript"></script>

scriptタグの基本的な使い方

以下の例では、HTML内に直接JavaScriptを記述し、ボタンをクリックするとアラートを表示します。

<button onclick="showMessage()">クリック</button>

<script>
function showMessage() {
    alert("ボタンがクリックされました！");
}
</script>

実行例：

注意事項

  • スクリプトをHTML内に直接記述する場合は、<script></script>で囲む必要がある。
  • 外部JavaScriptファイルを読み込む場合は、src属性を指定する。
  • スクリプトの実行順を制御するために、asyncやdeferを適切に使う。
  • 悪意のあるスクリプトの実行を防ぐため、信頼できるソースのみを使用する。
  • パフォーマンス向上のため、スクリプトはページの最後（</body>直前）に配置するのが推奨される。

よくある質問

Q: scriptタグの実行順はどう決まりますか？
A: HTML内に記述された順番に実行されます。ただし、asyncやdeferを使うと順序が変わることがあります。
Q: scriptタグのtype属性は必須ですか？
A: いいえ、現在のHTML仕様ではtype="text/javascript"がデフォルトなので、省略可能です。
Q: 外部JavaScriptファイルを使用するメリットは？
A: 再利用性が向上し、コードの可読性が向上する。また、キャッシュを利用できるため、ページの読み込み速度が改善される。
Q: scriptタグをhead内に記述してもよいですか？
A: 可能ですが、ページのレンダリングをブロックする可能性があるため、deferを指定するのが望ましい。
Q: JavaScriptを無効化された環境でも動作させる方法は？
A: <noscript>タグを使用して、JavaScript無効時の代替コンテンツを提供できます。

まとめ

  • scriptタグは、JavaScriptをHTMLに組み込むためのタグ。
  • 外部JavaScriptをsrc属性で読み込むこともできる。
  • スクリプトの実行順を制御するにはasyncやdeferを使用する。
  • HTMLの動的制御やインタラクティブな機能を追加できる。
スポンサーリンク