HTML scriptタグの書き方を初心者向けに解説｜基本構文とhead・bodyの配置方法

HTML scriptタグの書き方｜基本構文と配置（head/body）

先生と生徒の会話形式で理解しよう

生徒

「HTMLでJavaScriptを動かすときにscriptタグを使うって聞いたんですが、どういうものなんですか？」

先生

「scriptタグは、HTMLの中でJavaScriptというプログラムを読み込んだり書いたりするためのタグです。Webページに動きや処理を追加するために使います。」

生徒

「動きというのは、どんなことができるんですか？」

先生

「例えばボタンを押したらメッセージが表示されたり、入力した内容をチェックしたりできます。HTMLだけではできない動作をJavaScriptで実現できるんです。」

生徒

「なるほど。じゃあscriptタグはHTMLとJavaScriptをつなぐ役割なんですね。」

先生

「その通りです。それではHTML scriptタグの基本的な書き方と配置方法を順番に見ていきましょう。」

1. HTMLのscriptタグとは

HTMLのscriptタグとは、WebページにJavaScriptを読み込むためのHTMLタグです。HTMLは本来、文章や画像、リンクなどの構造を作るための言語です。しかしHTMLだけではページに動きや処理を加えることはできません。

そこで登場するのがJavaScriptというプログラミング言語です。JavaScriptを使うことで、ボタンをクリックしたときの処理や、画面の内容を動的に変更する機能を作ることができます。

このJavaScriptをHTMLの中で使えるようにするのがscriptタグの役割です。つまりscriptタグは、HTMLとJavaScriptをつなぐ橋のような存在です。

初心者の人は、HTMLがページの骨組みで、JavaScriptがページを動かす仕組みと考えると理解しやすくなります。そしてscriptタグは、その二つを結びつける場所です。

2. HTML scriptタグの基本構文

HTMLでJavaScriptを書くときの基本的な書き方はとてもシンプルです。scriptタグの中にJavaScriptのプログラムを書くことで、ブラウザがその内容を読み取って実行します。

まずは最も基本的な構文を確認してみましょう。ここではページが読み込まれたときにメッセージを表示する簡単な例を紹介します。


<script>
alert("JavaScriptが実行されました");
</script>

ブラウザ表示

alertという命令は、ブラウザにメッセージを表示するJavaScriptの命令です。このようにscriptタグの中にプログラムを書くことで、HTMLページの中で処理が実行されます。

ここで出てきた構文とは、プログラムを書くときの決まりごとのことです。プログラム言語ではこの書き方のルールを守ることで、コンピューターが正しく内容を理解できます。

3. scriptタグをheadに書く方法

HTMLのscriptタグは、headタグの中に書くこともできます。headとは、ページの設定や情報を書く場所です。例えばタイトルや文字コードなどもheadに書かれています。

JavaScriptをheadに書く場合は、ページの読み込みと同時にプログラムが準備されます。次の例を見てみましょう。


<head>
<title>JavaScriptのテスト</title>

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

</head>

<body>

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

</body>

ブラウザ表示

この例ではshowMessageという処理をheadのscriptタグで定義しています。そしてボタンをクリックしたときにその処理が実行されます。

ここで出てきたfunctionとは、処理をまとめたものです。料理で例えるとレシピのようなもので、決められた手順をまとめて呼び出すことができます。

4. scriptタグをbodyの最後に配置する方法

実際のWeb制作では、scriptタグをbodyタグの一番下に書くことがよくあります。これはページの表示速度や読み込みの順番に関係しています。

JavaScriptは読み込まれるときに処理が実行されます。そのためページの上の方に書くと、HTMLの表示が途中で止まることがあります。

そこで多くの場合は、HTMLの内容をすべて読み込んだあとにJavaScriptを実行するため、bodyの最後にscriptタグを置きます。


<body>

<h1>JavaScriptテストページ</h1>

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

<script>
function hello(){
alert("こんにちは");
}
</script>

