千葉県船橋市のホームページ制作・マーケティングの株式会社ノベルティ

COLUMN

コラム

2022.03.08

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

橋本大地

JavaScript

こんにちは。ひょっとこです。橋本です。
突然ですが、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()を学習しました。
正直、詰まることがなければあまり意識しない関数かもしれません。
ですが、特に問題が複合化している際に、$が何を参照しているのか、きちんと理解しておくことは大切です。
それが解決の糸口になることもありますので、ぜひデバック方法含め知識として吸収いただければ幸いです!
それではまた!

橋本大地

プロジェクトリーダー

バックエンドを経てフロントエンドの世界へ
持ち前のポジティブさと細やかさでノベルティを救う☆
元気の源は愛妻弁当!
自家用マシンでMacbookを購入することを夢見ています。
HOME | コラム | 【初心者向け】こんがらがると大変! jQueryを共存させる$.noConflict()について学ぶ!(後編)
CONTACT

お問い合わせ

お見積りの依頼やWEBに関する
お悩みがございましたら、
お電話かメールからお問い合わせください。

047-405-2227

お電話対応可能時間 平日/10:00~17:00

〒273-0005 千葉県船橋市本町5-1-1 船橋AUビル4階

船橋情報配信メディア

トコトコふなばし船橋情報配信メディア|トコトコふなばし

【船橋トコトコ大冒険メディア】として船橋の地域情報メディア、トコトコふなばしを運営。

船橋の観光スポットやイベント、グルメなど船橋の魅力を、熱く!ディープに!紹介しています。

また、船橋で活躍されている個人・企業の皆様への取材も実施しています。

船橋情報配信メディア|トコトコふなばしのとこっとちゃん

トコトコふなばしのキャラクター

とこっとちゃん

船橋に迷い込んでから船橋が気に入ってしまったトコ!

船橋を散歩しながら船橋のいいトコを紹介しているトコ。

船橋市内での取材はボクも行くトコよ~♪