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

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

(Last modified: )

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 )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。