Javascript

【JavaScript】script要素を設置する箇所の違い

こんにちは!ともです(@_tomo_engineer)!

JavaScriptを記述する際にはHTMLファイルに読み込むと思います。

JavaScriptを記述する場所は次の4つありますが、それぞれの位置での違いについてまとめたいと思います。

  • body要素の配下
  • body閉じタグの直前
  • head要素の配下

body要素に記述

HTMLの要素内に記述するJavaScriptをインラインスクリプトと呼びます。

<script type="text/javascript">

// ここにスクリプトを記述

</script>

この様な閉じタグの中にJavaScriptは記述しますが、HTMLのbody要素の内に書いた場合ページの保守性・可読性が損なわれます。body要素に適当に記述することは避けるべきです。

<body>

<script type="text/javascript">
// スクリプトをbodyの途中で読み込む
</script>

<footer></footer>
</body>

body閉じタグの直前

ブラウザは一般的にスクリプトの読み込み後に描画を行います。

つまり、大きなスクリプトの場合読み込みに時間がかかり、描画が遅れると言う問題が発生します。

ページを高速で描画するためにbody閉じタグの直前にスクリプトを設置する事が行われます。これによりページの描画を終えた後にスクリプトを読み込む事ができます。

bodyタグにスクリプトを書くのであればbody閉じタグの直前が良いです。

<body>


<script type="text/javascript">
 // スクリプトを</body>直前で読み込む
</script>
</body>

head要素の配下

body閉じタグの直前でスクリプトを読み込む事が良いですが、これでは不十分なケースが存在します。

それはbody内でJavaScriptの関数を呼び出す必要がある場合です。

JavaScriptは先に関数の宣言をしないと実行できないため、headタグ内で事前に読み込む必要があります。

<head>
// まかなえ無いものはheadで読み込む
<script src="test.js"></script>
<head>
<body>


<script type="text/javascript">
 // スクリプトを</body>直前で読み込む
</script>
</body>

まとめ

bodyタグの任意の箇所にscriptを記述するのではなく、

  • body閉じタグの直前にスクリプトは書く
  • 閉じタグ直前でまかなえない場合はheadタグに書く

と言う事がわかりました。

しっかりと区別して利用して行きたいです。