新旧jQueryを共存させるときにハマっちまったポイント暴露大会

新旧jQueryを共存させるときにハマっちまったポイント暴露大会

こんにちは。最近は営業さんが受注申請に使ってる社内システムを メインに保守、運用改善をしている とりさん です。

そんな私がちょっとまえに 焦って恥ずかしながらどツボにハマった案件について記事にしてみました。 (なので同じ事例で頭を抱えた人に贈る、尖った記事に…)

この記事で書いてあること

  • 基本的な2つ以上の jQuery バージョンの共存方法
  • 共存させるときにハマってしまったポイント解説

この記事を書いたきっかけをさらに詳しく

  • 古(いにしえ)のソースで動く社内システム
  • jQyery古くて色々対応しにくい(色々使えない)
  • でも新しくするには影響範囲が…

ってことで、2バージョンの共存の道を選択したところ、 焦ってハマって、最速で動く状態にもってけなかったので 世界のみなさんが同じことで時間をムダにしないように 書いた記事になります。 (3行で説明してみたかったが無理だった…)

基本的な共存方法

jQuery 共存」でぐーぐるせんせいに聞くと、 だいたい、こんな情報が出てくるかと思います。 (バージョンは適当)


// 旧jQuery <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> // 新jQuery <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.5/jquery.min.js"></script> <script type="text/javascript"> var $145 = $.noConflict(true); // ここがミソ </script> <script> // 新バージョンの使い方A (function($){ console.log($.fn.jquery); })($145) // 新バージョンの使い方B console.log($145.fn.jquery); </script>

ただ、古いバージョンを基本的に使いたい時、 ぐーぐるせんせに聞いてでてくる記事だと ちょっと気をつけないといけないところが… (特にポイント③)

どツボポイント① 「noConflict」で返り値につっこまれる順番

jQueryのバージョン変えて、 色々動かなくなったから焦って共存させようとしている君、落ち着こう。

リファレンスはやっぱりもちろん大事ですよね?

jQuery.noConflict() この関数を実行すると、$関数の動作が先に定義されている動作に戻る。

jQuery日本語リファレンスより抜粋 http://semooh.jp/jquery/api/core/jQuery.noConflict/_/

「先に定義されている動作に戻る」なので、 返り値で返ってくるのは「後に定義したバージョン」ですよ!

焦って先に定義したバージョンが返ってような錯覚に陥り、 「想定と違うバージョンになってしまう。なぜ?!」 と、パニックにならないように…

どツボポイント② リファレンスに引数書いてないよ…!

上記で紹介したリファレンスだと、引数がない。 ぐーぐるせんせいで調べると一番上に出てくるページが上記ページですが…

焦るな、君。 jQuery日本語リファレンスのいつものやつだ。 引数によってページが違う。

今回、本当に使ってるのはこっちです。

jQuery.noConflict(extreme) $関数のみならず、jQueryオブジェクトも含めて完全にグローバルの名前空間から除去する。運用は慎重に行うこと。 これは、上記のnoConflict()を更に極端にして$関数だけでなくjQueryオブジェクトも、先に定義された動作に戻してしまうものである。 これを使わなければいけないケースは極めて稀だと考えられるが、例えば複数のバージョンのjQueryを混在して使わなければならないような場合だとか。

jQuery日本語リファレンスより抜粋 http://semooh.jp/jquery/api/core/jQuery.noConflict/extreme/

リファレンスはやっぱりもちろん大事ですね。 (大事なことは何度でも言う)

どツボポイント③ ライブラリ(外部JSファイル)に対してのフォロー

さて、noConflictについても理解できたが、 いざ、書いて見るとまだうまく動かない君。

プラグインで入れたライブラリの中も 新しいバージョンじゃないと動かないことをわすれてませんか?

今回、とりさんも便利プラグインを使いたいが、 jQueryのバージョンが対応していなくてこの対応を行いました。

が、焦ってプラグイン内のライブラリに新バージョンをあてることを すっかり失念し、無駄な時間を使ってしまいました… (焦ってるって本当によくない…)

ので、プラグインのライブラリを直接修正して、 (相変わらずバージョンは適当)


(function($){ // ライブラリの中身 })($145)

と、するか、 noConflictのタイミングを調節して、


// 旧jQueryを定義 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> // 新jQueryを定義(↓ ここからは新jQueryで動く) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.5/jquery.min.js"></script> // ここで読み込まれるライブラリは新jQueryで動く <script type="text/javascript" src="プラグインのライブラリ"></script> // ↑ ここまでは新jQueryで動く <script type="text/javascript"> var $145 = $.noConflict(true); </script> // ↓ ここからは旧jQueryで動く

としないといけません。

(ただし、 前者はライブラリを編集しなければならないし、 後者だと他の人が間違えて順番変えちゃうと大惨事…

なかなか、難しいところ…)

ここまでくれば、動くはず…!

それでも動かない場合は、 一度、席を立って煙草休憩なり カフェに行って宇治抹茶ラテなりを買ってきて 隣の人に相談してみましょう。

なにか、きっと見落としてますよ! (スペルミスしてたりとか)

ここまで読んで動いたみなさま、 この記事がお役に立てたなら何よりです。

これからはバージョンアップによる 影響範囲に怯えることなく、 便利なプラグインを使っていきましょう!

おわりに

とはいえ、最終的には 新バージョンへのリファクタが必要になるかと思います。

この対応のおかげで 部分的にリファクタができるようになった、 ということにもなりますので

みなさんも脱・旧jQuery を目指してみてください…!