風邪が悪化した上に頭痛がして腹を下して、調子が悪すぎるバナナです。
子供からもらう病気はひどくなりがちです。

前も子供からうつった手足口病が熱は40度でるし、口から喉にかけて痛いから食事もまともに取れないしで最悪でした。

まあグチはこの辺にして…。

先日、人様のサイトでちょっとした処理を試そうとConsoleで処理を書いたら

Uncaught ReferenceError: $ is not defined

jQueryが読み込まれていないよ！と怒られてしまいました。

おいおいまじかよ…。読み込まれていないのかよ…。となりました。

ポンコツ底辺コーダーのバナナはjQueryを取られてしまうとただの屍になってしまいます。

そこでなんとかjQueryを読み込む方法はないかと探していたところありました！
世の中すげーやつがいるもんだぜ！
今日はこちらを紹介します。

デモ

デモページに飛んで、Consoleを開きながら操作してもらえると分かりやすいと思います。

デモはこちら

「テキストの色をただ赤に変更するだけのボタン」をクリックしてみてください。

Uncaught ReferenceError: $ is not definedと怒られると思います。

実際にソースを表示してもjQueryが読み込まれていないのが分かると思います。
※ページの何も無いところで右クリックで表示するメニューに「ソースを表示」の項目があります。
クリックするとソースが表示されると思います。

下記コードをコピーしてConsoleに貼り付けて実行してみましょう。

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;
})());

Consoleで貼り付けたコードの下に
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
と表示されると思います。

これでjQueryが読み込まれました。簡単でしょ？

確認できたらもう一度、「テキストの色をただ赤に変更するだけのボタン」をクリックしてみてください。

テキストの色が変わったでしょ？
たぶん…。

変わった人はもう一度ソースを表示してみてください。

bodyの最後に
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
が読み込まれているはずです。

これでポンコツ底辺コーダーでも生きていけます。

注意してほしいのが、一時的にjQueryを読み込ませているだけなのでリロードすると消えます。注意しましょう。

コードの解説

今回使用したコードはjQueryが読み込まれていないのを前提としているので、生のJavaScriptで記述されています。

普段は生のJavaScriptは書かないので、せっかくなので調べてみました。

document.body.appendChild((function(){ // body要素の最後に要素を追加
  var jq = document.createElement("script"); // script要素を作成
  jq.src = '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'; // script要素にsrc属性を指定する
  return jq;
})());

ちなみに読み込むjQueryのバージョンを変更したい場合はjq.src = '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';の3.2.1がバージョンなので、これを変更すれば違うバージョンも読み込めます。

まとめ

普段は、jQueryを使わずに記述することがないのでjQueryのありがたみを再認識しました。

このサイトでjQuery使われてないけどちょっとコードを試したいなんて時に便利なので、ぜひ使ってみてください。

またね。