これまでjQueryの使い方についてねちっこく解説してきましたが...。
今回は「使い方」ではなく「選び方」です。
ビギナーズからよく飛び出す質問「どのバージョンのjQueryを使えばいいの？」について。
jQueryは最新版だけでも全部で8つ
2016年8月末時点でjQuery本体の最新バージョンは バージョン3.1.0 です。
しかし バージョン1系列 と バージョン2系列 についてもサポートが打ち切られているわけではありません。
さらにファイル名に「.slim」や「.min」という文字がつくものも配布されています。
現在 公式サイトで配布されているjQuery を並べてみるとこんな感じ。
- jquery-3.1.0.js
- jquery-3.1.0.min.js
- jquery-3.1.0.slim.js
- jquery-3.1.0.slim.min.js
- jquery-2.2.4.js
- jquery-2.2.4.min.js
- jquery-1.12.4.js
- jquery-1.12.4.min.js
うむ、困りましたね。
少しずつ噛みくだきながら解説していきます。
.min の有無はファイルサイズの違い(機能は同じ)
「.min」が付くものと付かないものは、コードが圧縮されているか圧縮されていないかという違い があります。
JavaScript はコードの途中とちゅうに改行やスペースを入れても動作自体は変わりません。
これは HTML や CSS と同じ性質ですよね。
そのために「.min」無しバージョンでは適宜改行を入れ込んで読みやすく整形されています。
逆に「.min」付きバージョンではできる限り改行もスペースも入れずに書かれているため、ファイルサイズが小さくなっています。
というわけで「jquery-3.1.0.js」と「jquery-3.1.0.min.js」などは基本的に同じ機能を持っています。
どちらを使っても同じです。
ファイルの読みやすさを重視するならば「.min」無しを、サイズの小ささを重視するならば「.min」付きを選べばいいでしょう。
ただ、jQuery本体のソースコードを読みたくなることってほとんど無いので、基本的には「.min」付きで充分 だと思います。
参考に、
- jquery-3.1.0.js - 263,767 バイト
- jquery-3.1.0.min.js - 86,351 バイト
1/3 ほどのファイルサイズになってますね。軽い！
バージョン1系列とバージョン2系列の違いは対応しているブラウザの違い
バージョン1系列とバージョン2系列は 対応しているブラウザの違い です。
バージョン2系列は比較的新しいブラウザでしか動きませんが、バージョン1系列を使えば古いブラウザでも動きます。
公式サイト によれば、バージョン2系列の対応ブラウザは、
- Google Chrome の最新版とひとつ前のバージョン
- Microsoft Edge の最新版とひとつ前のバージョン
- Firefox の最新版とひとつ前のバージョン
- Internet Explorer 9~11
- Safari の最新版とひとつ前のバージョン
- Opera の最新バージョン
- (モバイル)Android 4.0以上の標準ブラウザ
- (モバイル)iOS 7以上のSafari
だそうです。
バージョン1系列を使えば、ここにさらに古いブラウザが加わります。
- Internet Explorer 6~8
- Opera 12.1x (Prestoエンジンを積んだバージョン)
- Safari 5.1以上
特に重要なのは Internet Explorer に対応するかどうかでしょう。
IE8 などでも問題なく表示できるサイトにしようと思えば、jQueryのバージョン1.12を使うべきです。
ただし、対応しているブラウザが多いことはメリットだけではありません。
バージョン1系列は古いブラウザに対応させるためにファイルサイズが大きく、処理速度も遅いのです。
ちなみに、対応ブラウザって時代によって変わります
さて、ここで要注意なんですが、
さきほど紹介した対応ブラウザはあくまでも2016年8月末時点のものです。
時が流れて「こんな古いブラウザ誰も使ってないよね」というようなブラウザが出てくれば、そのブラウザのサポートは打ち切られるはずです。
公式サイト では常に対応ブラウザについての情報が公開されています。
定期的に情報を確認して、最新のブラウザ事情にキャッチアップしてみてください。
バージョン2系列とバージョン3系列の違いは設計の違い
バージョン2系列とバージョン3系列では対応しているブラウザは同じです。
が、バージョン3系列は2016年現在のブラウザ事情や JavaScript 事情に合わせて 設計のレベルから見直されて作り直されています 。
そのために機能の面でも大幅な違いがあり、jQuery バージョン2.2.4 を想定して作られたプラグインとjQuery バージョン3.1.0を組み合わせて使うと正常に動作しないかもしれません。
バージョン2系列からバージョン3系列に上がるあたって、もっとも大きく変わったのは .hide() と .show() が廃止されたことです。
.hide() はページ上の要素を見えなくする機能、反対に .show() は見えなくなっていた要素を表示する機能です。
これらがバージョン3系列では廃止されています。
jQueryの開発チーム曰く、要素を隠したり再表示したりしたいとき今後は、
.hide { display: none; }
というような CSS を用意したうえで、隠したい要素に class="hide" を付与するようにして対応してほしいとのことです。
.hide() と .show() はこれまでにも多用されてきた機能だけに、その影響範囲は大きそう です。
バージョン3系列を採用する前に、自分が使いたいjQueryプラグインがバージョン3系列に対応しているかどうか調べる必要があります。
その代わり、バージョン3系列ではこれまで以上の性能向上が謳われていますよ。
.slim 付きは必要最低限の機能だけが含まれている
バージョン3系列にはさらにファイル名に「.slim」が付くものと付かないものがあります。
「.slim」付きバージョンは、「.slim」無しバージョンから Ajax やアニメーション関連機能など 一部の機能を削除することで究極の軽量化を目指したバージョン です。
「機能を削除する」なんてそんなことして大丈夫なんでしょうか？
大丈夫です。jQueryは本当に多機能で、中には「この機能最近あんまり使う機会無いよなぁ」というようなものもあるのです。
「.slim」付きバージョンはそういった機能を思い切って削除しています。
ちょっと余談ですが、Ajax やアニメーション関連機能がなぜ最近あんまり使う機会が無いのかお話ししましょう。
当たり前に使われるようになったがために標準機能に組み込まれた Ajax
Ajax とは、ユーザーがページを見ている最中にブラウザとサーバーがやり取りするための仕組みです。
実は Ajax 自体は2005年よりも前からブラウザに標準で存在した伝統的な機能でした。
しかし使い方が少々煩雑で初心者にはなかなか扱いづらいものだったのです。
そんな扱いづらい Ajax を断然扱いやすくする機能を提供したのもjQueryの功績でした。
それから時は流れ...
現在では Ajax はWebサイトを作るうえで欠かせない機能になっています。多くのサイトで今日も Ajax は多用されています。
そして需要の増加に伴って最新のブラウザでは、扱いが煩雑な Ajax の代わりに、より高機能でより扱いやすい Fetch API という機能が標準搭載されるようになってきています。
実際「もう Ajax のためにjQuery持ち出さなくていいよね、Fetch API使おうぜ」という考え方が現在の主流になりつつあります。
アニメーションの舞台は JS から CSS へ
もう一つアニメーション関連機能についてです。
こちらはご存知の方も多いでしょう。
CSS3 でアニメーション関連のプロパティ transition, animate などが追加されたおかげで、ページ上で要素をアニメーションさせることはとても手軽になりました。
CSSアニメーションはブラウザ自身が動作を制御してくれるため負担が少なく、レスポンシブデザインにも対応しやすいという利点があります。
「いまどきjQueryでアニメーションなんて流行らねぇんだよ、時代はCSSアニメーションだ！」そんな声が聞こえてきそうです。
このような時代背景から、わざわざjQueryでやる必要もなさそうな機能が「.slim」付きバージョンでは削除されています。
最新のWeb制作事情にしっかりと追いつけている人であれば、「.slim」付きバージョンも魅力的に見えるでしょう。
参考に再びサイズ比べを、
- jquery-3.1.0.js - 263,767 バイト
- jquery-3.1.0.min.js - 86,351 バイト
- jquery-3.1.0.slim.min.js - 68,952 バイト
うーんコンパクト！
まとめ
ざっくりまとめます。
- 基本的に「.min」付きのほうがファイルサイズ小さくて素敵
- 古いブラウザにも対応したいならバージョン1系列を使わざるを得ない
- プラグインなどがバージョン3系列に対応してそうなら、バージョン3系列を使ってみよう
- 慎重になるなら様子見でバージョン2系列かなぁ...
- 最新のトレンドに乗っかって究極の最小化を目指すなら、バージョン3系列の「.slim」付きで
こんな感じになりますかね。
私からは以上です。
