JavaScriptを記述する場所

この記事では、JavaScriptのプログラムコードを記述する場所について、サンプルコードと実行結果の画像付きで説明しています。

1 JavaScriptの記述場所
2 HTMLファイル内にJavaScriptを記述する
3 別ファイルにJavaScriptを記述する
4 最後に

JavaScriptの記述場所

JavaScriptのコードを記述できる場所は、2か所あります。

HTMLファイル内
別ファイル（「.js」の拡張子を持つファイル）

HTMLファイル内にJavaScriptを記述する

HTMLファイル内のどこに記述するか

JavaScriptのコードをHTMLファイル内に記述する場合、まず大前提となるのは script タグの内側でなければならないというルールです。

その前提を踏まえて、ファイルの最下部（bodyの閉じタグ直前あたり）を推奨します。
あくまでも推奨であり、絶対的なルールではありません。

<!doctype html>
<html>
<head>
  <title>JavaScript入門</title>
</head>
<body>
  <h1>JavaScriptの記述場所</h1>
  <p>JavaScriptをHTMLファイル内に記述する際は、ファイルの最下部を推奨します。</p>

  <script>
  // JavaScriptコードをここに記述
  </script>
</body>
</html>

実践で検証する

「h1タグの内容をコンソールに表示させる」サンプルプログラムを作成し、JavaScriptをHTMLの上部に記述した場合の挙動を確認してみましょう。

※ この検証に使用するJavaScriptのコードは少々レベルが高く、検証結果の解説も難しいので、JavaScriptの学習を始めたばかりの方は理解できなくても大丈夫です。

コードと実行結果

sample1.html

<!doctype html>
<html>
<head>
  <title>JavaScript入門</title>
</head>
<body>
  <script>
  let h1 = document.querySelector("h1").textContent;
  console.log(h1);
  </script>

  <h1>JavaScriptの記述場所</h1>
  <p>JavaScriptをHTMLファイル内に記述する際は、ファイルの最下部を推奨します。</p>
</body>
</html>

実行結果

エラーの見方と原因の解説

今回のサンプルプログラムをHTML上部に記述して実行すると、👆のとおりエラーが発生しました。

エラーメッセージが表示されている画面右サイドの部分は「デベロッパーツール」（開発者ツール）です。
※ 当ブログでは、ブラウザにGoogle Chromeを使用していますが、EdgeやSafariなど、他のモダンブラウザにも開発者ツールはあります。

ではエラーメッセージを紐解いていきます。

エラーメッセージ原文

Cannot read properties of null (reading ‘textContent’)

エラーメッセージ日本語訳

nullの属性を読むことはできません（「textContent」の読み込み中に発生）

「null」とは、多くのプログラミング言語に登場するモノで、「何もない」状態、「虚無」を意味します。
よって、さらに日本語として読みやすくしていくと、次のようになります。

エラーメッセージ意訳

「textContent」という属性を参照しようとしていますが、参照元はnull（虚無）なので、虚無は属性を持つことができず、読むこともできません

この意訳👆を踏まえてコードを見ると、「textContent」という属性を参照しようとしているのは以下の行（太字／文字色緑／赤マーカー）で、さらに具体的には「document.querySelector(“h1”)」の箇所を指します。

sample1.html

<!doctype html>
<html>
<head>
  <title>JavaScript入門</title>
</head>
<body>
  <script>
  let h1 = document.querySelector("h1").textContent;
  console.log(h1);
  </script>

  <h1>JavaScriptの記述場所</h1>
  <p>JavaScriptをHTMLファイル内に記述する際は、ファイルの最下部を推奨します。</p>
</body>
</html>

「document.querySelector(“h1”)」というコードを日本語の文章に訳すと、次のようになります。
👉「htmlドキュメントから『h1』に該当する要素を選び問い合わせる」

しかし、問い合わせている「h1」というタグ要素は、JavaScriptのコードよりも下にあります。
そのため、問い合わせ処理が動作するタイミングでは、まだ「h1」タグは存在しない扱いとなるので、nullになってしまったというわけです。

これは、「プログラムコードは、特に制御されない限り『上から下』へと順次読まれていく」という性質によるものです。

「JavaScriptはHTML上部に書けないのではないか？」という疑問を持たれた方もいらっしゃるかもしれませんが、結論から言えば、上部に記述することも可能です。
しかし、もうひと手間かける必要があるため、下部に記述することが推奨されます。

別ファイルにJavaScriptを記述する

HTMLファイルとは別のファイルにJavaScriptを記述することができます。
ファイルなら何でも良いというわけではなく、「.js」拡張子のファイルです。（※ TypeScriptの場合は「.ts」になる等、例外はある）
そうすることで、主に次のようなメリットがあります。

別ファイルに記述するメリット

HTMLとJavaScriptのコードを分離でき、可読性が向上する
複数のHTMLで使用する機能をHTMLごとに記述する必要がなくなる

JavaScriptを別ファイルに記述する方法

任意のエディタでプログラムコードを記述する

当ブログではVS Code（Visual Studio Code）を使用します。

※ 「.js」ファイルにはscriptタグは不要です。

script.js

let message = "Hello JavaScript";

console.log( message );

「Hello JavaScript」というメッセージをコンソールに出力するだけのプログラムです。

ファイルを「.js」の拡張子で保存する

今回は分かりやすさを重視し、index.html と同じ場所にJavaScriptファイル（JSファイル）を保存しています。

HTMLからJSファイルを読み込む

scriptタグを使用して、HTMLからJavaScriptの別ファイルを読み込みます。

属性の「src」とは、ソース（source）の略です。
よって、<script src=”./script.js”>を日本語に訳すと、「スクリプトを読み込みます。元ネタ（src）は、同じ場所に保存されている『script.js』です」という意味になります。

index.html

<!doctype html>
<html>
<head>
  <title>JSファイルを読み込む</title>
</head>

<body>
  <!-- 👇の記述により別ファイルのJavaScriptが読み込まれる -->
  <script src="./script.js"></script>
</body>
</html>

ファイルのPATHを表す記号は重要です。

「.」（ドット）は、主語となるファイルが保存されている場所
「/」スラッシュは、フォルダの区切り
「../」（ドット2つとスラッシュ）とすると、1つ上の階層を指す

参考：HTMLファイルとは異なる場所にJSファイルが保存されている場合

index.htmlがあるフォルダの中に「js」フォルダがあり、その中にscript.jsが保存されている場合、
読み込むためのscriptタグは以下のようになります。

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

実行結果を確認する

index.htmlをブラウザで開き、デベロッパーツールのコンソールで結果を確認してみましょう。

実行結果

> Hello JavaScript

コンソールに👆のとおり「Hello JavaScript」と表示されていれば成功です。

最後に

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

最後までお読みいただき、ありがとうございます。

『詳説 JavaScript』メニューに戻る