根っからのプログラマーじゃない人間にとって、jQueryライブラリ・プラグインはとても便利なものですよね。
さらなるレベルアップを目指すためにも、改めてjQueryがどのようなものなのか理解度を深めていきましょう。
jQueryについてどこまで知ってるのか
jQueryはノンプログラマーでも簡単なコードでJavascriptを実行できるようになるJavascriptのライブラリといわれるものです。
世界中のWebサイトの60～70％はjQueryを使っている（最近はCSS3の発達により減少傾向にある）と言っても過言ではないほど有名です。
CSSをしっかり理解できる知識をすでにもっていれば、Webデザイナー・ノンプログラマーの超初心者だとしても習得は容易（のはず）です。
jQueryを習得したら同僚に「jQueryって簡単じゃん」とドヤ顔で自慢しちゃってください。
jQueryを使ったデザイン・コーディングを実践
jQueryを使うためには、まずjQueryを持ってきてheadに読み込みます。
ここからダウンロードできます。
https://jquery.com/
jQueryには1系と2系があり、どれを使えばいいのかわからないという人はとりあえずどっちでもいいですが、一応違いを説明します。
jQuery1系と2系の違い
現時点で最新のjQuery1系は1.11.3、2系は2.1.4となっています。
- 1.x系はIE8以前をサポートするレガシーブラウザ向け。企業によってはアップデートができないPCを使っている可能性もあるので、まだ古いブラウザに対応させる必要も出てくる。
- 2.x系は古いブラウザは切り捨てて、高速に安定して動作を目的としたjQuery。
jQueryの1系と2系の違いはこのような認識で問題無いと思います。
条件分岐コメント（IE10からはHTML内の条件分岐コメントが使えない）を使えば古いブラウザと新しいブラウザで読み込むjQueryを分けることも一応できます。
<!–[if lt IE 9]> <script src="jquery-1.11.3.js"></script> <![endif]–> <!–[if gte IE 9]><!–> <script src="jquery-2.1.4.js"></script> <!–[endif]–>
jQueryの読み込みにはGoogle CDNを利用する
jQueryの読み込みにはわざわざダウンロードをしなくてもGoggle CDNを利用する方法もあります。
CDNのjQueryは高性能なサーバ側での圧縮転送やキャッシュにも期待できるので動作早くなりますので、特別な問題がない限りは、CDNを利用したjQueryの読み込みをした方が良いです。
最新のjQueryを読み込むコードはGoogle Developersからコピーすることができます。
CDNを利用する場合、万が一CDNが使えなくなっていることも考えてフォールバック用のjQueryも記述していくのが無難です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> <!-- window.jQuery || document.write(‘<script src="ダウンロードしたjQuery.js"></script>’) --> </script>
こうやって書いておけば、CDNのjQueryが読み込めなかった場合、自分のとこから引っ張ってくる事ができます。
jQeryのコードをゼロから書く必要あるの？
jQueryはすでに完成されているプラグインが数多く存在し、jQueryのコード内容を全く把握していなくても利用することができます。
Webサイト上でインタラクティブな動きを加えるだけでなら、ほんの少し内容を理解できて改変するべきところを多少変えるだけで事足りるかもしれません。しかし今後Webデザイナーとしてだけではなくフロントエンドエンジニアとしてもレベルアップしていきたいと思うのであれば、内容をしっかり把握する必要があります。
ハイブリットアプリを作る場合も、アプリのプログラミング的要素はjQueryが占めることになるはずなので、覚えて起きて損はない分野でしょう。
