プラグインはkintoneアプリを作成する上で非常に便利なものですが、複数導入した際に予期せぬ挙動をすることがあります。 その原因として多いのは、「$」変数の競合です。 プラグインを作成する際は、他のプラグインと同時に利用される可能性を考え、最低限の競合対策を行うようにしましょう。 今回は、「$」変数の競合の仕組みについて紹介します。
「$」変数の競合とは
JavaScriptでの開発を行う際、ライブラリやフレームワークを利用される方は多いかと思います。 ライブラリやフレームワークではたびたび、「$」をグローバル変数として定義して機能を持たせることがあります。
例えば、
jQueryでは「jQuery」と、
prototype.jsでは「document.getElementByID」と、
「$」が同義となっています。
jQueryを利用した、
vara=$("#box");console.log(a[0]);
というコードがあった場合、正しく動作すれば、
vara=$("#box");// \<=\> var a = jQuery("#box");console.log(a[0]);// \<div id="box"\>
となります。 しかし、prototype.jsが読み込まれ、「$」の中身が「document.getElementByID」となっているときにこれが読み込まれると、
vara=$("#box");// \<=\> var a = document.getElementByID("#box");console.log(a[0]);// エラー
となってしまいます。 このように「$」が想定していた機能と異なり、予期せぬ挙動を起こすことを、「$」変数の競合と言います。
プラグインを作成して配布した場合、自分のコードが普段利用しないライブラリやフレームワークと共存する可能性は大いにあります。 良かれと思って配布したプラグインで他者のアプリを壊さないためにも、競合という現象はしっかり理解しておく必要があります。