# プラグインの競合対策 | jQuery.noConflict()の利用

**URL:** <https://community.cybozu.dev/t/topic/642>\
**Category:** kintone 開発相談\
**Created:** [2017 年 12 月 14 日午前 6:11 UTC](https://community.cybozu.dev/t/topic/642 "2017-12-14T06:11:45Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2017 年 12 月 14 日午前 6:11 UTC](https://community.cybozu.dev/t/topic/642/1 "2017-12-14T06:11:45Z")

</div>

[前回の記事](https://community.cybozu.dev/hc/ja/community/posts/115011830486)で書いた通り、プラグインを作成して配布する場合は競合対策をする必要があります。 今回は例として、jQueryを用いたkintoneプラグイン開発での競合対策を紹介します。

## jQuery.noConflict()

jQueryには、「$」変数の競合対策として、jQuery.noConflict()というメソッドが用意されています。 jQueryファイルを読み込むと、グローバルスコープに「jQuery」と「$」という変数が定義されます。 jQuery.noConflict()を呼び出すと、「$」をjQueryファイルが読み込まれる前の状態に戻します。

## 競合対策の例

jQueryとjQueryプラグイン(iziModal)を利用した下記のようなkintoneプラグインを作成したとします。

- manifest.json

- desktop.js

もちろん単体では問題なく動作します。

このプラグインを、ユーザーが次のようなprototype.jsを利用したプラグインと併用したとします。

- manifest.json

- desktop.js

- 単体での動作。

この2つのプラグインが併用された場合、モーダルウィンドウが出なかったり、検索窓が消えなかったりします。

この競合の対策として、先ほどのjQuery.noConflict()を利用してみようと思います。

自作プラグインのdesktop.jsを次のように書き換えます。

```
jQuery.noConflict();//追加(function($){//追加$(function(){$("h2").iziModal();$('body').click(function(){$('h2').iziModal('open');});});})(jQuery);//追加

```

コードの先頭にjQuery.noConflictを記述して、グローバル変数の$をjQueryオブジェクトとしては利用しないようにします。 また元のコードを即時関数で囲み、スコープ内では$をjQueryオブジェクトとして扱えるようにしています。

結果として、2つのプラグインの機能が両立するようになりました。

今回はプラグインを作成する上で最低限想定し対策すべき事態について紹介しました。 挙動を理解して、自分のプラグインに必要な競合対策を考えることが重要かと思います。