ライブラリ同士のメソッド名が競合した場合 / jQuery メソッドをリネームする方法

Question

もともと bootstrap-slider というライブラリが使われていて
jquery-ui というライブラリを新たに使いたいのですが
既存の bootstrap-slider を使うコードが以下のように jquery-ui をみにいってエラーを吐きます

Uncaught Error: no such method 'setValue' for slider widget instance
    at Function.error (jquery-3.3.1.min.js:2)
    at HTMLInputElement.<anonymous> (jquery-ui.js:252)
    at Function.each (jquery-3.3.1.min.js:2)
    at w.fn.init.each (jquery-3.3.1.min.js:2)
    at w.fn.init.$.fn.(anonymous function) [as slider] (https://code.jquery.com/ui/1.12.1/jquery-ui.js:236:10)

メソッド名がコンフリクトして上書きされてるんだと思うのですが
JS の読み込む順番は bootstrap-slider のほうが後になっても jqueryui をみにいってしまいます

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" data-turbolinks-eval=false></script>
<script src="/assets/bootstrap-slider.self.js?body=1" media="all" data-turbolinks-track="true"></script>

こういう場合どうやって解決するのがいいのでしょうか
ライブラリ名.メソッド とか ファイル名.method みたいに指定する方法はないのでしょうか

追記：

jQuery のメソッド名をリネームする方法はないでしょうか

おそらく bootstrap-slider がグローバル定義で
jquery-ui が $(() => {}) とかの中にかいてあるために後から上書きされてるんだと思うんですが
bootstrap-slider が読み込まれてから $(() => {}) が実行される前のグローバルスコープで
$(xyz).slider()　というメソッドをリネームすれば解決しそうな気がするのですが
jQuery オブジェクトに対するメソッドはどうやって取得すればいいのでしょうか

Answer 1

bootstrap-slider というのはこれですかね？
https://github.com/seiyria/bootstrap-slider#what-if-there-is-already-a-slider-plugin-bound-to-the-jquery-namespace
ここの説明にあるように、slider が使われている場合は bootstrapSlider になります。
読み込み順番も jquery-ui.js の後ということになりますね。

var slider = $('input.slider').bootstrapSlider();

Comments

[退会済みユーザー]

jquery-ui のほうをみていて bootstrap-slider のドキュメントをみていませんでした
ちゃんとかいていたんですね
ありがとうございます

Answer 2

Slider Widget が競合しますね。Download Builder で Slider Widget を外した物を作ってみてはいかがでしょうか。

【Slider Widget | jQuery UI API Documentation】
http://api.jqueryui.com/slider/

【Download Builder | jQuery UI】
https://jqueryui.com/download/

Comments

[退会済みユーザー]

やはりソース側を改変するしかないのでしょうか
今後同じようなケースで両方使いたい場合にライブラリを指定して使用するという方法も覚えておきたいのですが仕様上不可能なのでしょうか

[kei344]

リンク先を見ましたか？ Download Builder でビルドすればよいでしょう。

> 仕様上不可能
ライブラリによります。jQueryのプラグインについてはほとんどの場合不可能です。（競合対策をしていいるものがある可能性が0.0000001%も無いとは言えませんが）

[退会済みユーザー]

みました
必要なものだけをとりこんでビルドすることで競合する slider widget を含まない jquery ui を作って読み込めばいいということですよね
今回の場合それで解決できそうなのですが、というよりいままでそうしてきたのですが
jquery-ui の中で使うものがふえてきて毎回ビルドして設置するのも面倒なので
いっそ全部CDNでとりこんでしまおうと思ったときに問題に直面したので…
あと仮に jquery_ui の slider も同時に使いたくなった場合にどうしたらいいのかなと疑問に思ったので
Java であれば import したパッケージ名を指定すればクラスがかぶってもアクセスできるので javascript でもそういう指定方法があったりしないかなと思ったんですけど無理なようですね…

あるいは
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" data-turbolinks-eval=false></script>
<script src="/assets/bootstrap-slider.self.js?body=1" media="all" data-turbolinks-track="true"></script>
の間にリネームスクリプトをはさんで片方のメソッドをリネームして識別するとかも考えたのですが先に定義したほうが上書きしてしまうならどうしようもないのかなと思ってるところです