jQueryを使うための準備

投稿日時：
カテゴリ：VBA・Javascript・PHP・その他プログラミング全般

Webサイトを作成する際に、一般的なWebサイトであっても、社内や社外関係者向けの業務システムであっても、全世界に公開されているインターネット上のいろいろなWebサイトを参考にして、目的とするWebサイトを作成するのではないでしょうか。

最近ではカッコいいデザインで、アニメーションなどの効果を見せながら動くWebサイトが数多く見られます。これらのWebサイトの多くがjQueryと呼ばれるJavaScriptのライブラリを使って作成されています。
このパワーアップコラムでもjQueryの外部ライブラリを利用した「Colorbox」「Colorbox その2」をご紹介しています。

そこで、本コラムではjQueryを使うために、どのような準備をすれば良いのかご紹介いたします。

jQueryはJavaScriptのライブラリであるため、「jquery.js」のようなファイルを利用するWebサイトにて読み込む必要があります。
しかし、jQueryにはバージョンや種類があるため、目的に応じて読み込むファイルを選択しなければなりません。

そこで、まずはjQueryのバージョンと種類についてご説明しましょう。

◆バージョン

　▼jQuery 1.x
　　バージョン1.x系は2006年8月に1.0がリリースされました。その後、数か月単位でバージョンアップされ、本コラム掲載時点での最新バージョンは1.10.2になります。
　
　▼jQuery 2.x
　　バージョン2.x系は今年の4月に最初の2.0がリリースされました。基本的にバージョン1.x系と同じ動きをしますが、Internet Explorer 8以前の古いバージョンにおける動作をサポートしないため、バージョン1.x系よりも動作が軽くなっています。（最新バージョンのminファイル（minの意味については後述）で比較すると、バージョン1.x系（1.10.2）の91kbに対し、バージョン2.x系（2.0.3）は82kbと約1割の容量削減となっている。）

jQueryは大きく分けて1.x系と2.x系のバージョンがあります。会社などで、古いバージョンのInternet Explorerを使っているのであれば、業務システム開発用にjQuery 1.x系を使う方が良いでしょうし、新しいブラウザのみを考えれば良い、一般ユーザ向けのWebサイトであれば、jQuery 2.x系が良いでしょう。
また、細かいバージョン（2.0.3など）については、他のライブラリとの組み合わせなどによりバージョンの違いが原因で動作に不具合が発生する可能性もあるので、Webサイトの本番運用時には細かいバージョンまで明確にしておく事をお勧めいたします。

◆種類
　jQueryには「min」と付いたファイルと付いていないファイルがあります。最初にファイル名を見たときには「min」と付いているので、ライブラリの数が少ないのかと勘違いしてしまいましたが、両方とも同じライブラリであり、同じ動きをします。それでは、何が違うのでしょうか。以下にてご説明いたします。

　▼uncompressed(例：jquery-2.0.3.js(237kb))
　　開発者が読みやすいように、インデントや改行が記載され、コメントも多く含まれているために、開発時やトラブル発生時に調査（デバッグ）しやすいようになっています。
　
　▼minified(例：jquery-2.0.3.min.js(82kb))
　　コメントだけではなく、改行コード、インデントなどを全て削除し、できる限りファイルサイズを小さくしたものになります。そのため、開発者が読もうとしても読みにくいものとなっていますが、ファイル容量が小さくなっているために動作が軽くなり、本番運用時に適しているでしょう。

それでは、次にjQueryを読み込む方法について見てみましょう。jQueryを読み込む方法は大きく分けて2通りになります。

1.ダウンロードして使う
　jQueryのダウンロードサイトからダウンロードしたファイルを管理しているサーバ上に配置し、通常のJavascriptと同じように読み込むための設定をします。

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

2.CDNを使う
　CDN(Contents Delivery Network)は、あらかじめプロバイダが用意したインターネットに公開されたサーバ上にjQueryのライブラリが配置されており、誰でも無料で利用可能です。
　
　jQueryはjQuery、Google、Microsoft、CDNJSといくつかのサイト（詳細はこちらをご覧ください。）で提供されています。Googleを例に挙げると、以下の書き方で読み込むための設定ができます。

　<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

ダウンロードして使う方が良いのか、CDN上のファイルを読み込むのが良いのか迷うところですが、CDNには以下に挙げるメリットがあるため、何か特別な理由が無い限りは、CDNを利用する方が良いでしょう。

・作成するWebサイトと同じ場所に無いので、効率的にライブラリを呼び出せる。
・一度呼ばれるとローカルにキャッシュされるので、同じjQueryを使っているWebサイトを一度でも参照していれば、何度も読み込む必要が無い。
　

今回はjQueryを使うための準備についてご紹介いたしました。次回以降のコラムではjQueryを使って何ができるかご紹介したいと思います。
本コラムが、読者の皆さんの日々の業務に役立てば幸いです。

（担当：小口　真己）