JavaScriptを外部ファイル化する方法

  • 公開日 : 2012年9月17日
  • カテゴリ : Web制作

メモ
Googleマップがきっかけになったことで現在はAjaxが隆盛を極め、昔はJavaScriptといえば不快な演出などで嫌われがちだったものが、今ではなくてはならないものになっている。

そのような今の時代はWEBブラウザの設定でJavaScriptをオフにしている人などはほぼいないだろうと考えられ、またフィーチャーフォン(ガラパゴスケータイ)では動作しなかったJavaScriptが動作するスマートフォンがかなり普及したことで、ホームページ上でJavaScriptを使用する障壁は以前に比べかなり無くなったといえる。

先日の記事で書いたようなFacebookのいいね！ボタンやGoogleアナリティクスを設置する際にはJavaScriptが用いられ、自分のブログやホームページに設置する人も多いと思われるが、その際にJavaScriptのコードをそのままHTML内に貼り付けるのはハッキリ言って美しくない。

これは「JavaScriptが正常に動作すれば良い」という問題ではない。
自分のブログやホームページのクオリティに対するこだわりであり、美学の一種だ。

というわけで、今回はJavaScriptを外部ファイル化する方法を説明しようと思う。
かなり今更感が満載の企画だが、知らない人だけが参考にしてくれれば幸いである。

JavaScriptを外部ファイル化する手順解説

まずJavaScriptのコードをテキストエディタで開く。
今回はJavaScriptコードの一例としてGoogleアナリティクスのコードで説明します。
最初は以下の状態になっている。(ユーザー識別番号の部分は*に変換してます。)

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-********-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

そして、最初の<script type="text/javascript">と最後の</script>を削除する。

削除したらそのままJavaScriptファイルとして保存する。
JavaScriptファイルとして保存する方法は、保存するファイル名の拡張子を.jsにするだけである。

なに？ 「拡張子」の意味がわからない？
わかった、それはまた次回説明しよう。 →(拡張子の解説記事はこちら)
とにかく、「***.js」のようなファイル名で保存する。(***の部分は半角英数字なら何でも良い)

そして次に、HTML内のそのJavaScriptを設置したい部分に以下のコードを記述する。

<script type="text/javascript" src="***.js"></script>

src=”***.js”の部分はもちろん先ほど保存したJavaScriptファイルへのパスだ。
以上である。
簡単だよね。
こんな簡単な作業でHTML内が美しくなるのだから、やらない人の気が知れないというのが私の正直な感想である。

外部ファイル化するデメリットについて

2013年8月18日追記：書くのを忘れていましたが、外部ファイル化するということのデメリットとして「HTTPリクエストの数が増える」という点があります。

HTTPリクエストの詳しい説明は今回はしませんが、このような外部ファイル化を多くすることにもデメリットがあるのです。
なので、JavaScriptのコードをある程度まとめて1つのファイルにしておき、それを今回の記事のような外部ファイル化するのがスマートなのではないでしょうか。

その際、どれだけのコードを1つのファイルにまとめるか、などはその後のメンテナンス性などを考慮すると良いと思います。

このページを見た人はこんなページも見ています