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基準でお話しします


jQueryってなに？
JavaScript向けライブラリ
少ないコード量でパワフルな実装が可能
今のWeb界隈では必須技術（giginet調べ）
無料
オープンソース
改変・再配布・商用利用可能（MIT）
バージョンアップが早い
拡張が豊富（jQueryプラグイン）


下準備
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の宣言は、自分のコードを読み込ませるより前に行ってくださ
い


jQueryを書いてみよう
$(function(){
$('body').append('Hello, jQuery!');
});

わずかこれだけ！
先ほどのHTMLファイルを開いて、Hello, jQueryとだけ表示されていれ
ば成功です！


jQuery超入門

$('.kawaz').css('background', 'red');


jQuery超入門

jQueryオブジェクト（主体）メソッド（命令）

jQueryオブジェクト（主体）.メソッド（命令）で構成されている！
上の例の場合、classがkawazの要素の背景色を赤くする


jQuery超入門

jQueryオブジェクト（主体）メソッド（命令）

jQueryオブジェクト（主体）.メソッド（命令）で構成されている！
上の例の場合、classがkawazの要素の背景色を赤くする

基本的に、jQueryコーディングは
操作したい要素の選択、探索
その要素に対してどのような操作をするか
２つに帰結する！


DOMってなに？

DOM = Document Object Model
HTML上にある要素をプログラムで扱いやすく定めたもの


DOMってなに？
超基本：HTMLは木構造になっている
HTML
HEAD
TITLE くだものいちらん
BODY
UL
LI りんご
LI バナナ
LI みかん


DOMってなに？
HTML
HEAD
BODY
UL
LI りんご DOMノード
LI バナナ
LI みかん


DOMってなに？
HTML
HEAD
BODY
UL
LI りんご DOMノード
LI バナナ
LI みかん

各ノードは入れ子の構造になっている
LIの各ノードから見てULは親ノード、BODYより上は先祖ノードと
言ったりする
子ノード、子孫ノード、兄弟ノードといった言い方もする
いとこノードとかはとこノードという言い方は聞いたことがな
い……

jQueryオブジェクトとは
jQueryオブジェクトとは、DOMノードの集合に対して一定の操作を行
えるようにしたもの
jQueryオブジェクトを生成するには$関数を使う（ダラー関数とか読む）
$関数は引数によって、既存のノードを取ってきたり、新しいノードを生
成したり、かなり柔軟にjQueryオブジェクトを生成してくれる

ちなみに $()はjQuery()という関数の別名である
jQueryを他のライブラリ(prototype.js)などと一緒に使うときは$が競合してしまうことがあるため、$()では
なく、jQuery()を使った方が良いとされているが、現状、併せて使うことがほとんどないため、気にしなくて良
い気がする


$関数の使い方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');


$関数の使い方2
新しいDOM要素を生成する
タグやHTMLをそのまま文字列で引数として渡す
新しいDOM要素が生成され、それを含んだjQueryオブジェクトが生成
される

// 空のp要素を生成する
$('<p>');
// 文章を含んだp要素を生成する
$('<p>おなかすいた</p>');
// 入れ子にもできる
$('<p><b>ねむたい！！！！</b></p>');

他にも、DOM要素をオブジェクトとして直接渡したり、配列など別のオブジェクトを渡してjQueryオブジェクトを生
成することができるが、割愛する。


jQueryオブジェクトと変数
jQueryオブジェクトは普通の変数に格納できる
どんな名前の変数に格納することでもできるが、$から始まる変数名の
変数に格納することを強くオススメする

var $hoge = $('.hoge'); // いい
var hoge = $('.hoge'); // 問題なく動くけど避けるべき

これはルールではなくマナー、お作法
jQueryを書く人の間では「$から始まる変数にはjQueryオブジェクトが
格納されている」という暗黙の了解がある
当たり前だが、逆にほかのオブジェクトを$から始まる変数に入れないでください

jQueryに限らず、他の人を思いやって書けるプログラマは良いプログラ
マです


$(function(){});
jQueryを書き始める前に毎回これで囲んで書くことを強く推奨！

$(function(){
});

理由１：遅延実行させるため
これに囲むと、確実にHTMLの描画が終わってから実行される
囲まないと、HTMLの描画前に実行されるかもしれない
DOMノードが生成される前にセレクタを使うと取得できない
初心者が一番ハマるところだとおもう
理由２：名前空間を分離させるため
他のスクリプト、ブラウザ拡張、コンソールなどにより、中の状態を
書き換えられることを防ぐことができる

もちろん、プラグインを作るなど、囲んではいけない場合も存在するが、それは理解してきてからで良いと思う


jQueryの基本はこれだけ！
いままで説明したところで、「操作したい要素の選択・探索」は大体マス
ターしました。
あとは「命令」を覚えていくだけ！
基本的な命令だけ押さえておけばOK
残りは以下のページに「命令のカタログ」的なものがあるので、
ボーッと眺めて「こんなのあるんだー」と思っておけば完璧
jQuery 日本語リファレンス <http://semooh.jp/jquery/>

