JavaScript の記述場所

Volardev 編集部 April 19, 2026

1. <script> タグ

HTMLにおいて、JavaScriptのコードは <script> と </script> タグの間に挿入します。

コード例

<script>
document.getElementById("demo").innerHTML = "初めてのJavaScript";
</script>

古いJavaScriptのサンプルでは、<script type="text/javascript"> のように type アトリビュートを使用している場合があります。現在、この type アトリビュートは必須ではありません。JavaScriptはHTMLにおけるデフォルトのスクリプト言語です。

2. JavaScriptのファンクションとイベント

JavaScriptのファンクション（関数）は、呼び出されたときに実行されるJavaScriptコードのブロックです。

例えば、ユーザーがボタンをクリックしたときなどのイベントが発生した際に、ファンクションを呼び出すことができます。

ファンクションやイベントについては、後の章で詳しく学習します。

3. <head> または <body> 内のJavaScript

HTMLドキュメント内には、任意の数のスクリプトを配置できます。
スクリプトは、HTMLページの <body> セクション、<head> セクション、またはその両方に配置することが可能です。

3.1 <head> 内のJavaScript

この例では、JavaScriptのファンクションをHTMLページの <head> セクションに配置しています。このファンクションは、ボタンがクリックされたときに呼び出されます。

コード例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "段落が変更されました。";
}
</script>
</head>
<body>
<h2>Headセクション内のJavaScriptデモ</h2>

<p id="demo">一つの段落</p>
<button type="button" onclick="myFunction()">試してみる</button>
</body>
</html>

3.2 <body> 内のJavaScript

この例では、JavaScriptのファンクションをHTMLページの <body> セクションに配置しています。

コード例

<!DOCTYPE html>
<html>
<body>

<h2>Bodyセクション内のJavaScriptデモ</h2>

<p id="demo">一つの段落</p>

<button type="button" onclick="myFunction()">試してみる</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "段落が変更されました。";
}
</script>

</body>
</html>

プロのヒント: スクリプトを <body> 要素の最下部に配置すると、ページの表示速度（ユーザー体験）が向上します。これは、スクリプトの解釈と実行がHTMLの表示を遅延させるためです。

4. 外部JavaScript

スクリプトは外部ファイルに配置することもできます。

外部ファイル：myScript.js

function myFunction() {
  document.getElementById("demo").innerHTML = "段落が変更されました。";
}

同じコードを多くの異なるWebページで使用する場合、外部スクリプトは非常に実用的です。
JavaScriptファイルの拡張子は .js です。

外部スクリプトを使用するには、<script> タグの src（ソース）アトリビュートにスクリプトファイルの名前を指定します。

コード例

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

外部スクリプトのリファレンスは、必要に応じて <head> または <body> のどちらにでも配置できます。スクリプトは、<script> タグが配置されているその場所にコードが存在するかのように動作します。

※外部スクリプトファイルの中に <script> タグ自体を含めることはできません。

5. 外部JavaScriptのメリット

スクリプトを外部ファイルに配置することには、いくつかの利点があります。

HTMLとコードを分離できる
HTMLとJavaScriptの両方の可読性とメンテナンス性が向上する
キャッシュされたJavaScriptファイルにより、ページの読み込み速度が向上する

1つのページに複数のスクリプトファイルを追加する場合は、複数のタグを使用します。

コード例

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

6. 外部リファレンスの指定方法

外部スクリプトは、以下の3つの方法で参照できます。

フルURL（完全なWebアドレス）を使用する
ファイルパス（/js/ など）を使用する
パスを指定しない（同一ディレクトリ）

フルURLを使用して myScript.js にリンクする例：

<script src="https://www.google.com/js/myScript.js"></script>

ファイルパスを使用して myScript.js にリンクする例：

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

パスを指定せずに myScript.js にリンクする例：

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