コピペでブログカスタマイズする初心者が犯しがちなjQueryのこと。

初心者とjQuery本体

　ブログをカスタマイズしているとたびたび目にするのが<script src"http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>のようなコードではないでしょうか？

　コレがなにをしているのかわからないけれども、コレがないと動いてくれるはずのものが動いちゃくれない。大して長いコードでもないのに影響力は大きい。

　そしてまたこのコードを含むコピペコードを紹介しているところでは決まって「すでに読み込んでいる場合は省略可能です。」といったような但し書きが付帯しています。

　初心者にはこの「可能」という表現は曲者で、それをした方がいいのか？はたまたしない方がいいのか？判然としない。

　どっち？決めて〜…となったときは安全策「jQuery本体乱発乱読の乱ランラン」。

　でもさらにこちらをみてみますと、jQueryはバージョンが異なると動かないことがあるようですが、かといって複数入れていると競合して動かないということもあるようで…。それで結局どしたらいいの？

初心者のためのjQuery本体の最適な数と置き場所

　あんな情報こんな情報を取り込んだブログ2年生が出した答えは「headに1つ」です。

　根拠は…

jQuery本体は（動くのなら）1つで十分。同じものが2つも3つもあっても無駄でしかない。
jQuery本体は動かしたいプログラムより前にないといけない。

の２つ。

　知ってる人にとってはものすっっっごく基礎的なことなんでしょうけれどね。

　実際に1つ1つ下の方から引き剥がしていっても動きました。

　また動きの遅いものはできるだけ後で読み込んだ方が表示が速くなるのでフッターに置きたいと考えフッターに入れて試しに上から引き剥がしていったらすぐ動かなくなりました。

　このときの注意点は、上にあるものから消していってもパッと見デザインは崩れないので問題なさそうに見えること。でもそれはjavaのおかげではなくcssかそこいらのおかげなのでちゃんと動かなくなるのでデザイン崩れなかったからといって動作確認怠らないようにね。

　それでわたしははてなブログなのではてなブログで説明をすすめますと、<script src"http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>のようなjQuery本体のコードを　【 設定 → 検索エンジン最適化 → headに要素を追加 】　に入れて【変更する】ボタンをポチッ。

　そしてこれまで【デザイン → カスタマイズ(スパナのアイコンのやつ)やスマートフォン(スマホのアイコンのやつ) 】の【ヘッダー】や【記事上】や【記事下】や【フッタ】や、至る所に入れていたjQuery本体を消していきました。もちろんjQuery本体の下にあるコードは消さないで残しておいてね。

　これでコードすっきり。動きしっかり。

　これからまたブログデザインをカスタマイズしようとコピペコード紹介されているページで「jQuery本体は省略可能です」に出会ったら、迷うことなく打ち捨てて行けます。

　それでうまく動かなかったときにはそのjQuery本体は（おそらくバージョン違いでurlの末尾の数字なんかが微妙に異なるものでしょうから）一旦入れて動作確認してみるということにすればいいでしょう。

　これまで言われるがまま、書かれているがまま、あちこちにjQuery本体を散在させてきた初心者の方はお試しになられてみてはいかがでしょうか？これまで散財してきたリソースをほんのちょーーーっとだけ回収できるかもしれませんよ。

　もしほんとうにお試しになられるのであれば何かあってはいけませんから、バックアップとったり、１つ１つ動作を確認するなりしましょうね。それが転ばぬ先の杖。現代版なら転ばぬ先の電動車イスです。

　バックアップをとらず１つ１つ動作確認もせず、めんどうだからと一足飛びに変更して不具合おきた日の初心者ときたら「あぁ、わたしはなんと無謀で愚かなことをしてしまったのだろう…」と、元に戻すことも、かといって修正することもできず、自責の念と無力感とに苛まれて、打ちひしがれた黄昏がやってきてしまいますから。