HTMLでscriptの書き方まとめ！使用例から使う時のポイントまで解説

言語・開発

マークアップ言語

HTML

アンドエンジニア編集部

2024.06.05

この記事でわかること

WebページにJavaScriptなどのスクリプトを埋め込むことで、ページの動作を動的に制御できる

HTML内に直接記載するインラインスクリプトか、外部のスクリプトファイルを読み込んで使うことができる

Facebook

LINE

Hatena

HTMLでのscriptの利用とは

Webページを表示させるための文書であるHTMLでは、スクリプトを利用してWebページに動的な動作やインタラクティブな機能を追加することができます。

ここではまず、HTMLでスクリプトを利用することでどのようなメリットがあるのか、HTML内でスクリプトを使用する際に使う<script>タグの役割について説明します。

HTML入門：基本から学ぶHTMLの構造と構成要素を解説！

HTMLでscriptを使うメリット

HTMLでは、Webページにスクリプトを埋め込むことで、ページの動作を制御できるメリットがあります。ほとんどの場合、JavaScriptが使われますが、VBScriptなど他のスクリプトを使用することもできます。

具体的には、ページのコンテンツを動的に変更したり、追加したりできます。例えば、ボタンをクリックすると追加のテキストが表示されるような動作を実現できます。

また、ユーザがフォームを送信する前に、スクリプトを使ってフォームの入力値を検証することができます。これにより、不正な入力がある場合に警告メッセージを表示したり、フォームの送信を中止したりすることができます。

VBScriptが非推奨になった？その理由と代替言語を解説

＜script＞タグの役割

HTMLでスクリプトを使用する場合には、<script>タグを使用します。

HTML文書内の<script>タグ内にスクリプトコードを記述することで、HTMLページにクライアントサイドスクリプトのプログラミングを組み込むことができます。

また、<script>タグの様々な属性を利用することで、スクリプトの制御やパラメータの指定を行い、スクリプトの動作を調整することができます。

HTMLでのscriptの基本的な使い方

ここでは、HTMLでスクリプトを使用する方法を解説します。基本的な記述方法と、HTML内に直接記載するインラインスクリプト、外部ファイルからのスクリプトの読み込みについて確認しましょう。

ここから、一般的によく使われるJavaScriptの場合で説明を進めていきます。

基本の記述方法

HTMLでスクリプトを記述するには、<script>タグを使用します。<script>タグの基本的な記述方法は以下の通りです。

html
<script>
  // ここにJavaScriptコードを記述します
  alert("Hello world!");
</script>

<script>～</script>の間には、JavaScriptコードを記述します。上記の例では、ページを読み込むと「Hello world!」というアラートが表示されます。

また、HTMLとJavaScriptは、相互に連携して動作することができます。例えば、HTMLの要素にクリックイベントを追加して、JavaScriptコードを実行できます。

<button onclick="alert('Hello world!');">クリック</button>

上記の例では、ボタンをクリックすると「Hello world!」というアラートが表示されます。

JavaScriptの入門！その概要や文法の基礎について解説！

インラインスクリプト

インラインスクリプトとは、HTMLの中に直接スクリプトを記述する方法です。HTMLのタグの間にスクリプトコードを記述します。

<head>要素内に記述された場合、ページの読み込み前にスクリプトが実行され、<body>要素内に記述された場合は、ページの残りの部分が読み込まれた後にスクリプトが実行されます。

外部ファイル読み込み

インラインスクリプトのようにHTMLに直接スクリプトを書かずに、スクリプトが書かれた外部ファイルを読み込んでスクリプトを実行することもできます。

外部ファイルを読み込む方法は、複数のページで同じスクリプトを使用したい場合や、サイトの訪問者にスクリプトを隠したい場合に便利です。また、コードの再利用性や保守性が向上し、管理が容易になります。

具体的な手順としては、スクリプトを記述した外部ファイルを作成し、<script>タグのsrc属性でファイルを指定します。

例えば、JavaScriptのファイルである「sample.js」を作成し、内には以下のようなコードが記述されているとします。

alert("Hello!!");

次に、HTMLファイルで<script>タグを使用して、外部ファイルを読み込みます。以下のように記述します。

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

このようにすることで、sample.jsの中身がHTMLファイルに埋め込まれ、指定したタイミングでJavaScriptが実行されます。

＜script＞タグの属性について

HTMLで<script>タグを使う場合、さまざまな属性を指定することで、使用するスクリプトの種類を宣言したり、スクリプトの動作タイミングを制御したりすることができます。

type属性

<script>タグのtype属性は、使用されるスクリプトコードの種類を指定します。

具体的には、以下のようにコードを記述します。

<script type="text/javascript">
    // JavaScriptコード
</script>

