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] 1970年1月1日からの経過ミリ秒を取得する($.now)

1970年1月1日からの経過ミリ秒を取得するには、$.now()を使用します。 サンプルソース 例)ボタンを押すと197 ...

[jQuery] 指定した要素の前にある兄弟要素を全て取得する(.prevAll)

指定した要素の前にある兄弟要素を全て取得するには、.prevAll() を使用します。 構文 (構文) .prevAll ...

[jQuery] ページを閉じる時に確認メッセージを表示する(beforeunload)

ページを閉じる時に確認メッセージを表示するには、beforeunloadを使用します。 しかし、beforeunload ...

[jQuery] インデックス指定で子要素を取得する(.eq)

インデックス指定で子要素を取得するには、.eq()を使用します。 サンプルソース 例)3番目の子要素を取得する [cra ...

[jQuery] フォーカスイン、フォーカスアウトイベントを設定する(.focus、.blur)

フォーカスイン/フォーカスアウトイベントを設定するには、focus、blurを使用します。 サンプルソース 例)テキスト ...

スポンサーリンク