HTMLファイルにJavascriptを読み込む方法を解説します。
JavascriptはHTMLファイルに直接書いたり外部ファイル化してscriptタグで読み込むこともできます。
Javascriptの実行タイミングや読み込めない原因についても合わせて紹介します。
HTMLでJavascriptを読み込む基本的な方法
HTMLでJavascriptを読み込むには以下のような方法があります。
- HTMLファイルに直接書いて読み込む
- 外部ファイル化して読み込む
どちらでもJavascriptを実行できますが、長いコードをHTMLに書くと読みにくくなるためできるだけ外部ファイル化することをおすすめします。
読み込み方法について以下で解説します。
HTMLファイルに直接書いて読み込む
HTMLファイル内にJavascriptコードを直接書いて読み込むには、scriptタグの中にコードを書けばOKです。
HTMLファイル内にJavascriptコードを書く場合のサンプルコードは次のようなものです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptコードをHTMLに直接書く方法</title>
</head>
<body>
<h1>JavaScriptコードをHTMLに直接書く方法</h1>
<button id="myButton">ここをクリック</button>
<!-- scriptタグの中にコードを記述 -->
<script>
// ボタンを取得
const button = document.getElementById('myButton');
// クリックイベント作成してクリックされたら以下の内容を実行
button.addEventListener('click', () => {
alert('クリックした！');
});
</script>
</body>
</html>ここではボタンをクリックするとアラートが表示されるシンプルなクリックイベントを作成しています。
結果は次のようになります。
外部ファイル化して読み込む
もう1つの方法はJavascriptコードを.jsファイルに書いてHTMLファイルにインポートする方法です。
先ほどと同じ例を使って外部ファイル化したものが次のサンプルコードです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptコードをHTMLに直接書く方法</title>
</head>
<body style="padding: 100px;">
<h1>JavaScriptコードをHTMLに直接書く方法</h1>
<button id="myButton">ここをクリック</button>
<!-- 外部JavaScriptファイルを読み込む -->
<script src="script.js"></script>
</body>
</html>Javascriptコードはscript.jsというファイル名でHTMLファイルと同じ階層に保存します。
scriptタグのsrc属性にファイルのパス(URL)を入力します。
// script.js
// ボタンを取得
const button = document.getElementById('myButton');
// クリックイベント作成してクリックされたら以下の内容を実行
button.addEventListener('click', () => {
alert('クリックした！');
});ボタンをクリックすると先ほどと同じようにアラートが表示されていれば問題なく読み込めています。
外部ファイルを読み込むパスについて
外部ファイルを読み込むためにはファイルのパスを入力する必要があります。
ファイルのパスの書き方には相対パスと絶対パスがあり次のように書きます。
<!-- 相対パス -->
<script src="script.js"></script>
<!-- 絶対パス -->
<script src="https://domein-name.com/folder/script.js"></script>簡単に説明すると相対パスは読み込んでいるHTMLファイルからの位置、絶対パスはルートフォルダ（ドメイン）からの位置になります。
詳しくはHTMLでCSSファイルを読み込む方法に書いているのでこちらをご覧ください。
Javascriptが読み込まれるタイミング
ここまででJavascriptを読み込むことができるようになったのですが、CSSと同様Javascriptも読み込むタイミングに注意する必要があります。
Javascriptは記述した順に読み込まれるのですが、scriptタグを設置した場所やscriptタグの属性によってタイミングを制御することができます。
例えば次のような場合です。
- HTMLを読み込む前にJavascriptを実行したい
- HTMLを読み込んでからJavascriptを実行したい
方法について以下で解説します。
HTMLを読み込む前にJavascriptを実行したい
HTMLを読み込む前にJavascriptを実行することができます。
例えばGoogleアナリティクスをWebサイトに読み込む際にヘッダーに入れるように指示されるのはHTMLの前にGooglアナリティクスを読み込むためです。
JavascriptをHTMLより前に読み込むには<head>タグ内でファイル読み込みすればOK。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>最初に読み込みたいJavascript</title>
<!-- headタグ内にJavaScriptコードを配置 -->
<script src="script.js"></script>
</head>
<body>
<!-- 省略 -->
</body>
</html>注意が必要なのは、読み込んだJavascriptでWebページのコンテンツ(DOM)を操作する必要がある場合、HTMLの読み込み前なのでエラーになる場合があります。
もしコンテンツの操作を行うなら、その部分だけ分けて別のJavascriptファイルを作成して</body>の直前に配置するようにします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>最初に読み込みたいJavascript</title>
<!-- 最初に読み込みたいJavascriptコードだけここに設置 -->
<script src="script.js"></script>
</head>
<body>
<!-- 省略 -->
<!-- DOM操作が必要なJavascriptをここに移動 -->
<script src="script-dom.js"></script>
</body>
</html>HTMLを読み込んでからJavascriptを実行したい
HTMLを読み込んでからJavascriptを実行するには先ほどの例のように</body>の直前に設置するようにします。
さらにdefer属性を使うことでHTMLの読み込みが完了してから実行されるようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>最後に読み込む</title>
</head>
<body>
<!-- 省略 -->
<!-- 最後に読み込む -->
<script src="script.js" defer></script>
</body>
</html>HTMLでJavascriptが読み込めない原因と解決方法
さいごにHTMLでJavascriptが読み込めない場合の原因と対策についていくつか紹介します。
Javascirptが読み込めない原因は次のようなものが考えられます。
- 外部ファイルのパス(URL)が間違っている
- URLの場所にJavascriptファイルがない
- HTMLタグが正しく設置されていない
外部ファイルのパス(URL)が間違っている
一番可能性が高いのがsrc属性に記述したパス(URL)が間違っていることです。
Javascriptが反映されなかったり、devtoolsでエラーが出る場合はまずURLを確認しましょう。
絶対パスで書いている場合、書き間違いがないかチェックします。
相対パスで書いている場合、正しい階層になっているかを確認してください。
URLの場所にJavascriptファイルがない
パスは問題ないのにJavascirptが読み込めない場合は、パスで指定した場所にJavascriptファイルが存在するかチェックします。
意外とアップロードし忘れていたり、ファイル名を間違っていたりすることもあります。
HTMLタグが正しく設置されていない
パスに問題がない場合はHTMLタグが正しく設置されているかを確認します。
srcを書き間違っていたり、閉じタグがなかったりするとエラーの原因になります。
まとめ
ここまでHTMLファイルからJavascriptを読み込む方法を紹介しました。内容をまとめると次のようになります。
- Javascriptファイルを読み込むには
scriptタグを使う - 外部ファイルで読み込む方法と直接記述する方法がある
- Javascriptが読み込めないときはパスやタグの記入ミスをチェック
書き間違いなどのケアレスミスはよくあることなので、すぐにエラーの原因を見つけてデバッグできるようになっておくと作業がはかどります。