jQueryの仕組みを完璧に理解する

2014/08/02 サッポロクリエイティブキャンプ2014

Jun Futakawa

!

• FaceBook:: Jun Futakawaで検索

• twitter :: J2kawa

• ActionScript, PHP, MySQL,JS etc.

•音極道の中の人

•勤務遍歴：富士通 クリプトンフューチャメディア インフィニットループ　etc.

•株式会社アトラクト　代表取締役

自己紹介

アジェンダ• jQueryの概要と利用状況

•なぜjQueryが選ばれているのか

• jQueryオブジェクトって何？

•セレクタエンジン『Sizzle』(シズル)を理解する

• jQueryメソッドについて

!

jQueryの概要と利用状況

jQueryの概要

・米国のプログラマ John Lessig が開発したJavaScriptライブラリ。 ・2006年8月 Version 1.0 リリース。最新Ver.は1.11.1 / 2.1.1。 ・MITライセンスのオープンソースライブラリ。 ・主にDOM操作において豊富で優れた機能を提供する。 ・派生プロジェクトとして、　jQuery UI (ユーザインタフェース系拡張フレームワーク) 　jQuery Mobile (モバイルに最適化したUIフレームワーク) 　QUnit (JavaScriptにおける単体テスト自動化フレームワーク) がある。

jQueryの利用状況

・世界中の全WEBサイト中、60.3%のサイトが　jQueryを使用している。 ・JavaScriptライブラリを一切使用していないサイトは 全体の35.9%。 ・JavaScriptライブラリにおける、jQueryのシェアは実に　94.1%に達する。

