はてなブログのカスタマイズでjQueryを使う！CDNからの読み込みは不要！

はてなブログのカスタマイズでjQueryを使えなくて調べたら、CDNからjQueryを別に読み込むと使えるよという記事がけっこうありました。こんな感じです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

で、jQueryを読み込むことによって速度が遅くなるようなので

ソースを確認しました。
問題なければ、CDNから呼び出すことなくjQueryを使うことができます。
*自己責任でお願いします！また、速度の比較はしていません。ただ、jQueryを2回読み込むことに違和感があったのでこれで解消しています。若干速度が上がるかも？

CDNからjQueryを読み込まずに使う方法

window.addEventListener('load', 処理);を使います。
例えば、設定→詳細設定→head内に要素を追加のとこで、jQueryを使う場合

document.addEventListener('DOMContentLoaded', function(){
　/*ここに処理を追加*/
　//ex)windowサイズ
  console.log($(window).width());
});

DOMが読み込まれたら、設定した処理をしてくれます。あっ、もちろん<script></script>で囲ってあげてくださいね！
このコードはどこで使っても大丈夫です！例えば、フッターや記事前などに使っても問題なく動作します。

コードの意味

jQueryを普段使用するとき

$(function(){
  /* 処理 */
});

//または

$(document).ready(function(){
  /* 処理 */
});

のどちらかを使うと思います。これもDOM要素が読み込まれた後に処理をする記述なので、やってることは同じですね。
ただ、この記法だとjQueryを読み込んでからじゃないと利用できません。
はてなでは

    <script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/react-with-addons.min.js?version=0.14.7"></script>
    <script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/react-dom.min.js?version=0.14.7"></script>
    <script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
    <script type="text/javascript" src="//cdn7.www.st-hatena.com/js/jquery/jquery-ui.1.10.0.custom.min.js"></script>

    <!-- はてなのシステムのscript -->

  </body>
</html>

とほとんどbodyの直前くらいで、jQueryなど一式読み込まれています。上から順番にhtmlを読み込むので、ヘッダーの中に書いたjQueryでのコードは動作しないんですね。
なので、普通のjavascriptでDOMなどを一度読み込ませたタイミングで発火させます。このときに、ハテナのjQueryが読み込まれてるのでjQueryのコードはばっちり動くというわけですね＼(^o^)／

備考

DOMの読み込み後にするので、気持ちラグがあります。
例えば、このブログのパンくずも設定画面から出力するものを使っているのですが、表示位置が気持ち悪い場所にあったので、DOMを移動させてます。
なので、リロードすると若干パンくずの表示が遅いのがわかると思います。気にならないレベルであればこれで大丈夫です！
SEO的にも、Fetch as googleで確認したところきちんとパンくずに表示されてましたので、よくはないけどないよりましだと思ってます。

もしかすると、環境によっては発火しない可能性があります。そんなときは

window.addEventListener('load', function(){
　/*ここに処理を追加*/
　//ex)windowサイズ
  console.log($(window).width());
});

に変更して下さい。これは全ての読み込み(画像なども含む)を完了したときに発火します。

関係ないけど・・・

developerツールとかで確認すると、はてなの普通のページにjquery, jquery-ui, そしてReactまで読み込まれてます。
Reactはコメントの周りで使われてるのかな？
そりゃ、すこし読み込み遅いはずやわと思いつつも自分でもやってしまうなとしみじみ思いました。
本当は、React導入によってjQueryを排除したいんだけどやっぱりReactのアニメーションて今一信用できないんだよね。
あと、もともとjQueryありきの構成だった場合、すべて普通のjavascriptに変更する気にならないもんね( ；∀；)