ブックマークレットでjQueryを安全・簡単に使う方法

公開日:2018-08-018   最終更新日:2021-11-002

ブックマークレットとjQuery

最近はjQuery不要論もあったりして、jQueryを使わないことも多くなってきました。
実際に、jQueryが隆盛を極めたころに比べると
  •  どのブラウザも標準仕様に準拠するようになってブラウザ間の差異がなくなってきた
  •  JavaScript標準のDOM APIが充実してきてjQueryを使わなくてもあまり困らない
  •  CSS3でアニメーションが簡単になった
  •  Angular, Reactなどのフレームワークを使うとjQueryで直接DOMを操作する必要が減った（あるいは操作すべきではなくなった）
などの理由でその重要性が低くなったのは間違いないと思います。


でも、ブックマークレットでは
  •  できるだけ短く書きたい
  •  小規模なので、手っ取り早く作りたい
  •  直接DOMを操作することが多い
なのでまだまだjQueryは役に立つと思います。

ブックマークレットでjQueryを読み込む


ただ、他の人が作った（かもしれない）ページで使うことも多いブックマークレットで気軽にjQueryを読み込むのは問題です。
  •  そのページではjQeuryの別バージョンを使っているかも
  •  $が別のライブラリで使われているかも
 ここでは、自分で作るブックマークレットに必要なjQueryはCDNから読み込みます。ただし、ブックマークレットを動かしたいページで、別のバージョンのjQueryを使っていても元のページのjQueryには影響を与えないようにします。

実際の読み込むには以下のコードを使います。

(function(func) {
var script = document.createElement("script");
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";
script.onload = function() {
var j = jQuery["noConflict"](true);
func(j);
};
document.body.appendChild(script);
})(function($) {
console.log($()["jquery"]);
});
view raw bookmarklet.js hosted with ❤ by GitHub

10行目の部分にブックマークレットの本体を書いてください。
この中では$を使ってjQueryを呼び出せます。

スクリプトの説明

2行目 var script = document.createElement("script");
<script> タグを作ります 
3行目 script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";
読み込みjQueryを指定しています。
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"の部分は(2018/08現在)の最新バージョンですが、他のバージョンを使いたい場合は変更してください。 
4行目 script.onload = function() {
jQueryの読み込みを待ってからブックマークレット本体を実行するために、onloadイベント設定しています。これで、jQueryの読み込みが完了すると、onload イベントが発生して、function() {...} が実行されます。 
5行目 var j = jQuery["noConflict"](true);
今回の重要な点をここです。
※ jQuery["noConflict"](true)は、jQuery.noConflict(true)と同じ意味です。
jQuery.noConflict(true)を実行すると、$関数の動作がjQueryの読み込み前の動作に戻ります。さらに、引数の true を指定するとjQuery変数も読み込み前の変数に戻ります。
これで、別のバージョンのjQueryが使われていたり、$が別のライブラリで使われていても大丈夫です。
ただし、jQueryプラグインはjQuery変数を前提していることが多いので、jQueryプラグインを使う場合はここをfalseにする必要があります。（そのかわり元のページがjQueryを使っていると問題が発生することがあります）
jQuery.noConflict(true)をjQuery["noConflict"](true)がとなっているのは、GoogleのClosure CompilerのAdvancedでコンパイルしたときにエラーにならないようにするためのです。
6行目 func(j);
jQueryを引数に渡してブックマークレット本体を呼び出します。 
8行目 document.body.appendChild(script);
作成した<script>を<body>に追加します。