読者です 読者をやめる 読者になる 読者になる

JS入門 #002 script要素はどこに記述するべきか

いきなりちょっとマニアックな話題ですが、今回はscript要素を記述する場所について書いていきたいと思います。

script要素を記述する場所

記述する場所はざっくり3つあります。

  • body要素の配下の</body>閉じタグの直前
  • head要素の配下
  • 外部ファイルに記述する
body要素の配下の</body>閉じタグの直前

ブラウザは、スクリプトの読み込みや実行が完了するまで、以降の描画を行いません。 このためJSの処理はbody要素の末尾に配置することで、ページの描画速度を落とすことを防ぐことができます。

head要素の配下

JSでは関数を呼び出す、script要素よりも、関数定義のscript要素を先に記述しなければいけないので、head要素の配下で、事前に関数を読み込む必要があります。 その場合は、head要素の配下に配置しましょう。

外部ファイルに記述する

上記の記述方法もありますが、開発時には 外部ファイルに記述して、そのファイルをインポートするやり方が一般的です。

この記述方法には - コードの再利用がしやすい - ファイルの見通しが良くなる というメリットがあります

しかし、コードが非常に短い場合は上記の2つの記述方法の方が良い場合もあるので、状況に応じて使い分けましょう!(自分に言い聞かせている)