上のページ、初学者にはすごくオススメなのだけど、更新が2年も止まっているため、ある程度のレベルのこと
をするには微妙である。たとえば、後ほど説明する1.4.xから導入されたdelegateなども載っていない。
バージョンごとに細かい仕様変更があることもあるが、そこでハマることはほとんどないと思われるので、常用
には問題ないと思う。


jQueryの命令
命令（メソッド）は以下のように大別できる
Attributes（属性、内容の操作）
Traversing（要素の探索）
Manipulation（要素の操作）
CSS（CSSの操作）
Events（イベントの操作）
Eﬀects（エフェクトを加える）
Ajax（通信、ネットワーク周り）
Utilities（その他もろもろ）


jQueryの命令
命令（メソッド）は以下のように大別できる
Attributes（属性、内容の操作）
Traversing（要素の探索）
Manipulation（要素の操作）
CSS（CSSの操作）
Events（イベントの操作）
Eﬀects（エフェクトを加える）
Ajax（通信、ネットワーク周り）
Utilities（その他もろもろ）

今回は主に、デザイナさんが使うことの多い、太字についてメインに解
説する。特にイベント周りを重点的に。
筆者が、いろいろjQueryをいじり倒した上で、よく使うメソッドについ
てのみ取り上げるので、その他については先ほどのページを読んでおい
てほしい

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ポータル'); // 書き換える


Traversing
jQueryオブジェクトに含まれているDOM集合を選択したり、別のDOM
を探索したり
非常に種類があるが、基本的にこれぐらいしか使わない気がする
書こうと思えばいくらでも複雑にできるが、これぐらいにとどめてお
いた方が良いかも（後述）

$('div').filter('.hoge'); // divの要素集合の中からクラス名が
hogeのもののみ取り出す
$('div').children(); // divの子要素全てを取り出す
$('div').find('.piyo'); // divの子孫からクラス名がpiyoのもの
を取り出す
$('li').siblings(); // liの兄弟要素全てを返す
$('div').closest(); // divの直近の親要素を取り出す


シンプルイズベスト
Traversingや最初に説明したSelector、次のManipulationについても言え
ることだが、いろいろなメソッドを使って、複雑な探索やDOM操作をすべ
きではない（と個人的には思う）。理由として

HTML構造が少しでも変わると利用できなくなる可能性がある
コードの可読性が下がる
実行パフォーマンスが（微々たるものだが）下がる

など、デメリットの方が多いため、使わなければいけない場合以外は使わな
い方が良い。
自分でHTMLが書ける場合は、操作する要素にあらかじめクラス名をつけておくと、クラスセレクタだけで目的
のDOMに到達できる
複雑な操作や探索は、既存のページを（ブラウザ拡張などで）弄るなど、どうしてもHTMLを書き換えられな
い状態で使うべき


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(); // でもやっぱり消す


Manipulation
var $newDiv = $('div').clone(); // div要素をコピー
<div>
</div>


Manipulation
<div>
<li>要素です！</li>
</div>


Manipulation
<div>
<ul>
</ul>
</div>


Manipulation
<div>
<ul>
</ul>
</div>
<div>
<ul>
</ul>
</div>

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する


Eﬀects
DOM要素を動かしたり、フェードアウトしたりが簡単にできる
個人的にjQueryを初めて覚えて、一番感激した機能。最初に学ぶと簡
単にかっこいい物が作れてモチベーションが上がると思う
EaseAnimation（だんだん遅くなったりとか早くなったりとか）も使え
る
コードサンプルよりデモを見たほうが楽しい
http://semooh.jp/jquery/api/eﬀects/


Events
DOM要素にイベントを追加する
jQueryのキモだと思う
JavaScriptは基本的にイベントドリブン（イベント駆動）で開発して
いくため
イベントドリブン：○○が起こったとき、△△する、という処理を
ひたすら書いていく
あるボタンがクリックされたとき
あるテキストフィールドに文字が入力されたとき
エンターキーが押されたとき
アニメーションが終わったとき
通信が終わったとき


Events
基本は$.bind()
$('a').bind('mouseover', function(e){
alert("マウスが乗りました");
});

このコードが走った時、hoverされたときに実行する動作を予約する。
このコードが走った時点で処理が発生するわけではないので注意！
引数に渡す関数オブジェクトをcallbackと呼んだりする
bindでイベントを束縛すると、実行時点でセレクタにマッチする要素
でしかイベントが発生しないので注意！
たとえば、bindを行った後に新たなa要素を生成して、appendした
としても、そこではイベントは実行されない
ちなみに、最初から定義されている動作を殺すにはcallback内で
return falseしてやる。（aタグをクリックしてもリンクしないように
するなど）