</body>

ブラウザ表示

このようにbodyの最後にscriptを書くことで、HTMLが表示されたあとにJavaScriptが読み込まれるため、ページの表示がスムーズになります。

5. 外部JavaScriptファイルを読み込む方法

JavaScriptはHTMLの中に直接書く方法だけでなく、外部ファイルとして読み込む方法もあります。外部ファイルとは、別のJavaScriptファイルを作り、それをHTMLから読み込む方法です。

この方法はWeb制作ではとてもよく使われます。理由はプログラムを整理しやすくなり、同じJavaScriptを複数のページで使えるからです。

次の例ではscriptタグのsrc属性を使ってJavaScriptファイルを読み込んでいます。


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

srcとはsourceの略で、読み込むファイルの場所を指定する属性です。属性とはHTMLタグに追加情報を与える仕組みのことです。

このようにHTMLとJavaScriptを分けることで、Webサイトの管理がしやすくなります。大きなサイトほどこの方法が使われます。

6. scriptタグを使った簡単な動作サンプル

最後にscriptタグとJavaScriptを組み合わせた簡単なサンプルを紹介します。ここではボタンを押すと文字が表示される例です。


<h1>JavaScriptサンプル</h1>

<button onclick="showText()">メッセージ表示</button>

<p id="text"></p>

<script>
function showText(){
document.getElementById("text").innerHTML = "JavaScriptで文字を表示しました";
}
</script>

ブラウザ表示

documentという言葉は、Webページ全体を表すJavaScriptのオブジェクトです。オブジェクトとは、データや機能をまとめたものです。

getElementByIdは、指定したidのHTML要素を取得する命令です。そしてinnerHTMLというプロパティを使うことで、HTMLの中身を書き換えることができます。

このようにscriptタグを使うことで、HTMLページにさまざまな動きを追加できます。ボタンのクリック処理、入力チェック、アニメーションなど、Webサイトの多くの機能はJavaScriptとscriptタグによって実現されています。

まとめ

ここまでHTMLのscriptタグについて、基本的な役割や書き方、配置場所の違い、そしてJavaScriptとの関係を学びました。scriptタグはHTMLの中でJavaScriptを読み込み、Webページに動きを加えるための重要なタグです。HTMLはページの構造を作る役割を持ち、JavaScriptはそのページに処理や動作を追加する役割を持っています。そしてscriptタグは、この二つの技術をつなぐ場所として使われます。

Web制作やフロントエンド開発では、HTMLとJavaScriptの組み合わせはとても基本的で重要な知識です。scriptタグを正しく理解することで、ボタンをクリックしたときの動作、入力フォームのチェック、画面の内容の変更など、さまざまな機能を実装できるようになります。

HTML初心者やプログラミング初心者が最初につまずきやすいポイントは、HTMLとJavaScriptの役割の違いです。HTMLはページの見出しや段落、画像、リンクなどの構造を作るマークアップ言語です。一方でJavaScriptはプログラミング言語であり、計算や条件分岐、イベント処理などを実行できます。

つまりHTMLだけではページに動きをつけることはできません。しかしscriptタグを使ってJavaScriptを読み込むことで、ページの内容を動的に変更したり、ユーザーの操作に応じて処理を実行できるようになります。

scriptタグの基本構文はとてもシンプルです。scriptタグの中にJavaScriptを書くだけでブラウザがプログラムを読み込み、実行します。次のようなシンプルな例でも、JavaScriptが正しく動作することを確認できます。


<h1>scriptタグの基本確認</h1>

<script>
alert("JavaScriptが実行されています");
</script>

ブラウザ表示

このようなシンプルなコードでも、scriptタグとJavaScriptが連携してブラウザにメッセージを表示する処理が実行されます。HTML学習ではこのような小さな動作を何度も試しながら理解していくことが大切です。

またscriptタグはHTMLのどこに書くかによって動作のタイミングが変わるという特徴があります。headタグの中にscriptを書く方法と、bodyタグの最後にscriptを書く方法の二つがよく使われます。

