Javascriptの記述方法。インラインと外部ファイルのメリットとは？

Javascriptの記述方法には、HTMLにインラインで記述する方法と外部ファイル化して読み込む方法の2つの方法があります。

今回はそれぞれの記述方法と、メリットや使い分けについてまとめました。

目次

1. インラインで記述する方法

インラインでJavascriptを書くときはscript要素内に記述します。

  1. <script type="text/javascript">
  2.   //Javascriptを記述
  3. </script>

記述場所は、基本的にHTMLファイル内のどこに記述してもOKですが、大きく3パターンに分かれます。
①head要素の中
②body要素の中
③body閉じタグの直前

③body閉じタグの直前に記述することで、HTML要素の読み込みを途中で中断することなく、Javascriptの処理が出来ると言われています。

2. 外部ファイルで記述する方

Javascriptのコード自体は外部ファイルに記述し、HTML内にはscript要素でファイルを読み込むコードを記述します。

  1. <script src="Javascriptの外部ファイル"></script>

記述場所について、こちらも基本的にHTMLファイル内のどこに記述してもOKですが、大きく2パターンに分かれます。
①head要素の中
②body閉じタグの直前

②body閉じタグの直前に記述することで、WEBページの表示速度を速めることができると言われており、最近は②body閉じタグの直前に記述することが増えているようです。

3. インラインのメリットと外部ファイルのメリット

インラインのメリット

・HTTP通信を減らして、ページの表示速度を上げる事ができる

外部ファイルのメリット

・HTMLとJavascriptが別管理されていることで、メンテナンス性が良くなる

・同じJavascriptを記述しなくて良くなる

まとめ

今回は、Javascriptをインラインで記述する方法と外部ファイルで読み込む方法の2つをご紹介しました。

どちらの記述方法を採用するかは、表示速度を重視するか、メンテナンス性を重視するかで判断する必要があります。 大規模なサイトになればなるほど、メンテナンス性を重視して外部ファイルを採用するべきだと思います。

表示速度とメンテナンス性、どちらも重視したいところですが、優先度を考慮して最適な記述方法を選択しましょう！

PAGE TOP