Events
よく使うイベント
click, hover, change, focus, keydown, submitなど
ちなみに以下のようなショートカットも利用できる
前のページに書いた物と全く同じ動作をする

$('a').mouseover(function(e){
alert("マウスが乗りました");
});

bindの他
一度だけ実行して、以降はイベントを実行しないone
後から追加された要素に対してもイベントを紐づけるdelegate
などがある
liveというのも存在するが、delegateに似ているので、基本的にほぼ使わない


Ajax
Ajax = Asynchronous JavaScript + XML
一昔前(2006年頃)にメチャクチャ流行った
要はJSで外部と通信して、ページ遷移なしにページを書き換える仕組
み全般のこと
こんな名前だけどXMLはオワコンな気がする。最近はJSONを使うこ
とが多い。
近年は当たり前になってきたので改まってこういう言い方をすること
は少なくなったが、名残として残っている
jQueryではpostやgetなどhttp通信周りが扱える。デザイナが使うこ
とはあまりなく、コード例は省略するが、例題3で利用している。
個人的にはloadが便利すぎて生きるのが辛い
Kawazポータルのかわずったーもっと読む機能とか


例題
個人的にプログラミングは「習うより慣れろ」だと思っているので、とに
かく例題にチャレンジしてみるのがKawaz流。
テンプレートを今からKawazポータルにうｐするので、それを書き換
える感じで挑戦してみてほしい


例題1
クリックすると適当なDOM要素をページに追加するボタンを作ろう
クリックする度、要素が増えるね
使うと簡単に作れるメソッド例
click
append
余裕があればfadeInやtoggleなどでEﬀectsをつけてみるとテンション
上がってくる


例題2
あらかじめ用意されているdiv要素にhoverしている間だけ色を変え、マ
ウスを離したら元に戻すようにしてみよう
hover
css
元の色を直接ソースに書き込まずに、色を変える前に元の色を保存して
おいて、離したときに戻すというアプローチが取れると良いと思う


例題3
テキストフィールドにTwitterのIDを入力して、ボタンを押すと、そのID
のユーザーのつぶやきを読み込み、ページに追加してみましょう
click
val
get
each
append
Twitter APIの取得部分のみ、サンプルプログラムに用意されているの
で、それを読みながら改変してみよう
余裕があれば、ボタンを押してから読み込みが終わるまでの間のみ
「読み込み中」の表示ができると尚良いです


コーディングの際に
コンソールの使い方を覚える
普通のブラウザ（Chrome, Safari, Opera）で利用可能
FirefoxはFirebugを導入すれば利用可能
普通じゃないブラウザでは利用できない
文法エラーや記述ミスで実行が止まってしまった場合は怒ってくれるた
め、困ったら見てみるのが良いと思う。
また、console.logによるプリントデバッグも有効


スコープについて
JavaScriptはスコープがやっかい。特にthisの扱い
jQueryは性質上、コールバックを多用するので、thisのスコープには気を
つけた方が良い

$('div').bind('click', function(){
this.find('li').fadeTo('normal', 0.5, function(){
this.text("半透明になった！");
});
this.text("押された！！！");
});

コールバック中のthisは、呼び出し元のjQueryオブジェクトを参照する
これを理解していないとハマるので注意


jQueryプラグインとは
jQueryプラグインとは
jQueryはjQueryオブジェクトの命令を独自に拡張できる
jQueryプラグイン=拡張された命令を提供するもの
設定などが豊富に用意されていて、どの場合にも対応できるように汎化
されているプラグインが良いプラグイン

作り方は要望があれば解説しますが、汎用的に作るには結構な技術力が
必要です。


jQuery UIとは
おそらく最も有名なjQueryプラグイン
Web上でドラッグやリサイズ、複数選択など、普通に実装するにはク
ソ面倒なインターフェースを超簡単に実装できるようにするプラグイン
カスタマイズ性が高く、汎用的に使える
デモを見てみるのが良いと思う
http://jqueryui.com/


基本的なプラグインの使い方
大体のプラグインはほぼ同じ使い方でこうやって使える
逆にこの方法で使えないプラグインはクソプラグインの可能性が高いの
で、使用を再考した方が良い $(function() {
$( "#draggable" ).draggable({
axis : 'x',
opacity : 0.5,
zIndex : 999
});
});
基本的に使いたい要素に対して追加した動作を呼び出し、必要に応じ
て、連想配列で設定を渡してあげる
当たり前だが設定はものによって項目が違うのでドキュメント参照
どんな順番で書いても動くが、アルファベット順に設定を書くと綺
麗だと思う
当たり前だが、プラグインをheadで読み込ませないといけない。
jQueryの後、自分で書くコードの前に読み込ませること


ご静聴ありがとうございました！


Kawaz的jQuery入門

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Kawaz的jQuery入門

Similaire à Kawaz的jQuery入門 (20)

Plus de Kohki Miki

Plus de Kohki Miki (20)

Kawaz的jQuery入門

Notes de l'éditeur