headタグの中に書いた場合は、ページが読み込まれるときにJavaScriptの準備が行われます。関数を定義したり、初期設定を行ったりする場合によく使われます。例えば次のような書き方です。


<head>
<title>JavaScript関数の例</title>

<script>
function message(){
alert("ボタンが押されました");
}
</script>

</head>

<body>

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

</body>

ブラウザ表示

このコードではmessageという関数をscriptタグの中で定義しています。ボタンをクリックするとonclickイベントが発生し、そのときにmessage関数が呼び出されます。イベント処理はJavaScriptの基本であり、Webページにインタラクションを追加する重要な仕組みです。

一方で多くのWeb制作ではscriptタグをbodyの最後に配置する方法がよく使われます。理由はHTMLの読み込みを優先させるためです。JavaScriptは読み込まれた瞬間に実行されるため、ページの上に配置するとHTMLの表示が途中で止まることがあります。

そのためHTMLをすべて読み込んだあとにJavaScriptを実行するように、bodyの最後にscriptを書く方法が推奨されることが多いです。次のような書き方です。


<body>

<h1>JavaScriptのクリック処理</h1>

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

<script>
function hello(){
alert("こんにちは");
}
</script>

</body>

ブラウザ表示

この配置方法はページ表示の速度や安定性の面でもよく使われます。特にJavaScriptのコードが長くなった場合や、複雑な処理を行う場合には、HTMLの表示を妨げない配置が重要になります。

さらに実際のWeb制作ではJavaScriptを外部ファイルとして管理する方法もよく使われます。JavaScriptのコードを別のファイルにまとめておくことで、HTMLが読みやすくなり、複数のページで同じコードを使い回すことができます。

外部JavaScriptファイルはscriptタグのsrc属性を使って読み込みます。次のような書き方になります。


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

src属性は読み込むファイルの場所を指定する属性です。この方法を使うことでHTMLとJavaScriptの役割をきれいに分けることができ、Webサイト全体の管理がしやすくなります。

最後にscriptタグとJavaScriptを使った簡単な動作サンプルをもう一度確認してみましょう。ボタンをクリックするとページの内容が書き換わる例です。


<h1>JavaScriptテキスト表示サンプル</h1>

<button onclick="showText()">メッセージ表示</button>

<p id="message"></p>

<script>
function showText(){
document.getElementById("message").innerHTML = "JavaScriptで文字を表示しました";
}
</script>

ブラウザ表示

このようにscriptタグとJavaScriptを組み合わせることで、Webページは単なる文章の表示だけでなく、ユーザーの操作に応じて動作するインタラクティブなページになります。ボタン操作、入力チェック、メニュー表示、アニメーションなど、現代のWebサイトの多くの機能はこの仕組みで作られています。

HTML scriptタグの理解は、フロントエンド開発の第一歩とも言える重要な知識です。HTMLの基本構造を理解しながら、JavaScriptを少しずつ組み合わせていくことで、より実用的なWebページを作れるようになります。これからWeb制作やプログラミングを学ぶ人は、scriptタグの基本構文、配置方法、外部ファイルの読み込みなどを何度も実際に書いて確認しながら覚えていくと理解が深まります。

先生と生徒の振り返り会話

生徒

「scriptタグって、HTMLの中でJavaScriptを使うためのタグなんですね。」

先生

「そうですね。HTMLだけではページの構造しか作れませんが、JavaScriptをscriptタグで読み込むことでページに動きや処理を追加できます。」

生徒

「scriptタグはheadにも書けるしbodyの最後にも書けると覚えました。」

先生

「その通りです。特にbodyの最後に書く方法はWeb制作でよく使われます。HTMLの表示を先に行い、そのあとJavaScriptを読み込むことでページ表示がスムーズになります。」

生徒

「それから外部JavaScriptファイルを読み込む方法もありましたね。」

先生