jQuery

[jQuery] jQueryのバージョンとタイプ

投稿日:2017年8月14日 更新日:

当記事は、「jQueryをダウンロードしようとしたら、いろいろなのがあってどれをダウンロードしたらいいか分からない!」とお悩みの方の参考になればと思います。


まず、jQueryのファイル名を見ると以下のような名前になっていると思います。

jquery-3.1.0.slim.js
jquery-2.2.4.min.js
jquery-1.12.4.js

数字の部分はjQueryのバージョン、slimとかminはタイプを表しています。

jQueryのバージョンについて

jQueryのバージョンは先頭の数値で分類して、1.x系2.x系3.x系の3種類があります。
(2017年8月現在)
違いは以下の通りです。

【jQueryのバージョンの違い】
バージョンリリース時期メモ
1.x系2006年8月IE6以降のブラウザに対応した初期バージョン。
現最終バージョンは、1.12.4。
2.x系2013年4月IE8以前のブラウザを非対応にして軽量化、処理速度の向上を図ったバージョン。IE9-11,各種ブラウザ(Chrome,Firefox,Safari,Opera,Edge)の最新版に対応
現最終バージョンは、2.2.4。
3.x系2016年6月対応ブラウザは2.x系と同じだが、新設計のため処理速度がさらに改善されたバージョン。
現最新バージョンは、3.2.1。

使い分けとしては、これから新規で作るシステムなら3.x系。IE6~8に対応させる必要がある場合や、現状1.x系や2.x系で動いているシステムで互換性が気になるようなら1.x系や2.x系を使えばよいと思います。

基本3.x系を選択、どうしても使わざるを得ない時のみ1.x系や2.x系を選択する感じですね。


あと、3.x系に対応していないjQueryプラグインを使いたい場合は、1.x系や2.x系を使わざるを得ない時もあります。


2番目以下の数字もバージョン番号です。左側の数字が大きい方が新しいバージョンです。
例)「1.3.1」と「1.2.6」だったら「1.3.1」の方が新しいバージョンです。

jQueryのタイプについて

jQueryのタイプは、無印minslimslim.minの4タイプがあって違いは、ソースの記述内容に違いがあります。

【jQueryのタイプの違い】
タイプメモ
.jsソースが見やすく整形されているタイプです。通常は使用しません。
.min.jsファイルサイズを小さくすることを目的にソースから改行やスペース等が取り除かれているタイプです。通常これを使用します。
.slim.js3.x系のみ存在するタイプです。AnimationやAjax等の機能を省いた軽量タイプです。ソースは整形済みです。
.slim.min.js.slimタイプのソース未整形タイプです。
slimタイプを使う場合はmin付きのこちらを使用します。

タイプでの使い分けとしては、基本的にmin付きのものを使用します。min無しを使うのはjQueryソースを解析する時だけなので、使う事は滅多に無いと思います。


3.x系で、slimで省かれている機能を明らかに使用しないと判断できる場合はslim付を、よく分からない場合はslim無しを使用します。

slimの方が軽いのは間違いないですが、体感できるレベルかというと微妙なところなので無理にslimを使う必要は無いと思います。

まとめ

どのjQueryを使うか悩んだら、
 ① バージョンはできる限り新しいものを使う。
 ② タイプは.minを使用する。
で良いと思います。

2017年8月現在だと最新は3.2.1なので、「jquery-3.2.1.min.js」がおすすめです。

その他追記

jQueryのタイプには上記以外に、「jquery-latest.js」というものがあります。
これは以前は、最新版のjQueryを参照するというものでしたが、現在は最新版ではく常に「1.11.1」で固定されたバージョンが参照されるというものに変わっています。

この措置はjQuery本家が本番環境での「jquery-latest.js」の使用を非推奨(バージョンアップで突然jQueryが動かなくなる事を防ぐためです。)としたためなので、「jquery-latest.js」は使用しないようにしましょう。

スポンサーリンク

スポンサーリンク

-jQuery
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[jQuery] セレクタを複数指定する

セレクタを複数指定するには、カンマで区切って複数並べればOKです。 サンプルソース 例)#btn1、#btn2に同じクリ ...

[jQuery] 要素のid値を取得する

jQueryで、要素のid値を取得するサンプルです。 サンプルソース 例)#btn1のID値を取得する [crayon- ...

[jQuery] 要素が生成されてからの時間を取得する(event.timeStamp)

要素が生成されてからの時間を取得するには、event.timeStampを使用します。 サンプルソース 例)ボタンが生成 ...

[jQuery] 指定したclassの全要素を取得してループ処理をする

指定したclassの全要素を取得してループ処理をするサンプルです。 サンプルソース 例)class="hoge"の要素一 ...

[jQuery] ページロード完了時に処理を行う

ページロード完了時に処理を行うには、readyを使います。 サンプル 例)ページロード完了時にアラートを表示する [cr ...

スポンサーリンク