jQuery:外部ファイルへの書き方と読み込み方法！

今回は、jQueryおよびJavaScriptの外部ファイルへの書き方と、その外部ファイルを読み込む方法について、サンプルコードを交え記載してみたいと思います。

いままで、jQueryの色々なサンプルコードを記載いたしました。また、メソッドの作成方法やプラグイン化など、jQueryのコード自体の量が多い場合や、汎用性を考えプラグイン化などを作製した場合は、外部ファイルとしてHTMLとは別のファイルとして作成および読み込むと便利なことも多々ございます。

という事で、それでは今回はッ、

・jQuery:外部ファイルへの書き方
・外部ファイルのメリットとデメリット
・jQuery:外部ファイルの読み込み方法！

上記について記載していこうと思います…。

jQuery:外部ファイルへの書き方

jQueryおよびJavaScriptのコードを外部化する方法については、とても簡単で、下記にサンプルコードを記載してみます。
まずは、HTML内に記載したjQueryのコードより…。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
var newText = $(“#point”).text().replace(“テスト”,”test”);
$(“#point”).text(newText);
});
</script>
</head>
<body>
・・省略・・
<p id=”point”>テスト：replace()メソッドを使えば、文字列を置き換えることができます。</p>
・・省略・・
</body>
</html>

上記の<script>以降～</script>前までを抜き出して、別のテキストエディタに記載します。この場合Windowsなどであれば、メモ帳などが簡単でよいように思います。

サンプルscript$(function(){
var newText = $(“#point”).text().replace(“テスト”,”test”);
$(“#point”).text(newText);
});

上記の際の注意点としては、初心者の方がやってしまいがちな間違えとしては、コード自体に「script」を含めてしまうことがございます。<script>自体は、あくまでもHTMLのタグになりますので、jQueryの外部ファイル自体には必要ございません。また、上記のように書き出したら、以前記載いたしましたように下記のよう記述しておくとベストだと思います。

サンプルscript2jQuery(function($){
var newText = $(“#point”).text().replace(“テスト”,”test”);
$(“#point”).text(newText);
});

上記のようにメモ帳などのテキストエディタに記述できましたら、文字コードを「utf-8」拡張子を「.js」にして、任意の名前を付けて保存すれば完成となります。

とても簡単な作業になりますが、上記サンプルのような短いコードであれば、外部ファイルにすることはあまりオススメしません。理由は後述します。

外部ファイルのメリットとデメリット

jQueryおよびJavaScriptのコードを外部化することができるようになると、HTMLのソースコードがシンプルになり、整理しやすく、また、後々の手直しやカスタマイズにも便利なことと思います。しかしながら一概にすべて外部ファイルにすれば良いかというと、そうでもありませんので、外部ファイルのメリット・デメリットについて記載してみます。

jQuery:外部ファイルのメリット

外部ファイルにするメリットは、メンテナンス性および実際にコードを記述しなおす場合など、分かりやすいことと、同じjsファイルを複数のページで使用している場合は、読み込むスピードが速くなることがあげられます。

まず、メンテナンス性につきましては、複雑なコードになればなるほど、部分部分でコードを実際に見てメンテナンスをおこなっていくので、一度に大量なコードをみて記述しなおすと、それだけ間違えがおきやすくなってしまうことと思います。個人的な経験からも、パーツごとやブロックごと、jQueryの場合であれば、メソッドごとにメンテナンスをおこなっていく場合が多いように思います。

読み込み速度につきましては、この場合、あくまでも複数のページおよび、ある程度、複雑なコードの場合ということを前提にいたします。
外部ファイル化することで、一度読み込まれたjsファイルが、他のページでも使われている場合、キャッシュが効いて全体的に読み込む速度が速くなることと思います。

※キャッシュとは、訪問したWebページの情報を一時的に保存する仕組み（またはその一時的なデータそのもの）のこと。

jQuery:外部ファイルのデメリット

外部ファイルにするデメリットは、HTMLファイルから外部ファイルを読み込む際にHTTP通信が1つ発生することになります。先ほど上記では速度が速くなると記載いたしましたが、単一ページにしか使用されておらず、短いコードなどを外部化した場合、速度自体は外部ファイルを読み込みに行くので、逆に速度は遅くなってしまいます。

また、外部ファイルが多ければ多いほど、それだけ読み込む回数が増えてしまうので、レスポンスがそれだけ悪くなってしまいます。

まとめると、jQueryおよびJavaScriptのコードを外部化する場合は、複雑かつ複数のページで同じjsファイルを使用していている場合が、最も有効なように思います。単一ページでのみの仕様の場合は、多少複雑でも外部化することはなく、HTML上に記述することが望ましいように思います。

また、外部ファイルにした際、<head>内で読み込む方法と、</body>直前で読み込む方法がありますが、個人的にはレスポンシブでコーディングを行う際は、ファーストビューとくにモバイルではjQueryでのコーディングは控え、CSSでコーディングを行うことが多くなっています。ファーストビュー以外の箇所であれば、jQueryでコーディングを行うこともあり、その際は</body>直前で外部ファイルを読み込むことが多くなります。

これは、すべてページの読み込み速度を考慮したコーディングを心がけていることから、上記のような方法をとることが多くなります。

jQuery:外部ファイルの読み込み方法！

それでは、jQuery:外部ファイルの読み込み方法！について記載してみたいと思います。
上記、一番初めに記載いたしましたサンプルHTML

上記の黄色でマークされた部分を外部ファイルに置き換えるだけになります。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/sample.js” charset=”utf-8″></script>
</head>
<body>
・・省略・・
<p id=”point”>テスト：replace()メソッドを使えば、文字列を置き換えることができます。</p>
・・省略・・
</body>
</html>

上記、type=”text/javascript”はtypeの指定でお約束のようなものですが、type属性の初期値はtype=”text/javascript”なので、JavaScriptの場合にはtype属性の指定を省略することができます。

注意点はcharsetになります。charset（キャラセット）は外部のスクリプトファイルの文字エンコーディングを指定する属性で一般的に文字化けなどを防ぐ方法として、使用されてきましたがHTML5より廃止されていますので、HTML5でコーディングを行う場合は不要になります。

といことで今回は、jQuery:外部ファイルへの書き方と読み込み方法！について、サンプルコードを交え記載いたしました。

ファイルの外部化、とても簡単にHTMLに指定することができ、コードがシンプルになってとても良いことと思います。しかしながら、ページの読み込み速度を考慮いたしますと、一概に外部ファイル化をおこなうことが良いとはいえません。作成するWebページの内容や、使用するページ上のパーツごとに外部ファイルにするか、もしくは、HTML上にScriptとして記述するか、しっかりと考慮したい所ですね。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。