HTMLでJavaScriptを読み込む方法

HTMLでJavaScriptを読み込む方法の解説画像

JavaScriptを読み込む方法

方法1:HTMLに直接書く方法

HTMLでJavaScriptを読み込む方法の解説画像


<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>JavaScriptの読み込み方</title>
	</head>
	<body>
		<h1>JavaScriptの読み込み方</h1>
		<h2>h2見出し</h2>
		<h3>h3見出し</h3>
		<p>本文本文本文本文本文本文本文本文</p>
		<script type="text/javascript">
			function main(){
				'use strict';
				console.log('test');
			}
			main();
		</script>
	</body>
</html>

htmlのscriptタグ内に直接JavaScriptのコードを書く方法です。

方法2:jsファイルを読み込む方法

HTMLでJavaScriptを読み込む方法の解説画像

htmlファイルとは別にjsファイルを設置します。

HTMLでJavaScriptを読み込む方法の解説画像


<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>JavaScriptの読み込み方</title>
	</head>
	<body>
		<h1>JavaScriptの読み込み方</h1>
		<h2>h2見出し</h2>
		<h3>h3見出し</h3>
		<p>本文本文本文本文本文本文本文本文</p>
		<script src="./javascript.js"></script>
	</body>
</html>

htmlのscriptタグでjsファイルのパスを指定して読み込む方法です。

使い分け方

メリット
方法1:(直接書く) ページの読み込み時にファイルの読み込み数が減るのでページの表示速度向上に繋がる。(htmlファイルだけ読み込めばjsの処理も読み込まれる)
方法2:(別ファイル) 複数のページで同じ処理を使いまわせるのでメンテナンス性が上がる。(1つのjsファイルを書き換えれば全てのページで処理が変更される)

原則としては、1つのページでしか使わないJavaScriptはそのページのhtmlに直接書き、複数のページで同じ処理を使いまわす場合は別ファイルにしておいたほうが良いということになります。

JavaScriptを設置する場所

htmlファイルのhead内、又はbody内に設置する

head内、又はbody内のできるだけ最後のほうにscriptタグを書きます。

実際はHTMLファイルのどこに書いても動作しますが、ルールとしてhead内、またはbody内に書くことになっています。また、できるだけ最後のほうに設置する理由としては、htmlは上から順番に処理されていきますが、JavaScriptの読み込み中はhtmlの読み込みが停止するので、JavaScriptの読み込みに時間がかかった場合にページの表示が遅くなってしまうなどの問題が生じるからです。

HTMLでJavaScriptを読み込む方法の解説画像

head内に書いてもbody内に書いても見た目としては同じように動作します。(head側が先に処理されている)

HTMLでJavaScriptを読み込む方法の解説画像


<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>JavaScriptの読み込み方</title>
		<script type="text/javascript">
			console.log('HEAD内:動作しました');
		</script>
	</head>
	<body>
		<h1>JavaScriptの読み込み方</h1>
		<h2>h2見出し</h2>
		<h3>h3見出し</h3>
		<p>本文本文本文本文本文本文本文本文</p>
		<script type="text/javascript">
			console.log('BODY内:動作しました');
		</script>
	</body>
</html>

使い分け方

使い分けるポイント
head内 ページの前提となる処理など、ページの読み込みの前にJavaScriptを読み込む必要がある場合。
body内 ページの読み込みの後でも良い処理の場合。ページのhtmlを操作する場合。

ページの読み込みよりも先にJavaScriptを読み込まなければならないなどの事情がない限りは、body内の一番最後に読み込むことが推奨されます。

読み込みに時間がかかるJavaScriptをhead内に設置すると、htmlの読み込みがJavaScriptの読み込みの後になってしまうのでページの表示が遅くなってしまいます。また、htmlを操作する内容のJavaScriptをhead内で読み込むと、JavaScriptの読み込み時に対象のhtml要素が見つからずにエラーになってしまいます。したがって、特段の事情がなければbody内の一番最後に読み込むのがおすすめです。

投稿されたコメント一覧

コメント投稿フォーム

必須項目
任意項目

ウェブサービス一覧