さすが`jQuery.noConflict()`もう止めよう

2 min read

概要

レガシーなコードを受け継いできたプロジェクトに散見される jQuery.noConflict 。現在は使用するメリットはほぼなく、むしろデメリットとなっている。jQuery 自体の不要論はさておき、この 1 行を排除していきたいと考えている。

使われていた理由

競合するライブラリとして主に Prototype.js があったため、jQuery を使用する場合、$の競合を避けるためにjQuery.noConflict()が使用されていた。jQuery 自身の$を使用しないようにすることで、競合を避けていた。

当初は Prototype.js や jQuery を併用することが珍しくなかったため、このような対応が必要であった。しかし、現在は Prototype.js は完全に使用されなくなっており、jQuery.noConflict()は必要なくなっている。

使い方

jQuery.noConflict()は、さまざまな方法で使用されているが、以下のように使われることが多い。

jQuery.noConflict();

(function ($) {
  console.log("Hello");
})(jQuery);

また、変数に入れて使用することもある。

var $j = jQuery.noConflict();
$j("#hoge").fadeIn();

やめる方法

先述のように、$に依存したライブラリを使用していない場合、jQuery.noConflict();は不要。現在では使用する必要性はない。実際に使用していない場合、この 1 行を削除するだけで、コード量が減り、DevTools から$を使用した jQuery の実行も可能になる。

対応として基本的には、jQuery.noConflict();の 1 行を消すだけで問題ないが、別の変数に格納している場合は、加えて変数の置換作業が必要となる。

このページをシェアする

関連タグ

関連記事

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

[ESLint] 特定のimportにおいてパスの末尾スラッシュを禁止する方法

背景 / やりたいこと / @typescript-eslint/no-restricted-imports を利用した / 余談(末尾のスラッシュ自体を禁止にする)

[JavaScript] Live NodeListとStatic NodeListについて

はじめに / 要素セレクタとは / Live NodeList とは / Static NodeList とは / Live NodeList と Static NodeList の違い / どちらを選択すべきか

近年のWeb開発においてjQueryの利用をやめるべき理由

jQuery の功績と功罪 / 現代の Web 開発と jQuery / jQuery をやめるメリット / jQuery の代替手段 / おわり / Footnotes

`<input type="range">`のstepを可変にする方法

仕様 / 完成デモ / 実装 / 参考