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

橋本大地

JavaScript

こんにちは。エンジニアです。橋本です。
突然ですが、JavaScriptはお好きでしょうか。
そして…jQueryは、お好きでしょうか。
まだまだWEB制作の現場では、jQueryの需要は消えていないと感じている今日この頃です。
WordPressでも現役バリバリ。今では特に困らなくなりましたが、ちょっと前まではjQueryのバージョン古めのものを前提としたプラグインもあり、稀にjQueryを共存させるページもありました。
そんなjQueryで、ちょこちょこ見かけるのが$の競合というもの。

$の競合とはなんでしょうか。
大雑把にまとめてしまうと、他のJavaScriptで$を使っていた時、jQueryの$()が上手く動かなくなってしまう現象です。
jQueryの二重読み込みでも同様に、それぞれ読み込んだバージョンによってはうまく動かない可能性もあります。
中級者を目指しているコーダーの方で、特にWordpressを利用しているケースでは、いまどの(いつ読み込まれた)jQueryが使用されているのかきちんと説明できない方もいらっしゃると思います。
最近では本当にjsのライブラリ文明がかなり整備されてきて、このような状況も減りましたが、だからこそ発生すると絶妙に難解でハマりがち。
そこで今回は、下記を解決します！

前編：現在使われているjQueryの正体をきちんと突き止める
後編：$.noConflict()を使いこなして、jQuery競合問題で躓かないようにする！

…でございます。前編後編でお届けです。

jQueryが競合している…どうすれば…

そもそも、jQueryが競合している状況はどのようなときでしょうか。

ほかのライブラリが$を使っている
元々読み込んでいたjQueryがあるのに、コピペで持ってきたソースでjQueryを再度読み込んでしまった
jQueryが読み込まれていることを知らずに、jQueryの読み込みを再度書いた

どれも、可能性としてはゼロじゃありません。
特にコピペで持ってきたソース～が該当している方は、悪戦苦闘するケースが多いと感じています。これは、知らないソースに対して問題のあるソースを上書きしていることになりやすく、問題がとっても複合化しているためです。
まず、この段階でjQueryの競合を検討することは難しく、スコープが小さくなって目の前のコピペソースに集中する可能性が高いと感じます。

そんなときに、$.noConflict()

この段階でjQueryの競合を疑っていなくても、何がなんだか分からなければ、まず自分が何のjQueryを使っているのか調べましょう。
そしてもし競合をしている場合、回避するためには$を開放してあげましょう(=$を使わない)。
それを実現するのが$.noConflict()です。
こちらの関数を用いることで$が使用不可となり、他のライブラリなどで用いている$が無事に使用できるようになります。
引き続きjQueryを使用したい場合は、$の代わりにjQueryと置き換えてあげれば基本的に問題はありません。

$.noConflict()を具体的に解説！

具体的に、競合の状況を見てみましょう。
外部ライブラリで$を用いていてる場合は、基本的に$.noConflict()で解決するでしょう。
ですがしかし、例えばこんな読み込まれ方をしているとき。(ほっとんどないですが…レガシーなサイトをスポット修正したいときや、スパゲッティ極まりないサイトを修正するときでしょうか)

<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 src="https://code.jquery.com/jquery-3.3.1.js"></script>

分かりやすく並んでいていたらすぐに気づきますが、間に無数のコードが並んでいてる場合は、なかなか気づけないと思います。

$(".hoge").addClass("fuga")

このような状態でjQueryを動かした時は、どのjQueryが動いているのでしょうか。
正解は、3.3.1です。

console.log($.fn.jquery); // 3.3.1

上記のデバッグ方法で確かめてみましょう。シンプルに最後に読み込まれたものが対象です。
$.fn.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>

先ほどの通り、1.12.4が$として参照されます。
しかしながら3系でしか使えない関数が組み込んでいた場合、1系を参照してしまうと困りますよね。
このとき、$.noConflict()を書いてみましょう。

<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>
<script>
    console.log($.fn.jquery); // 1.12.4
    $.noConflict();
    console.log($.fn.jquery); // 3.3.1
</script>

$が開放されて、$(“.hoge”).addClass(“fuga”)の$は3.3.1を参照する形になりました。
このように、明示的に$を開放することで、JavaScriptライブラリがそれぞれに書いた$を制御できるようになります。
また、$はjQueryの所謂あだ名です。
jQuery(“.hoge”).addClass(“fuga”)を利用した際には、参照するのは最後に読み込んだ1.12.4となります。