HTML5ではtype属性を省略することも可能で、その場合は「type="text/javascript"」としてみなされます。また、moduleを指定すると、スクリプトがJavaScriptモジュールとして扱われます。

HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！

src属性

src属性は、外部スクリプトファイルのURLを指定します。src属性を使うことで、HTML文書に直接スクリプトを埋め込む代わりに、外部のスクリプトファイルを読み込むことが可能です。

例えば、以下のコードでは指定したURLからスクリプトファイル「sample.js」を取得し、ページにスクリプトを適用することができます。

<script src="https://example.com/sample.js">
    // JavaScriptコード
</script>

async属性とdefer属性

通常、HTMLファイルの中にスクリプトがある場合、一旦表示処理を中断してスクリプトを読み込んで実行し、実行完了後に表示を再開します。

async属性とdefer属性は、このHTMLの読み込みとスクリプトの読み込みを非同期で行い、実行のタイミングを制御するための属性です。

async属性を指定すると、HTMLの読み込みと表示を行いながら、スクリプトの読み込みと実行を並行して行います。

例えば、ページを読み込みながらユーザが入力したデータを検証するスクリプトを読み込んで実行する場合に使用できます。

一方、defer属性を指定すると、HTMLの読み込みと表示が完了した後で、先頭からスクリプトが実行されます。

例えば、ページの読み込みが完了した後にページのナビゲーション機能を提供するスクリプトを読み込む場合に使用できます。

nomodule属性の使い方

nomodule属性は、モジュールスクリプトに非対応の古いブラウザ向けに、代替スクリプトを指定できます。

nomodule属性が付与された<script>タグ内のスクリプトは、モジュールスクリプトをサポートしていないブラウザでのみ実行されます。

一方で、モジュールスクリプトに対応しているブラウザーではnomodule属性は無視されます。

<script type="module" src="sample.js"></script>
<script nomodule src="sample2.js"></script>

上記の例では、type属性でmoduleを指定されたsample.jsがモジュールスクリプトとして読み込まれますが、モジュールスクリプトに非対応のブラウザーではsample2.jsが代替として実行されます。

HTMLでのscriptのポイント

HTMLでスクリプトを使用する場合に気を付けたいこととして、スクリプトのコメントアウト、実行順序について解説します。

scriptのコメントアウト

HTMLにおいてスクリプトを使用する時に、<script>要素に対応していない古いブラウザでスクリプトがそのまま表示されるのを防ぐため、scriptの記述部分をHTMLコメントアウトする場合があります。

具体的な方法としては、スクリプトを記述する部分を以下のように囲んでコメントアウトします。

<!--
<script type="text/javascript">
alert("Hello world!");
</script>
-->

近年のブラウザではほとんどが<script>要素に対応しているため、コメントアウトする必要性は低くなっていますが、過去に作られたWebサイトをメンテナンスする時に残っている可能性があるので、覚えておくと良いでしょう。

HTMLのコメントアウトの書き方は？使い方と注意事項を解説

scriptの位置に応じた実行順序に気を付ける

<script>タグをHTML内に記載する場合、<head>タグや<body>タグの中に配置することができますが、それぞれで実行順序が異なります。

<head>内に<script>タグを配置すると、ページの読み込みが完了するまでスクリプトが実行されません。そのため、HTMLの要素が完全に読み込まれる前にスクリプトが実行されることを防ぐことができます。

一方、<body>タグの中に<script>タグを配置すると、ページの読み込みが進むのに合わせてスクリプトが実行されるため、ユーザがページを見ている間にスクリプトが処理されます。

実際のscript使用例

ここでは、スクリプトの使用例を紹介します。実際に使用する場合の参考にしてください。

scriptでアラートを表示させる

<!DOCTYPE html>
<html>
<head>
    <title>アラート表示の例</title>
</head>
<body>
    <script>
        alert("このサイトは架空のサンプルサイトです。表示内容はサンプルです。");
    </script>
    <p>これはサンプルサイトです。</p>
</body>
</html>

scriptで＜p＞要素の内容を変更する

次のコードでは、<p>要素として「これは変更前のサンプルテキストです。」のテキストが記載されていますが、JavaScriptによって変更され、最終的にブラウザには「これはスクリプトにより変更されたテキストです。」が表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>p要素の内容を変更するサンプル</title>
</head>
<body>
    <p id="demo">これは変更前のサンプルテキストです。</p>
    <script>
        window.onload = function() {
            document.getElementById("demo").innerHTML = "これはスクリプトにより変更されたテキストです。";
        };
    </script>
</body>
</html>

ページ読み込み時には、id属性に"demo"が指定された<p>要素の「これは変更前のサンプルテキストです。」が読み込まれます。

ページ全体が読み込まれた後に特定の処理を行うイベントハンドラ「window.onload」により、ページ読み込み後にid属性に"demo"が指定された<p>要素が書き換えられます。