【初心者向け】こんがらがると大変！　jQueryを共存させる$.noConflict()について学ぶ！(後編)

こんにちは。ひょっとこです。橋本です。
突然ですが、JavaScriptはお好きでしょうか。
そして...jQueryは、お好きでしょうか。
こんがらがるともう大変なjQueryの競合問題について、$.noConflict()による解決策をご紹介させていただいた前編の続きです。
$.noConflict()は、jQueryの$を開放し別のライブラリで使えるようにしてあげるもの。
今回の後編では、ちょっとひねった使い方も含め、実践編をご紹介させていただきます。

jQueryの呼び出しを明示的にする

小難しい見出しですが、どのjQueryが呼び出されているか視覚的に分かれば便利ですよね。
ホームページ制作が複数人に渡るものであればコーディングルールを統一したりする必要はあり、限定的ですが、下記の方法は他のライブラリを後から追加するようなことがあっても競合を防ぐことができる便利な手法です。

例は前編同様に、下記の読み込みを例にしてみましょう。
※もちろん一度通信するたびに読み込み時間がかかるので、基本的にはこのような読み込みはないようにしましょう！

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

$はjQueryのあだ名です。

前編でご紹介させていただいたケースでは、jQueryの2系は日の目を浴びませんでしたね。
まったくロードされませんでしたし、使う隙間もありませんでした。
では、参照する方法はないのでしょうか。
答えは、あります。下記の例を見ていきましょう。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
    var originalJ = $.noConflict();
</script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    console.log(novelty.fn.jquery); // 2.2.4
    console.log($.fn.jquery); // 3.3.1
</script>

注目ポイントは、var originalJ = $.noConflict();です。
上記のように、$.noConflict();の戻り値として変数に格納することで、後々参照することが可能です。
$はあだ名であるように、あだ名をつけてしまう(エイリアス)ことで、originalJという変数がjQueryの異名となるわけです。

originalJ(".hoge").addClass("fuga")

$はjQueryのあだ名であることを意識すれば、上記の方法も納得できるかと考えています。
このように指定すると$がjQureyで指定できないので、他のjQueryがきちんと読み込まれていないことも調査が簡単になります。

$.noConflict(true);でjQueryも開放させる

ほとんど使うことはないですが、$.noConflict(true);をすることでjQueryも解放します。
上記以外の使い方をすると完全にjQueryが利用できない状態にはなります。
ただし本項のように、明示的にjQueryそのものを開放し、使用該当バージョンのものを参照させない場合や、jQueryをそもそも利用できなくする場合には有効な手段です。

コールバック関数を利用して、別のライブラリとの衝突を恐れること無く、$を使用することも！

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
    $.noConflict();
    jQuery(document).ready(function($) {
        console.log($.fn.jquery);//2.2.4
    });
     console.log($.fn.jquery);//スコープの外は参照できず
</script>

見出しの通り、このような使い方も可能です。
例では2.2.4はこの中でしか参照できません。
限定的な範囲内で間違いなく使いたい場合は、こちらの方法もオススメです。
ちょっと言葉的にややこしいですが、function($)の$が、$.noConflict()させたjQueryとなります。

まとめ

今回は$.noConflict()についてご紹介させていただきました。
WordpressのjQueryと自前のjQuery...どちらを使っているかイマイチ分からないといったおはなしは、初心者の中ではよくあることだと感じています。
ハマるときは本当にハマります。
私も数年前ですが、プラグインでどうしても1系のjQueryが後に参照されてしまい、意図しない動作をしてしまったことで$.noConflict()を学習しました。
正直、詰まることがなければあまり意識しない関数かもしれません。
ですが、特に問題が複合化している際に、$が何を参照しているのか、きちんと理解しておくことは大切です。
それが解決の糸口になることもありますので、ぜひデバック方法含め知識として吸収いただければ幸いです！
それではまた！