jQueryのプラグイン導入・・・jQuery Migrateについても

jQueryの便利なところのひとつは、javascriptについてあまり知らなくても、有名なサイトなどで使っているのと同じような動作を簡単に使える点です。
jsどころかhtmlやcssについても詳しくなくても、見た目にすごそうなwebページを作ることができます。

というのも、有志の方々がさまざまなのプラグインを提供してくださっているからです。

プラグインを利用することによって難しいプログラムを組むことなく、さまざまな処理が行えます。

例えばcolorboxというプラグインの場合、とりあえずjqueryライブラリとcolorboxのjsファイルとcssファイルを目的のhtmlページによみこんで、、指示通りに画像とリンクのパスとjsコードを書き込めば、webページのリンクをクリックするとそのページはグレイアウトして、画像を前面に表示するといった処理を行えたりします。


注意点

プラグインはjqueryに限らず、prototypeであるとかmootoolsであるとか、さまざまなプログラム言語やそれらを元にしたライブラリに対して提供されています。
プラグインを導入することで、複雑なコードを組むことなく、色々な動作や表示をwebページ(等)で実現することができます。
ただし、導入前に注意することがあります。

特に、前提となるライブラリ(jQueryなど)が必要なプラグインの場合、ライブラリのバージョンとプラグインのバージョンの組合せによっては動作しない場合があること、プラグインのバージョンによってライセンスの違う場合があること、複数のライブラリの共存には気を付けてください。


jQuery Migrateとは

jQueryを使うための準備」や上記の「注意点」でも述べていますが、jQueryのバージョンには注意が必要です。
jQuery1.9.x以降、コードの削除や変更が行われたため、以前jQueryを使って自分で書いたコードや、使い慣れたプラグインが動作しなくなってしまうことがあるからです。
jQuery1.9.xより前のバージョンを使っておけばよいのですが、新しく導入したいプラグインがjQuery1.9.x以降でないと動作しないなど、やむを得ずjQueryのバージョンを上げる必要が出てくる場合があると思います。

そういった場合の対処法としてjQuery Migrate pluginを使うという方法があります。
※このプラグインはjQuery1.9.x以降で動作します。

以下からファイルをダウンロードします。

2015/07現在、ファイル名は以下の通りです。
jquery-migrate-1.2.1.min.js

jQuery(1.9.x以降)とともに、jQuery Migrateのjsファイルを読み込みます。

<script src="jQuery(1.9.x以降)ライブラリのパス" type="text/javascript"></script>
<script src="jQuery Migratのjsファイルのパス" type="text/javascript"></script>

これでjQuery1.9.xより前のバージョンでしか動かないコードやプラグインが動くようになるかもです。

動くようになる「かも」・・・というのは、jQuery Migratは万能ではなく、jQuery1.9.x以降で削除・変更されたコードのすべてが復元されるわけではないということです。
また、そもそも自分が書いたコードや既存のプラグインが動かない原因がjQueryのバージョン違いによるものではない場合もあります。

上記は、一部のコードやプラグインがjQuery1.9.x以降で動かない場合にjQuery Migrateを使って動かせる(かもしれない)方法でしたが、実は[min]がついていない方のファイルで、(動かせないけれど)削除・変更のあったjQueryのコードを使用しようとしたときにブラウザのコンソールに警告を出力することもできます。

<script src="jQuery(1.6.4以降)ライブラリのパス" type="text/javascript"></script>
<script src="jQuery Migratのjsファイル(minがついていない方)のパス" type="text/javascript"></script>

このほかに使いたいプラグインなどを読み込んだり、自作のコードを記述したり(またはjsファイルを読み込んだり)してhtmlページを作り、ブラウザで表示させてください。
ブラウザによってコンソールのだしかたは異なりますが、たいていF12キーをおして表示された開発ツールのtabの中から「コンソール」(英字の場合もあり)をクリックすれば見ることができると思います。

詳しくは以下の参考ページを参照するか、google先生に訊いてみてください。


戻る

Top