(出典：W3Techs http://w3techs.com/technologies/overview/javascript_library/all)

<2014/7/10 付けデータ>

なぜjQueryが選ばれているのか

jQueryの特長(1)

強力なセレクタエンジン　Sizzle を採用

CSSセレクタ書式　および　その独自拡張書式により　極めて容易かつ柔軟にDOM要素の検索、抽出が可能

jQueryの特長(2)

メソッドチェーンによる容易な連続操作

コード量を少なく、かつわかりやすく、かつ処理を高速化できる

メソッドチェーン [処理の連鎖をdot[ . ]で繋げていく]

$(‘div’).text(‘Thank you!’).addClass(‘note’)…..

jQueryの特長(3)

シンプルかつ柔軟なプラグイン機構を持つ

・大量のプラグインが開発されるので必要な機能が手に入

　りやすい

・必要なプラグインのみ導入できることから、結果として

　軽量化に寄与

・公式のプラグインリポジトリがあるため、プラグインの

　流通・開発促進が活発化

jQueryオブジェクトって何？

…の前に、DOMって何？Document Object Model の略。 HTML文書やXML文書をアプリケーションから利用するためのAPI。

プログラマ以外の方が、上の様な説明を理解するのは大変困難だと思います。このセミナーにおいては、とりあえず以下の様に大雑把に理解してください。 !

[DOM / DOMツリー] jQueryを使おうとしている対象のWEBページ全体。 [DOM要素] そのWEBページ内の、任意のHTMLタグで囲まれた部分。

専門用語に気をとらわれ過ぎない「最初から、”WEBページ”, “HTMLタグ”　って呼んだ方がわかりやすいのに。なんで　DOMとかDOM要素とか言っちゃうわけ？だからプログラミングの解説って嫌い。」 と思ったそこのあなた。

わかります。 でも、こういう風に理解してください。 人も、場所や状況によって、いろいろな呼び方をされます。 病院では「患者さん」、お店では「お客様」、スポーツ大会では「選手」などなど。 DOM や　DOM要素　という言葉を使うことによって、「今プログラミングという観点から見ているよ」という事を明確に伝える意図を含んでいます。判ってしまえばどうってことはないので、言葉が判りづらいからといって、必要以上に「難し過ぎる」と思わないでください。

jQuery関数とは

jQueryライブラリは、jQuery() という名前のグローバル関数を１つだけ定義します。この関数は、何度も何度も使うことになるので、ショートカットとして　$ というグローバルシンボルも定義しています。 グローバルな名前空間にjQueryが定義するのは、この２つのシンボルだけです。

(O’Reillyジャパン 『JavaScript』<第６版>より)

jQuery() もしくは　$() 関数 jQueryの中心となる問い合わせ関数。この関数から返される値は、０個以上のDOM要素群を表すオブジェクトで、このオブジェクトをjQueryオブジェクト　と呼ぶ。

セレクタエンジン『Sizzle』(シズル)を理解する

jQueryの原理

「少ないコードで多くのことを行う」のがjQueryの原理である。この原理はさらに３つの概念に分解することができる。 !・(CSSセレクタを通して)要素を検索し、 　(jQueryメソッドを通じて)それらを使って何かを行う。　 ・要素セットで複数のjQueryメソッドを連鎖させる。 ・jQueryラッパーを使って暗黙的にやりとりする。

(O’Reillyジャパン 『jQueryクックブック』より)

”(CSSセレクタを通して)要素を検索”　という機能を担っているのが 『Sizzle』(シズル)と呼ばれるセレクタエンジン

Sizzleの概要

・DOM要素を、CSSセレクタの記法を用いて選択する為の 　JavaScriptライブラリ。 ・jQueryのVersion 1.3 から、jQuery 内に統合された。 ・開発には、jQuery開発者のJohn Lessigが統合以前から参 　加。 ・単にCSSセレクタ記法を用いることができるだけでなく、 　独自実装による優れたオプション指定ができる。

DOM要素の選択記法(1)

CSSセレクタ記法をそのまま用いる

Sample.

jQuery(‘#logo_image’) or $(‘#logo_image’) jQuery(‘.clearfix a’) or $(‘.clearfix a’) jQuery(‘div’) or $(‘div’)

DOM要素の選択記法(2)

要素の順番に基づいて選択するSample.

jQuery(‘li:first’) or $(‘li:first’) jQuery(‘li:eq(0)’) or $(‘li:eq(0)’) jQuery(‘tr :even’) or $(‘tr :even’)

:first 最初の要素 :last 最後の要素 :even 偶数番目の要素 :odd 奇数番目の要素

:eq(n) インデックス(n)の要素 :lt(n) インデックスが(n)より　　　 小さいすべての要素 :gt(n) インデックスが(n)より　　　 大きいすべての要素

DOM要素の選択記法(3)

属性に基づいて選択するSample.

jQuery(‘a[href=http://google.com]’) or $(‘a[href=http://google.com]’) jQuery(‘a[title][href]’) or $(‘a[title][href]’)

[attr] 指定された属性を持つ要素 [attr=val] 指定された属性に特定の値が　　　　　　　設定されている要素 [attr!=val] 指定された属性に特定の値以外が　　　　　　　設定されている要素

DOM要素の選択記法(4)

可視性に基づいて選択する

Sample.

jQuery(‘div:hidden’) or $(‘div:hidden’)

:hidden 非表示状態の要素 :visible 表示状態の要素

DOM要素の選択記法(5)

フォーム要素の種類に基づいて選択する

Sample.

jQuery(‘:text’) or $(‘:text’)

:text input type=text :password input type=password :radio input type=radio :checkbox input type=checkbox

.etc…

jQueryメソッドについて

jQueryの原理(再掲)

「少ないコードで多くのことを行う」のがjQueryの原理である。この原理はさらに３つの概念に分解することができる。 !・(CSSセレクタを通して)要素を検索し、 　(jQueryメソッドを通じて)それらを使って何かを行う。　 ・要素セットで複数のjQueryメソッドを連鎖させる。 ・jQueryラッパーを使って暗黙的にやりとりする。

(O’Reillyジャパン 『jQueryクックブック』より)

”それら(検索したDOM要素)を使って何かを行う”　という機能を担っているのが jQueryメソッド。

jQueryメソッドの概要・jQueryメソッドとは、jQueryオブジェクトに定義され、dot(.)指定で 　呼び出せるメソッド（処理） ・jQueryメソッドは、戻り値に必ずjQueryオブジェクトが設定されるため、呼び出しを連鎖させることができる。 ・以下のカテゴリ群がある。

1. Core 　　 核となる基本機能 2. Selectors 　 DOM要素選択（補助） 3. Attributes DOM要素の属性 4. Traversing DOM要素の走査 5. Manipulation DOM要素の操作 6. CSS css、styleの処理 7. Events イベント関連の処理 8. Effects 視覚効果・演出 9. Ajax Ajax関連 10.Deferred Deferredオブジェクト関連処理 11.Data Data関連処理 12.Callbacks コールバック関数の管理 13.Utilities ユーテリティ

jQueryメソッドによる処理の実例

Sample $(‘div’).css(‘border’, ‘1px solid red’);

■CSSを書き換える

Sample $(‘div#main’).fadeOut(0.5);

■フェイドアウト効果を施す

Sample $(‘div’).remove(‘a’);

■DOMから要素を削除する

上記はほんの一例で、他にもさまざまなことができます。 jQueryリファレンスを見て、その「できること」の幅広さを確認してください。 公式サイトリファレンス(英語): http://api.jquery.com Qrefy(日本語リファレンスサイト): http://s3pw.com/qrefy/

readyメソッドについて(1)

みなさんが、実際のWEBサイトで必ずといっていいほど最初に 目にするjQuery構文は

$(function(){ ……　<書式A>

というものではないでしょうか。よく見ますね。この構文。 しかし、ここまでの説明だけだと、この構文理解できません。 この構文は、多くの記述が省略されているので、すべてを 省略せずに書いてみましょう。

jQuery(document).ready(function(){ … <書式B>

この様になります。一番左は何度も繰り返しお伝えしているので もうお分かりだと思いますが、エイリアスとして’$’を使うことが できます。さらに、このjQuery関数のパラメータを省略すると デフォルトは document になります（文字列でないので注意！）

readyメソッドについて(2)

このようになります。だいぶ短くなりました。

$().ready(function(){ …… <書式C>

--readyメソッドについて--ここでreadyメソッドについて説明しておきます。 readyメソッドは、jQueryメソッドの１つで、イベント系メソッドにカテゴライズされるものです。 『ready状態』とは、すべてのDOM要素が生成され、かつ画像等のロードが完了していない状態　です。 　これは、JavaScriptのwindow.onLoadイベントに替わるものであり、onLoadより少ない待ち時間で処理を開始することができます。 ※ちなみにjQueryにもonLoadイベント相当の、loadメソッドがあります。 !

jQuery関数をエイリアス表記に、さらにパラメータを省略すると

readyメソッドについて(3)

$(function(){ ……

このreadyメソッドコールは、その記述自体を省略可能です。省略すると次の様になり、よく見る最初の<書式A>になります。

ぜひとも、全てを省略せずに記述する書式<書式B>をいつでも思い出せる様にしてください。ここにはjQueryの”仕組み”を理解する ヒントがたくさんあるのです。

最後に

今回のセミナーの内容は、極めて基本的な内容でありながら、その一方で、かなり深いjQueryの本質について取り上げたつもりです。 この資料の内容を何度も繰り返し読み、吟味して、より深い理解に繋げていただければ幸いです。 !今まで、中身を理解しないままコピーペーストで済ませていた方も これを機会に、ソースをよく読んでみてください。 過去に自分が納品したサイトのソース, 気になるサイトのソースなど、あらためて見てみてください。 以前と比べて、きっと内容が判る様になっているはずです。 そのような理解の一助にこの講義がお役に立てれば、こんなうれしいことはありません。