デベロッパーツールでjQueryが使えない時はこれ【コピペOK】

こんなニッチなニーズに答えます。
当たり前の話ですがデベロッパーツールからコード（jQuery）を打ち込んでも、そのサイトにjQueryが読み込まれていなければ動くはずがありません、阿部寛さんのホームページが良い例ですね。

こういった事前にjQueryが読み込まれていないサイトやページでjQueryを動かすにはどうすればいいか、これについて解説していきたいと思います。

デベロッパーツールでこれをコピペして実行すればOK

デベロッパーツールを開きコンソールに下記をコピペし実行しましょう

document.body.appendChild((function(){
  var jq = document.createElement("script");
  jq.src = '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
  return jq;
})());

jQueryが使えるようになると思います。

もうちょっと詳しく！という方のために、せっかくなので阿部寛さんのサイトを例にもう少し詳しくみていきましょう。

jQueryが読み込まれていない場合

コンソールからdivにCSSを適用しようとすると。

本来であれば左側で選択されている「div」要素内の「★★★最新情報★★★」の文字色が変わるとことですが、

jQueryがそもそも読み込まれていないため、色は変わらず代わりにエラーを吐いているのがわかります。

前述したコードを実行してから試してみる

前述したコードを実行してから、処理を記述すると・・・

jQueryが使用できるようになっていることがわかります、簡単ですね！

おまけ：jQueryが使えるか確認(チェック)する方法【コピペOK】

下記コードをデベロッパーツールでコピペして実行してください。

if(window.jQuery){
	console.log('jQuery使用可');
}else {
	console.log('jQuery使用不可');
}

読み込ませるコードと組み合わせれば、あれば読み込まず、なければ読み込ませるなんて事も可能です。

終わりに

これでどのサイトでもjQueryをテストできるようになりましたね。

コンソールから実行しているだけなので、当然ファイルに影響もありません。

たくさん処理を書いて試してjQueryの理解を深めていきましょう！

以上になります