あらすじ
jQueryは2006年リリースした軽量なJavaScriptライブラリの一つである。jQueryを使うことで、JavaScript記述が非常に容易になる。
BootStrapやjQuery Mobileなど現在流行っているUIプラットフォームの中、jQueryが多く使われている。
また、ブラウザーごと(特にIE)、JavaScriptの挙動が微妙な差があるが、jQueryを使うことで、その差がある程度なくすことができる。
しかし、jQueryは軽量とはいえ、それでも100kb近くある。インターネット環境でダウロードできない(例えばGoogleのCDNは中国で遮断されている)、またjQueryなどライブラリをダウンロードするためにお客様を待たせなきゃいけないなどデメリットがある。
それに加えて、jQueryのあまりにもの使いやすさで、生のJavaScriptのわからないフロントエンドエンジニアまで現している。
なお、フロントエンド技術は近年、Angular JS、Reactなどの利用が増加している。それらVirtual DOMを利用した技術は、特性上jQueryが使えない時が多い。
筆者は本コラムを借りて、JavaScriptのをより理解できるエンジニアを一人でも増やしたいと願っている。
この記事に関するソースコードはこちらでダウンロードできます。
シリーズ一覧
| No. | 記事 |
|---|---|
| Lesson 01 | JavaScript is Simple |
| Lesson 02 | Meet Functions and Variables |
| Lesson 03 | 未定 |
| Extra 01 | jQuery or Not, That is the Question (本記事) |
jQueryの導入
ダウンロードして使う
jQueryの本体はたっだ一つの".js"ファイルである。それをjQuery.comからダウンロードして、自分のページに導入すれば使える。
CDN(Contents Delivery Network)を使って導入する
Google、Microsoftなど大手企業のサーバー上からjQueryを引用することができる。もし別のページを閲覧する時、既にCDNからjQueryをダウンロードした場合、再度ダウンロードせず、そのままダウンロードしたjQueryを使える。
以下は一般に使われるCDNの一部：
<!-- Google CDN -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<!-- Microsoft CDN -->
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>
<!-- 本家:jquery.com CDN -->
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
</head>
CDNを使う際、注意すべくことはいくつあります。
- jQueryは"v1"と"v2"がある、両者の仕様は若干の違いがある。
- jQueryは"min"が付いていると付いていないものがある。Debugでない限り、"min"を使う。
- 一部のCDNは"https"ではなく、"http"を使っている。なるべく"https"のCDNを使おう。
サーバー側のjQueryプラグインを使う
Ruby on Rails、Node.jsなどサーバー側のプラットフォームはjQueryをサーバー側で提供することもできる。
jQueryの記法とJavaScriptの記法
jQueryは名前通り、最初はQuery(請求)のために開発したもの。jQueryを使うことで、DOM要素の請求及び操作が単純化される。
実例：
注意：jQueryの記法は全部以下のコードの中に書くこと。
$(document).ready(function(){
//ここにjQueryの記述を記入
});
idで要素を選択し表示する
- 目標要素：
<p id="foo">FOO</P>
- JavaScript記法：
var foo = document.getElementById("foo").innerHTML;
alert(foo);
//FOOが表示される
- jQuery記法*：
var foo = $("#foo").html();
alert(foo);
classで複数要素を選択し書き換える
- 目標要素：
<p class="foo">FOO</p>
<p class="foo">BAR</p>
- JavaScript記法：
var foo = document.getElementsByClassName("foo");
foo[0].innerHTML = "FooBar";
foo[1].innerHTML = "FooBar";
//"foo"classを持つ要素は複数あるので、全部操作しなければならない。
- jQuery記法*：
foo = $(".foo").html("BarFoo");
//二行全部"FooBar"に書き換える
### 複数属性の組み合わせを選択し、着色する
* 目標要素：
<h1 class="foo">FooFoo</h1>
<p class="foo">FOO</p>
<p class="bar">BAR</p>
- JavaScript記法：
var p = document.getElementsByTagName("p");//p要素を選択
for( var i = 0; i < p.length; i++ ){
if( p[i].className === "foo"){ //p要素の中、class="foo"の要素を割り出す
var att = document.createAttribute("style");
att.value = "color:blue";//属性：style="color:blue"を追加
p[i].setAttributeNode(att);
}
}
//"foo"classを持つ"p"要素だけを青色にする
- jQuery記法*：
$("p.foo").css({"color":"red"};
//一行で終わる、変数さえ使わない
要素を追加する
- 目標要素：
<ul id="foo">
<li>foo</li>
</ul>
- JavaScript記法：
var li = document.createElement("li");
li.innerHTML = "bar";
document.getElementById("foo").appendChild(li);
//"foo"の下に"bar"要素が追加される
- jQuery記法*：
$("#foo").append('<li>baz</li>');
//簡素だけでなく、何かを追加したかははっきりしている
jQueryの要素追加にはいろんな構文糖(Syntactic sugar)が存在する。詳しくは[こちら](http://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9)の記事へ。
おわりに
jQueryのおかげでWeb開発開発は大変簡単になりました。しかし世間のあらゆる技術と同じように、jQueryもまた諸刃の剣である。ライブラリを導入するかどうか、どんなライブラリを導入するか、どう導入するかについては、サービスの対象客層、対象地域、開発保守コストなどを吟味する必要がある。