JavaScriptを外部ファイルで読み込む方法｜scriptタグのsrc属性を初心者向けに解説
JavaScriptをWebページに組み込む方法はいくつかあります。
- HTML文書内に直接記述する
- 外部ファイル（.js）を読み込む
- HTML要素内に直接書く（onclickなど）
このページでは、もっとも実務でよく使われる「外部ファイルに記述して読み込む方法」を初心者向けにわかりやすく解説します。
JavaScriptを外部ファイルとして読み込む方法
JavaScriptを別ファイル（拡張子 .js）として保存し、HTML側で <script> タグの src 属性を使って読み込む方法です。
もっとも一般的で、複数ページで同じスクリプトを使い回せるため、保守性が高くなります。
<script type=”text/javascript” src=”★”></script>
★：読み込むJavaScriptファイル名（URI）
★：読み込むJavaScriptファイル名（URI）
外部ファイルを使うメリットは次のとおりです。
- 複数のHTMLページで同じJavaScriptを共有できる
- HTMLとスクリプトを分離でき、コードが読みやすくなる
- キャッシュが効くため、ページ表示が高速化する
外部ファイルを使ったサンプル構成
以下は、2つのJavaScriptファイルを読み込む例です。
【HeaderMessageDisp.js】
document.write(“Header”);
【BodyMessageDisp.js】
document.write(“Body”);
【index.html】
<html>
<head>
<title>JavaScript Sample</title>
<script type=”text/javascript” src=”HeaderMessageDisp.js”></script>
</head>
<body>
<script type=”text/javascript” src=”BodyMessageDisp.js”></script>
<noscript>このページはJavaScript対応ブラウザで見てください。</noscript>
</body>
</html>
<head>
<title>JavaScript Sample</title>
<script type=”text/javascript” src=”HeaderMessageDisp.js”></script>
</head>
<body>
<script type=”text/javascript” src=”BodyMessageDisp.js”></script>
<noscript>このページはJavaScript対応ブラウザで見てください。</noscript>
</body>
</html>
まとめ
- JavaScriptは外部ファイル（.js）として分離するのが一般的
src属性で読み込むだけで複数ページで共有できる- HTMLとスクリプトを分けることで保守性が向上する
- キャッシュが効くためページ表示も高速化
