初心者向け講座早見表
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を使って何ができるかご紹介したいと思います。
本コラムが、読者の皆さんの日々の業務に役立てば幸いです。
（担当：小口 真己）
