jQuery1.X系と2.X系の違いと3.X系の登場 htmlとcss-新潟のホームページ制作会社 (株)アテンド

IE8以前をサポートする1.X系、IE9以降をサポートする2.X系

jQueryを使った画像スライダーを入れたり、クリックで画像を拡大させたり・・・ホームページに動きを付けたい時に必須となる「jQuery.js」
1.6.8とか2.1.4とか・・・色々なバージョンを目にしませんか？
1.9.9の次が2.0.0とか、そんな風に連番でバージョンアップしているわけではありません・・・1.12とかもありますし。

それではこれらの違いは何なの？と思いますよね。
jQuery1.X系でも2.Xでもスライダーやその他もちゃんと動くので余計わかりにくいですね。
細かく出すと訳がわからなくなりそうなので、最大の違いを一つ挙げましょう。
それはIE8以前をサポートするかどうかという点です。
WindowsXPはIE8までしかインストールできないので、WindowsXPを切り捨てるような格好になりますね。

OSのサポート終了ばかりが目立って隠れてしまっていますが、インターネットブラウザもサポートの期限が設定されています。
IEは10以前のサポートがすでに終了していますし、GoogleChromeのサポートはXPやVistaでは終了しています。Firefoxも2017年9月までのサポートとなることを発表していますね。
なのでjQueryを使おうと思うと2.X系か、2016年6月9日にリリースされた3.X系を使うしかないので、1.X系の利用はありえません。
それでもクライアント側の意向でどうしてもXPに対応しなければならない・・・そんなケースは少ないかと思いますが、それでも少なからずあり得る話です。
そんな時だけ1.X系を利用するしかありませんが、処理の呼び出しの変更やコードの削除・仕様変更などの細かな部分が異なるので、画像スライダーなどのjQueryが最新バージョンを入れると正しく動作しない場合もありますので、注意が必要です。

1.X系も2.X系も健在

インターネットブラウザのサポート範囲が異なり、1.X系が不要に見えてきますがサポートが打ち切られているわけではありません。
また古いバージョンに関しても配信されているので、ダウンロードして利用する事が可能です。
ダウンロードはこちら：http://code.jquery.com/jquery/

利用シーンはかなり限られますが、必要に応じてダウンロードして使ってみてください。

ファイル名に.minとついている物は軽量なファイル

ファイル名に「.min」と入っている物がありますが、これらの付いた物と付いていない物に機能的な差はありません。
これらの差は「ソースコードに改行やスペースを必要最低限にしているかどうか」の差になります。
改行や半角スペースがないので、ファイルサイズが少なくなるんですね。
jQuery本体のソースコードを見る場合は当然.minではない方が見やすくできています。ですがそんなケースは珍しく、あまり見る必要もありません。なので通常の利用では.min付きの方がファイルサイズも小さくなるので.min付き一択でしょう。

設計が見直された3.X系

jQuery3.X系のリリースがされてもうじき一年ほど経過します。
2.X系と3.X系ではサポートしているブラウザに違いはありません。
現在のブラウザやJavaScriptの事情に合わせて、設計から見直されて作り直されているものが3.X系なんです。

設計が見直され、構造が異なるので機能面で大幅な変更があります。
なので2.X系では正しく動作していた物が3.X系を入れたら動作しなくなった・・・なんてこともあるので、正しく動作しない物が出てきた時には最新のバージョンかどうか、jQueryはどれが推奨されているのかを確認する必要があります。

3.X系から登場した「.slim」

3.X系には.minに加えて「.slim」という名称が付いたファイルも用意されています。
これは一部の機能をカットしてより軽量化させているファイルになります。

機能のカットと聞いて、少し不安になりませんか？
安心してください。大丈夫です。
jQueryは多機能でいろいろな機能が詰め込まれています。
「この機能は本当に使う事があるのだろうか」と思うようなものも中にはあります。
それらの利用シーンがなさそうな物を思い切ってカットしたものが「.slim」なので、通常利用ではそれほど大きな問題にはなりません。

バージョンの入ったファイル名にしておこう

jQueryをページに設置するとき、「<script src=”./js/jquery.js”></script>」と書きます。
ですが「<script src=”./js/jquery.2.1.4.js”></script>」と書くとどうでしょう。
ソースコードを見ただけで、今使っているjQueryのバージョンがわかりますよね。

ただしjQueryを入れ替えるときには全ファイルを更新する必要が出てきます。
この点はデメリットになりますが、jQueryを入れ替えるような場面はそうないと思います。
それでも気になる場合は全ページで共通となる部分を別ファイル化して、ページへ読み込ませるようにしてみてください。
そうする事で更新が各段に簡単になりますよ。

共通部分を別ファイル化して読み込ませるには「JavaScript」や「php」を使う方法、「Dreamweaverのテンプレート機能を使う」方法などもありますので、いろいろと試してみてください。
個人的にはphpを使った方が相対パスの記述などの制御も簡単で、汎用性も高いと思っているのでオススメです。