Kawaz的jQuery入門

Kawaz的jQuery入門
Kawaz的jQuery入門第1回 Kawaz Web勉強会 Copyright (C) 2011 www.kawaz.org All Rights Reserved. 1
このセッションについて目標普段プログラムを書かない人が jQueryのコアな動作を理解する jQueryで簡単なものを作ってどや顔できるようになる Web上にあるプラグインを使えるようになる参考資料詳しく作るのが面倒だったので、以下のスライドを読んでくださいこのスライドを見て、気になった部分、説明が足りない部分を補足していく感じですノンプログラマーのためのjQuery入門 http://www.slideshare.net/hayatomizuno/jquery-7665168 バージョンについて最新版は1.7.1(12/1/6現在)ですが、イベント周りの仕様が若干変わっているため、1.6.4基準でお話しします Copyright (C) 2011 www.kawaz.org All Rights Reserved. 2
jQueryってなに？ JavaScript向けライブラリ少ないコード量でパワフルな実装が可能今のWeb界隈では必須技術（giginet調べ）無料オープンソース改変・再配布・商用利用可能（MIT）バージョンアップが早い拡張が豊富（jQueryプラグイン） Copyright (C) 2011 www.kawaz.org All Rights Reserved. 3
下準備 headにjQueryを読み込ませよう <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/ 1.6.4/jquery.min.js"></script> <script type="text/javascript" src="jquery.hello.js"></script> <title>Hello, jQuery</title> </head> <body> </body> </html> 自分で公式サイトからファイルをダウンロードしてきて、読み込ませても良いですが、以下のサイトからGoogleがホスティングしているものに直リンクするのがオススメです。楽だし http://scriptsrc.net/ ※jQueryの宣言は、自分のコードを読み込ませるより前に行ってください Copyright (C) 2011 www.kawaz.org All Rights Reserved. 4
jQueryを書いてみよう $(function(){ $('body').append('Hello, jQuery!'); }); わずかこれだけ！先ほどのHTMLファイルを開いて、Hello, jQueryとだけ表示されていれば成功です！ Copyright (C) 2011 www.kawaz.org All Rights Reserved. 5
jQuery超入門 $('.kawaz').css('background', 'red'); Copyright (C) 2011 www.kawaz.org All Rights Reserved. 6
jQuery超入門 $('.kawaz').css('background', 'red'); jQueryオブジェクト（主体）メソッド（命令） jQueryオブジェクト（主体）.メソッド（命令）で構成されている！上の例の場合、classがkawazの要素の背景色を赤くする Copyright (C) 2011 www.kawaz.org All Rights Reserved. 7
jQuery超入門 $('.kawaz').css('background', 'red'); jQueryオブジェクト（主体）メソッド（命令） jQueryオブジェクト（主体）.メソッド（命令）で構成されている！上の例の場合、classがkawazの要素の背景色を赤くする基本的に、jQueryコーディングは操作したい要素の選択、探索その要素に対してどのような操作をするか２つに帰結する！ Copyright (C) 2011 www.kawaz.org All Rights Reserved. 8
DOMってなに？ DOM = Document Object Model HTML上にある要素をプログラムで扱いやすく定めたもの Copyright (C) 2011 www.kawaz.org All Rights Reserved. 9
DOMってなに？超基本：HTMLは木構造になっている HTML HEAD TITLE くだものいちらん BODY UL LI りんご LI バナナ LI みかん Copyright (C) 2011 www.kawaz.org All Rights Reserved. 10
DOMってなに？超基本：HTMLは木構造になっている HTML HEAD TITLE くだものいちらん BODY UL LI りんご DOMノード LI バナナ LI みかん Copyright (C) 2011 www.kawaz.org All Rights Reserved. 11
DOMってなに？超基本：HTMLは木構造になっている HTML HEAD TITLE くだものいちらん BODY UL LI りんご DOMノード LI バナナ LI みかん各ノードは入れ子の構造になっている LIの各ノードから見てULは親ノード、BODYより上は先祖ノードと言ったりする子ノード、子孫ノード、兄弟ノードといった言い方もするいとこノードとかはとこノードという言い方は聞いたことがない…… Copyright (C) 2011 www.kawaz.org All Rights Reserved. 12
jQueryオブジェクトとは jQueryオブジェクトとは、DOMノードの集合に対して一定の操作を行えるようにしたもの jQueryオブジェクトを生成するには$関数を使う（ダラー関数とか読む） $関数は引数によって、既存のノードを取ってきたり、新しいノードを生成したり、かなり柔軟にjQueryオブジェクトを生成してくれるちなみに $()はjQuery()という関数の別名である jQueryを他のライブラリ(prototype.js)などと一緒に使うときは$が競合してしまうことがあるため、$()ではなく、jQuery()を使った方が良いとされているが、現状、併せて使うことがほとんどないため、気にしなくて良い気がする Copyright (C) 2011 www.kawaz.org All Rights Reserved. 13
$関数の使い方1 既存のDOM要素を選択する CSSセレクタのようなものを引数に渡す CSSセレクタに独自の拡張がされていたり、CSSセレクタに似せて実装されている別物なので「ようなもの」と表記ドキュメント上から、これらにマッチするDOM要素全てを含んだ jQueryオブジェクトを生成する // 全てのp要素 $('p'); // kawazをclassに持つ要素 $('.kawaz'); // contentをidに持つ要素の直下にあるリスト要素 $('#content > li'); // リンク先がhttp://www.kawaz.orgから始まるa要素 $('a[href^="http://www.kawaz.org"]'); // 各親要素に対して3n+1(1, 4, 7…)番目にあるリスト要素 $('li:nth-child(3n+1)'); // 選択状態にあるテキストフィールド $('input[type="text"]:selected'); Copyright (C) 2011 www.kawaz.org All Rights Reserved. 14
$関数の使い方2 新しいDOM要素を生成するタグやHTMLをそのまま文字列で引数として渡す新しいDOM要素が生成され、それを含んだjQueryオブジェクトが生成される // 空のp要素を生成する $('<p>'); // 文章を含んだp要素を生成する $('<p>おなかすいた</p>'); // 入れ子にもできる $('<p><b>ねむたい！！！！</b></p>'); 他にも、DOM要素をオブジェクトとして直接渡したり、配列など別のオブジェクトを渡してjQueryオブジェクトを生成することができるが、割愛する。 Copyright (C) 2011 www.kawaz.org All Rights Reserved. 15
jQueryオブジェクトと変数 jQueryオブジェクトは普通の変数に格納できるどんな名前の変数に格納することでもできるが、$から始まる変数名の変数に格納することを強くオススメする var $hoge = $('.hoge'); // いい var hoge = $('.hoge'); // 問題なく動くけど避けるべきこれはルールではなくマナー、お作法 jQueryを書く人の間では「$から始まる変数にはjQueryオブジェクトが格納されている」という暗黙の了解がある当たり前だが、逆にほかのオブジェクトを$から始まる変数に入れないでください jQueryに限らず、他の人を思いやって書けるプログラマは良いプログラマです Copyright (C) 2011 www.kawaz.org All Rights Reserved. 16
$(function(){}); jQueryを書き始める前に毎回これで囲んで書くことを強く推奨！ $(function(){ }); 理由１：遅延実行させるためこれに囲むと、確実にHTMLの描画が終わってから実行される囲まないと、HTMLの描画前に実行されるかもしれない DOMノードが生成される前にセレクタを使うと取得できない初心者が一番ハマるところだとおもう理由２：名前空間を分離させるため他のスクリプト、ブラウザ拡張、コンソールなどにより、中の状態を書き換えられることを防ぐことができるもちろん、プラグインを作るなど、囲んではいけない場合も存在するが、それは理解してきてからで良いと思う Copyright (C) 2011 www.kawaz.org All Rights Reserved. 17
jQueryの基本はこれだけ！いままで説明したところで、「操作したい要素の選択・探索」は大体マスターしました。あとは「命令」を覚えていくだけ！基本的な命令だけ押さえておけばOK 残りは以下のページに「命令のカタログ」的なものがあるので、ボーッと眺めて「こんなのあるんだー」と思っておけば完璧 jQuery 日本語リファレンス <http://semooh.jp/jquery/> 上のページ、初学者にはすごくオススメなのだけど、更新が2年も止まっているため、ある程度のレベルのことをするには微妙である。たとえば、後ほど説明する1.4.xから導入されたdelegateなども載っていない。バージョンごとに細かい仕様変更があることもあるが、そこでハマることはほとんどないと思われるので、常用には問題ないと思う。 Copyright (C) 2011 www.kawaz.org All Rights Reserved. 18
jQueryの命令命令（メソッド）は以下のように大別できる Attributes（属性、内容の操作） Traversing（要素の探索） Manipulation（要素の操作） CSS（CSSの操作） Events（イベントの操作） Effects（エフェクトを加える） Ajax（通信、ネットワーク周り） Utilities（その他もろもろ） Copyright (C) 2011 www.kawaz.org All Rights Reserved. 19
jQueryの命令命令（メソッド）は以下のように大別できる Attributes（属性、内容の操作） Traversing（要素の探索） Manipulation（要素の操作） CSS（CSSの操作） Events（イベントの操作） Effects（エフェクトを加える） Ajax（通信、ネットワーク周り） Utilities（その他もろもろ）今回は主に、デザイナさんが使うことの多い、太字についてメインに解説する。特にイベント周りを重点的に。筆者が、いろいろjQueryをいじり倒した上で、よく使うメソッドについてのみ取り上げるので、その他については先ほどのページを読んでおいてほしい Copyright (C) 2011 www.kawaz.org All Rights Reserved. 20
Attributes DOM要素の内容や属性を取得したり書き換えたりちなみに属性(Attr)とは以下の太字の部分である <a href="http://www.kawaz.org/" title="Kawaz">Kawaz</a> // jQueryオブジェクト最初の要素の属性値を取り出す $('a').attr('href'); // http://www.kawaz.org $('a').attr('alt', 'Kawazポータル'); // 設定する // 一度に複数指定もできる $('a').attr({alt : 'Kawazポータル', target : '_blank'}); // classをつけたり外したり $('a').addClass('link'); $('a').removeClass('link'); // 中身を取得、書き換える $('a').text(); // Kawaz $('a').text('Kawazポータル'); // 書き換える Copyright (C) 2011 www.kawaz.org All Rights Reserved. 21
Traversing jQueryオブジェクトに含まれているDOM集合を選択したり、別のDOM を探索したり非常に種類があるが、基本的にこれぐらいしか使わない気がする書こうと思えばいくらでも複雑にできるが、これぐらいにとどめておいた方が良いかも（後述） $('div').filter('.hoge'); // divの要素集合の中からクラス名が hogeのもののみ取り出す $('div').children(); // divの子要素全てを取り出す $('div').find('.piyo'); // divの子孫からクラス名がpiyoのものを取り出す $('li').siblings(); // liの兄弟要素全てを返す $('div').closest(); // divの直近の親要素を取り出す Copyright (C) 2011 www.kawaz.org All Rights Reserved. 22
シンプルイズベスト Traversingや最初に説明したSelector、次のManipulationについても言えることだが、いろいろなメソッドを使って、複雑な探索やDOM操作をすべきではない（と個人的には思う）。理由として HTML構造が少しでも変わると利用できなくなる可能性があるコードの可読性が下がる実行パフォーマンスが（微々たるものだが）下がるなど、デメリットの方が多いため、使わなければいけない場合以外は使わない方が良い。自分でHTMLが書ける場合は、操作する要素にあらかじめクラス名をつけておくと、クラスセレクタだけで目的のDOMに到達できる複雑な操作や探索は、既存のページを（ブラウザ拡張などで）弄るなど、どうしてもHTMLを書き換えられない状態で使うべき Copyright (C) 2011 www.kawaz.org All Rights Reserved. 23
Manipulation DOMを追加したり削除したり生成したDOMはappendなどで、すでに表示されているDOMに追加しないと表示されない個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $('<li>').text("要素です！"); // 新しく要素を生成して $('div').append($li); // 全てのdiv要素の一番下に挿入 $li.wrap('ul') // さらに要素で囲む<ul><li></li></ul> var $newDiv = $('div.hoge').clone(); // hogeというクラスのdiv要素をコピー $('div').before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す Copyright (C) 2011 www.kawaz.org All Rights Reserved. 24
Manipulation DOMを追加したり削除したり生成したDOMはappendなどで、すでに表示されているDOMに追加しないと表示されない個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $('<li>').text("要素です！"); // 新しく要素を生成して $('div').append($li); // 全てのdiv要素の一番下に挿入 $li.wrap('ul') // さらに要素で囲む<ul><li></li></ul> var $newDiv = $('div').clone(); // div要素をコピー $('div').before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> </div> Copyright (C) 2011 www.kawaz.org All Rights Reserved. 25
Manipulation DOMを追加したり削除したり生成したDOMはappendなどで、すでに表示されているDOMに追加しないと表示されない個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $('<li>').text("要素です！"); // 新しく要素を生成して $('div').append($li); // 全てのdiv要素の一番下に挿入 $li.wrap('ul') // さらに要素で囲む<ul><li></li></ul> var $newDiv = $('div').clone(); // div要素をコピー $('div').before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> <li>要素です！</li> </div> Copyright (C) 2011 www.kawaz.org All Rights Reserved. 26
Manipulation DOMを追加したり削除したり生成したDOMはappendなどで、すでに表示されているDOMに追加しないと表示されない個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $('<li>').text("要素です！"); // 新しく要素を生成して $('div').append($li); // 全てのdiv要素の一番下に挿入 $li.wrap('ul') // さらに要素で囲む<ul><li></li></ul> var $newDiv = $('div').clone(); // div要素をコピー $('div').before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> <ul> <li>要素です！</li> </ul> </div> Copyright (C) 2011 www.kawaz.org All Rights Reserved. 27
Manipulation DOMを追加したり削除したり生成したDOMはappendなどで、すでに表示されているDOMに追加しないと表示されない個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $('<li>').text("要素です！"); // 新しく要素を生成して $('div').append($li); // 全てのdiv要素の一番下に挿入 $li.wrap('ul') // さらに要素で囲む<ul><li></li></ul> var $newDiv = $('div').clone(); // div要素をコピー $('div').before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> <ul> <li>要素です！</li> </ul> </div> Copyright (C) 2011 www.kawaz.org All Rights Reserved. 28
Manipulation DOMを追加したり削除したり生成したDOMはappendなどで、すでに表示されているDOMに追加しないと表示されない個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $('<li>').text("要素です！"); // 新しく要素を生成して $('div').append($li); // 全てのdiv要素の一番下に挿入 $li.wrap('ul') // さらに要素で囲む<ul><li></li></ul> var $newDiv = $('div').clone(); // div要素をコピー $('div').before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> <ul> <li>要素です！</li> </ul> </div> <div> <ul> <li>要素です！</li> </ul> </div> Copyright (C) 2011 www.kawaz.org All Rights Reserved. 29
Manipulation DOMを追加したり削除したり生成したDOMはappendなどで、すでに表示されているDOMに追加しないと表示されない個人的にappend/prepend, before/after, wrap, empty, remove, cloneぐらいしか使わない気がする var $li = $('<li>').text("要素です！"); // 新しく要素を生成して $('div').append($li); // 全てのdiv要素の一番下に挿入 $li.wrap('ul') // さらに要素で囲む<ul><li></li></ul> var $newDiv = $('div').clone(); // div要素をコピー $('div').before($newDiv); // 元々あったdivの前に挿入 $li.remove(); // でもやっぱり消す <div> <ul> <li>要素です！</li> </ul> </div> <div> <ul> </ul> </div> Copyright (C) 2011 www.kawaz.org All Rights Reserved. 30
CSS 文字通り、要素のCSS、見た目の操作特に、横幅縦幅やスクロール位置を動的に取得できるのが便利！一番直感的に理解しやすいので詳しい解説は不要かと $('div').css('background'); // 背景色を取得 $('div').css('background', 'blue'); // 背景色を青に $('div').width(); // 横幅を取り出す $('div').width(100); // 横幅を100に変更 $('div').position(); // top, leftの値を親要素基準で取得 $('div').css('margin-left', '+=10'); // margin-leftを現在の値+10する Copyright (C) 2011 www.kawaz.org All Rights Reserved. 31
Effects DOM要素を動かしたり、フェードアウトしたりが簡単にできる個人的にjQueryを初めて覚えて、一番感激した機能。最初に学ぶと簡単にかっこいい物が作れてモチベーションが上がると思う EaseAnimation（だんだん遅くなったりとか早くなったりとか）も使えるコードサンプルよりデモを見たほうが楽しい http://semooh.jp/jquery/api/effects/ Copyright (C) 2011 www.kawaz.org All Rights Reserved. 32
Events DOM要素にイベントを追加する jQueryのキモだと思う JavaScriptは基本的にイベントドリブン（イベント駆動）で開発していくためイベントドリブン：○○が起こったとき、△△する、という処理をひたすら書いていくあるボタンがクリックされたときあるテキストフィールドに文字が入力されたときエンターキーが押されたときアニメーションが終わったとき通信が終わったとき Copyright (C) 2011 www.kawaz.org All Rights Reserved. 33
Events 基本は$.bind() $('a').bind('mouseover', function(e){ alert("マウスが乗りました"); }); このコードが走った時、hoverされたときに実行する動作を予約する。このコードが走った時点で処理が発生するわけではないので注意！引数に渡す関数オブジェクトをcallbackと呼んだりする bindでイベントを束縛すると、実行時点でセレクタにマッチする要素でしかイベントが発生しないので注意！たとえば、bindを行った後に新たなa要素を生成して、appendしたとしても、そこではイベントは実行されないちなみに、最初から定義されている動作を殺すにはcallback内で return falseしてやる。（aタグをクリックしてもリンクしないようにするなど） Copyright (C) 2011 www.kawaz.org All Rights Reserved. 34
Events よく使うイベント click, hover, change, focus, keydown, submitなどちなみに以下のようなショートカットも利用できる前のページに書いた物と全く同じ動作をする $('a').mouseover(function(e){ alert("マウスが乗りました"); }); bindの他一度だけ実行して、以降はイベントを実行しないone 後から追加された要素に対してもイベントを紐づけるdelegate などがある liveというのも存在するが、delegateに似ているので、基本的にほぼ使わない Copyright (C) 2011 www.kawaz.org All Rights Reserved. 35
Ajax Ajax = Asynchronous JavaScript + XML 一昔前(2006年頃)にメチャクチャ流行った要はJSで外部と通信して、ページ遷移なしにページを書き換える仕組み全般のことこんな名前だけどXMLはオワコンな気がする。最近はJSONを使うことが多い。近年は当たり前になってきたので改まってこういう言い方をすることは少なくなったが、名残として残っている jQueryではpostやgetなどhttp通信周りが扱える。デザイナが使うことはあまりなく、コード例は省略するが、例題3で利用している。個人的にはloadが便利すぎて生きるのが辛い Kawazポータルのかわずったーもっと読む機能とか Copyright (C) 2011 www.kawaz.org All Rights Reserved. 36
例題個人的にプログラミングは「習うより慣れろ」だと思っているので、とにかく例題にチャレンジしてみるのがKawaz流。テンプレートを今からKawazポータルにうｐするので、それを書き換える感じで挑戦してみてほしい Copyright (C) 2011 www.kawaz.org All Rights Reserved. 37
例題1 クリックすると適当なDOM要素をページに追加するボタンを作ろうクリックする度、要素が増えるね使うと簡単に作れるメソッド例 click append 余裕があればfadeInやtoggleなどでEffectsをつけてみるとテンション上がってくる Copyright (C) 2011 www.kawaz.org All Rights Reserved. 38
例題2 あらかじめ用意されているdiv要素にhoverしている間だけ色を変え、マウスを離したら元に戻すようにしてみよう使うと簡単に作れるメソッド例 hover css 元の色を直接ソースに書き込まずに、色を変える前に元の色を保存しておいて、離したときに戻すというアプローチが取れると良いと思う Copyright (C) 2011 www.kawaz.org All Rights Reserved. 39
例題3 テキストフィールドにTwitterのIDを入力して、ボタンを押すと、そのID のユーザーのつぶやきを読み込み、ページに追加してみましょう使うと簡単に作れるメソッド例 click val get each append Twitter APIの取得部分のみ、サンプルプログラムに用意されているので、それを読みながら改変してみよう余裕があれば、ボタンを押してから読み込みが終わるまでの間のみ「読み込み中」の表示ができると尚良いです Copyright (C) 2011 www.kawaz.org All Rights Reserved. 40
コーディングの際にコンソールの使い方を覚える普通のブラウザ（Chrome, Safari, Opera）で利用可能 FirefoxはFirebugを導入すれば利用可能普通じゃないブラウザでは利用できない文法エラーや記述ミスで実行が止まってしまった場合は怒ってくれるため、困ったら見てみるのが良いと思う。また、console.logによるプリントデバッグも有効 Copyright (C) 2011 www.kawaz.org All Rights Reserved. 41
スコープについて JavaScriptはスコープがやっかい。特にthisの扱い jQueryは性質上、コールバックを多用するので、thisのスコープには気をつけた方が良い $('div').bind('click', function(){ this.find('li').fadeTo('normal', 0.5, function(){ this.text("半透明になった！"); }); this.text("押された！！！"); }); コールバック中のthisは、呼び出し元のjQueryオブジェクトを参照するこれを理解していないとハマるので注意 Copyright (C) 2011 www.kawaz.org All Rights Reserved. 42
jQueryプラグインとは jQueryプラグインとは jQueryはjQueryオブジェクトの命令を独自に拡張できる jQueryプラグイン=拡張された命令を提供するもの設定などが豊富に用意されていて、どの場合にも対応できるように汎化されているプラグインが良いプラグイン作り方は要望があれば解説しますが、汎用的に作るには結構な技術力が必要です。 Copyright (C) 2011 www.kawaz.org All Rights Reserved. 43
jQuery UIとはおそらく最も有名なjQueryプラグイン Web上でドラッグやリサイズ、複数選択など、普通に実装するにはクソ面倒なインターフェースを超簡単に実装できるようにするプラグインカスタマイズ性が高く、汎用的に使えるデモを見てみるのが良いと思う http://jqueryui.com/ Copyright (C) 2011 www.kawaz.org All Rights Reserved. 44
基本的なプラグインの使い方大体のプラグインはほぼ同じ使い方でこうやって使える逆にこの方法で使えないプラグインはクソプラグインの可能性が高いので、使用を再考した方が良い $(function() { $( "#draggable" ).draggable({ axis : 'x', opacity : 0.5, zIndex : 999 }); }); 基本的に使いたい要素に対して追加した動作を呼び出し、必要に応じて、連想配列で設定を渡してあげる当たり前だが設定はものによって項目が違うのでドキュメント参照どんな順番で書いても動くが、アルファベット順に設定を書くと綺麗だと思う当たり前だが、プラグインをheadで読み込ませないといけない。 jQueryの後、自分で書くコードの前に読み込ませること Copyright (C) 2011 www.kawaz.org All Rights Reserved. 45
ご静聴ありがとうございました！ Copyright (C) 2011 www.kawaz.org All Rights Reserved. 46

Check these out next

Kawaz的jQuery入門

Recommandé

Contenu connexe

Présentations pour vous(20)

Similaire à Kawaz的jQuery入門(20)

Plus de Kohki Miki(20)

Dernier(20)

Kawaz的jQuery入門

Notes de l'éditeur