プログラミングに関する試行錯誤の記録を残します。ScriptPythonJavaScriptPHPjQueryの”おまじない”を紐解いてみる。(jQuery.noConflict())2018.12.04JavaScriptHOMEJavaScriptjQueryの"おまじない"を紐解いてみる。(jQuery.noConflict())最終更新日から90日以上経過しています。conflict(競合しない)という位なんだから、「名称」なのか「処理」なのかわからんが何かしらを競合しないように整備してくれているんだろう。思っていなかったので、この”おまじない”を今更紐解いてみる。そもそも何と競合しているのかざっと調べると、解説しているほぼ全てのページで、prototype.jsが例として挙げられていた。開発したJavaScriptフレームワークであり、Ajaxフレームワークやその他のユーティリティを提供する。事(参考:Wikipedia)。jQueryも幅広く利用可能だが、prototype.jsも広範囲をカバーしているライブラリのようだ。こちらのサイトで詳しく記載されているが、グローバルの名前空間に幾つかオブジェクトを定義しており、その中に「$」が使用されているとの事。ちなみに「document.getElementById」つまり、prototype.jsとjQueryを同時に使用した場合、prototype.jsがグローバルに定義した「$」と、jQueryのエイリアスである「$」が競合してしまう(というように理解した)。競合させてみる「競合」とはどのような状態を指すのか、試してみたいと思う。ブログタイトルが設定されたテキストフィールドしか存在しない質素すぎるページ。これをサンプルとする。prototype.jsでテキストフィールドの値を取得console.log($('conflict-textfield').value);jQueryとprototype.jsで値を取得するだけのJS。jQueryでは$()にセレクタを指定し、.val()で値を取得している。prototype.jsでは$()に要素IDを指定し、.valueで値を取得している。順で読み込みjQuery⇒prototype.jsの順にライブラリを読み込みます。val()でエラーになりました。後に読み込んだprototype.jsの「$」でjQueryの「$」が上書きされたようです。それを確認する為、jQueryで値取得している行をコメントにしてもう一度実行します。$('conflict-textfield').value);実行結果prototype.jsでは正常に値を取得できている。両方のライブラリがエイリアス「$」を使おうとして競合していると言えます。順にライブラリを読み込みます。今度はprototype.jsでエラーになりました。後から読み込んだjQueryに「$」が上書きされている事によるエラーと思われる。jQuery.noConflict()これはjQueryがエイリアスとして定義している「$」を”解放”し、競合を防ぐというもの。jQuery.noConflict()実行後は、「jQueryオブジェクト」のエイリアスである「$」を解放するので、「jQuery」と明示する必要があります。$('conflict-textfield').value);1行目でjQuery.noConflict()を実行し、3行目で「$」ではなく「jQuery」で実行するように修正しています。両方で正常に値を取得できました。$('conflict-textfield').value);このようにすることもできます。個人的にはこの方がスマートのように思います。投稿一覧SES→SES→受託開発と経験してきたプログラマです。JavaScript/Java/C#ができます。現在はVue.js、Python辺りを勉強中です。勉強のアウトプットが目的のブログですが、誰かの役に立ったら嬉しいです。お問い合わせのページからご連絡下さい。2019.09.03ES6からはclass構文が実装されましたが、まだES5を使っている方もいますよね。ユーティリティ系クラスは静的クラス[...]スポンサーリンクプロフィールNaoki(@nkwtnb)SES→SES→受託開発と経験してきたプログラマです。JavaScript/Java/C#/Vue.js/Python/etc...作曲/編曲もします。勉強のアウトプットが目的のブログですが、誰かの役に立ったら嬉しいです。記事の内容について問い合わせ等ございましたら、お気軽にTwitterのリプかDM、またはお問い合わせのページからご連絡下さい。Ganttプラグインを使ってみた感想。