JavaScriptをどこに書けばよいか
さて、JavaScriptはどこに書けばよいのでしょうか。記述箇所には、2つのパターンがありますので、それぞれの方法を見ていきましょう。
- HTML中にscript要素で書く
- 外部ファイルを読み込む
まず、この2つの方法を比べてみましょう。
| 方法 | HTML中に書く | 別ファイルに書く |
|---|---|---|
| メリット | 簡単に記述できる | 複数のページで同じスクリプトを利用できる |
| デメリット | 大きなスクリプトには不向き | スクリプトを共通化することで、そのぺージに不要なコードも含まれてしまう |
このように、そのページ限りのスクリプトについては、HTMLファイル中に書いてもよいでしょう。しかし、一般的には外部ファイルを読み込む方法が普通です。
HTML中にscript要素で書く
次のようにHTML中にJavaScriptを書くことができます。
<body>
<script>
document.writeln("<h1>これは見出しです</h1>");
</script>
</body>script要素は headの中でもbodyの中でも書くことができます。複数のscript要素を記述することもできます。グローバル変数は、複数のscript要素の間でも有効です。
<!DOCTYPE html>
<html>
<head>
<script>
let mainHeading="これは見出しです";
</script>
</head>
<body>
<script>
document.writeln("<h1>"+mainHeading+"</h1>");
</script>
</body>
</html>外部ファイルを読み込む
次のコードのように、script要素を使ってJavaScriptを記述した外部ファイルを読み込みます。この場合も、head内、body内のいずれの場所にも書くことができます。
<head>
<script src="javascript.js"></script>
</head>このようなJavaScriptを読み込む記述は、複数のHTMLファイルで共通化することができますから、一つのファイルにJavaScriptをまとめておけばよいということになります。
特定のページ専用にしたいスクリプトがあるなら、共通のスクリプトは common.js 、専用のスクリプトは specific.js のように複数のファイルで記述していくこともできます。
HTMLのどこにJavaScriptを書くのか
さて、JavaScriptはHTMLのどの場所にも書けることがわかりました。では、どの場所に記述していくのが良いのでしょうか。次のコードをご覧ください。
<!DOCTYPE html>
<html>
<head>
<script>
let heading1=document.getElementById("heading");
heading1.innerHTML="見出し";
</script>
</head>
<body>
<h1 id="heading">これは見出しです</h1>
</body>
</html>
このスクリプトは失敗します。なぜかというと、document.getElementById 関数を呼び出すときに、まだ h1 要素は読み込まれていないからです。このように、HTMLを操作しようとする場合には、スクリプトは要素が読み込まれた後で実行する必要があるのです。次のコードは成功します。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="heading">これは見出しです</h1>
<script>
let heading2=document.getElementById("heading");
heading2.innerHTML="見出し";
</script>
</body>
</html>
このようにスクリプトを実行するタイミングには気を使う必要があります。読み込みタイミングに依存しないスクリプトを書くためには、window.onload や、jQueryを使う場合には$(document).ready イベントを使って処理を開始するのが良いでしょう。
次のコードは成功します。
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
let heading1=document.getElementById("heading");
heading1.innerHTML="見出し";
}
</script>
</head>
<body>
<h1 id="heading">これは見出しです</h1>
</body>
</html>
注
- この記事は、ECMAScript 2015(ES6) を前提に書いています。古い実装では、異なる場合があります。