初心者のための jQuery の基本情報 （ jQuery 入門以前）

jQuery3 が2016年に正式リリースされました。
が、現場ではまだ1系、2系を使っているところも多いと思います。

また、なぜ3種類もあるのか、今からどれを使ったらいいのかなど、初心者向けに解説します。

公式情報

• 公式 https://jquery.com/
• サポート状況 http://jquery.com/browser-support/

そもそも jQuery とは

コンテンツに動的な動きを与える JavaScript は便利ですが、高度なことが出来る分、コードの書き方が難しく、例えば非プログラマであるデザイナーには導入が困難でした。

jQuery（ジェイクエリーと読みます)は、JavaScript を容易に記述できるようにするために設計された、軽量なライブラリです。

• ジョン・レシグが、2006年1月に BarCamp NYC でリリース
• 非プログラマでも（比較的）分かりやすい、短いコードで高度なことができる
• 豊富なプラグインが開発されている
• コードが短く書けるためミスが減る
• コードが短く書けるため開発スピードが早くなる
• 基本的にクロスブラウザ対応なので、ブラウザごとに処理を変える必要がない

初期の頃は、プラグインを読み込むだけで、ほとんど JavaScript　を書かずに、画像ギャラリーやスライダーが作成できるため話題になりました。

機能の拡張だけではなく、単体でアプリのようなサービスを使うことができるプラグインもあります。

また、画面遷移を行わずに、サーバからデータのやりとりをし、画面を更新できる「非同期処理」を簡単に行えるという特徴もあります。

3つのバージョンについて

Ver1系

Internet Explorer（IE）8以前のレガシーなブラウザもサポート

Ver2系

IE9以降のモダンブラウザのみのサポート(1系より軽量で高速)

ver3系

• 2016年6月9日リリース
• バージョンを1本化
• Deferred 機能が 「Promises/A+」 仕様に準拠
• 非推奨の load、unload、error を削除し、on メソッドに統一
• カスタムセレクタの高速化

1と2系は、「レガシーブラウザ」と呼ばれる比較的古いブラウザが、バグが少なく便利な機能が増えた「モダンブラウザ」と混在していた時代に作られました。
利用者の多かった WindowsXP のサポートが終わったことで、レガシーなブラウザをサポートする必要はどんどん無くなってきました。
そのため、今は3に一本化されたということです。

jQuery 3系の利用条件

jQuery 3系の利用条件は以下の通りです。
動かす対象のマシンがこれより古ければ、1もしくは2系を使う必要があるでしょう。
ここ数年の間に発売されたマシンであればクリアしているはずです。

• IE 9以降
• Chrome/Edge/Firefox 最新のひとつ前のバージョンまで
• Opera 最新版のみ
• iOS 7以降
• Android 4.0以降

jQuery CDN

CDN とは、「コンテンツ･デリバリー･ネットワーク」の略称です。
簡単に言うと、キャッシュのきいたウェブサービスとして、CSSやJS、画像などの静的なリソースを利用できるというものです。
メリットは、自分のサーバ以外からリソースをダウンロードさせるため、コンテンツを配信する自サーバの負荷がへり、結果として表示速度が向上します。
また、自身のサーバやローカル環境にファイルをダウンロードすることなく、利用できるというメリットもあります。

当然ながら、jQuery も CDN を利用することができます。

公式からは以下のCDNが提供されています。

// jQuery 1
//code.jquery.com/jquery-1.11.1.min.js

// jQuery 2
//code.jquery.com/jquery-2.1.1.min.js
  
// jQuery 3
//code.jquery.com/jquery-3.1.1.min.js

HTML ファイルの body タグの終了より前に script タグを設置して、上記のいずれかのパスを読み込めば、すぐに利用することができます。
※パスが「//」で始まっていることに気がついたでしょうか？　これは、利用するサイトが http でも、 https でも問題なくリソースを利用するための書き方です。

CDN は、Google や、Microsoft からも提供されていますが、おすすめは Google の CDN です。

jQuery を高速化する手法としても、CDN の利用は推奨されています。

CDN を利用するリスクとしては、CDN の配信先がダウンすると、当然ながら利用できなくなることです。
そのため、最も落ちない確率が高い Google を選択するというわけです。

また、ここでは紹介しませんが、JavaScript には、CDN が利用できないときに、自サーバ内のリソースを利用するための書き方もあります。

さいごに: jQuery は「楽しい」ですよ

最近では、デザイナーでも jQuery を使う人が増えてきました。
それだけ、利用しやすいライブラリということです。
JavaScript の世界では、vue.js や AngularJS などの新しいライブラリも台頭してきています。
が、使いやすさ、分かりやすさ、そして豊富なプラグインという資産を持っている jQuery はまだまだ現役です。

JavaScript の世界になじみたいが、難しい、と悩まれている方には、「楽しい jQuery」からはじめることをおすすめします。