JavaScriptのコードを別のファイルに記述する

広告

HTML ファイル内に直接 JavaScript のコードを記述する代わりに、別のファイルに JavaScript のコードを記述し、そのファイルを HTML ファイルから読み込むことができます。同じコードを複数の HTML ファイルで利用する場合などに便利です。ここでは JavaScript のコードを別のファイルに記述する方法について解説します。

JavaScriptのコードが記述されたファイルを作成する

例として次のように HTML ファイルの中に直接 JavaScript を記述していたものを、コードだけ別のファイルに分けてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript サンプル</title>
</head>
<body>

<script>
document.write("<p>JavaScriptのテスト</p>");
</script>

</body>
</html>

JavaScript のコードはテキストファイルに記述します。ファイルを作成し、実行する JavaScript のコードを記述してください。( script 要素は記述する必要はありません)。

document.write("<p>JavaScriptのテスト</p>");

ファイルを保存します。 JavaScript のコードを記述したファイルの拡張子は .js とするのが一般的です。今回は sample.js とします。

次に HTML ファイルから JavaScript のコードが記述されたファイルを読み込みます。 HTML ファイル内でコードを読み込みたい位置に次のように記述してください。

<script src="コードが記述されたファイルのパス">
</script>

HTML ファイルと JavaScitp のコードが記述されたファイルが同じディレクトリにある場合であれば、次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript サンプル</title>
</head>
<body>

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

</body>
</html>

これで完成です。 JavaScript のコードを記述したファイルが HTML ファイルとは別のドメインで公開されている場合などは、 src 属性の値として絶対パス( https://www.example.com/sample.js )でファイルの位置を指定してください。

JavaScriptのファイルの文字コードを指定して読み込む

JavaScript のコードが記述されたファイルと、そのファイルを読み込む HTML ファイルで使用している文字コードが異なる場合、 HTML ファイル側で JavaScript ファイルの文字コードを指定して読み込むことができます。

<script src="コードが記述されたファイルのパス" charset="文字コード">
</script>

script 要素を記述するときに charset 属性の値として JavaScript ファイルで使用している文字コードを指定します。例えば JavaScript ファイルの文字コードが Shift_JIS だった場合には次のように記述します。

<script src="./sample.js" charset="Shift_JIS">
</script>
サンプルコード

次のような HTML ページを作成し、 sample4-1.html という名前で保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript サンプル</title>
</head>
<body>

<p>
この下に JavaScript を使って文字列を出力します。
</p>

<script src="./js/sample4-1.js">
</script>

</body>
</html>

そして次のような JavaScript のコードを記述したファイルを作成します。 HTML ファイルが保存されたディレクトリの下に js というディレクトリを作成し sample4-1.js という名前で保存します。

document.write("<p>JavaScriptファイルの読み込みテスト</p>");

どちらのファイルも文字コートとして UTF-8 で保存しています。

ブラウザから先ほど保存した HTML ページを開きます。

JavaScriptのコードを別のファイルに記述する(1)

HTML ページから外部に作成した JavaScript のファイルが読み込まれ、 JavaScript コードが実行されて画面に文字列が出力されました。

※ 簡潔に記述できるので document.write をこのページでは使用していますが、現在は document.write の利用は非推奨となっています。 document.write の代わりとして「現在処理を実行しているscript要素を取得(currentScript)」などを使用されてください。

-- --

JavaScript のコードを別のファイルに記述する方法について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。