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 ページを開きます。
HTML ページから外部に作成した JavaScript のファイルが読み込まれ、 JavaScript コードが実行されて画面に文字列が出力されました。
※ 簡潔に記述できるので document.write をこのページでは使用していますが、現在は document.write の利用は非推奨となっています。 document.write の代わりとして「現在処理を実行しているscript要素を取得(currentScript)」などを使用されてください。
-- --
JavaScript のコードを別のファイルに記述する方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。