Introducing jQuery

jQueryって何

• JavaScriptのフレームワーク
• みんな超使ってる
• ややこしいことが超簡単にできる
• John Resigってすげー人が作ってる
• とにかくイケてる

なぜjQueryはイケてるのか

• 超短く書ける。そう作られてる。
• Write Less, Do More.
• たくさんプラグインがある。使うの簡単。
• DOM操作周りにめちゃ強い。
• JavaScript始めるのにもオススメ。
• ブラウザごとの差異も吸収してくれちゃう
• ブラウザ上でなんかするのに必要な機能が詰まってる

プログラム書く流れ

JavaScriptに限らず、大体こんな感じ。

• こんなん作りたい
• APIを調べる
• それをどーやって使うのか調べる
• なんか難しそうだったらフレームワークとか調べる
• 文法を知る（大体どれも大きくは変わらない）
• 書いてみる

APIとかフレームワークとか知らん

大丈夫です。

• そんなん普通、調べないと知りません。
  書いたことあるモノがサクサク書けるようになるだけです。
• 超いっぱいありますが僕も全部知りません。
  基本的なものを知り、後は都度調べる。
• ブラウザごとに差があったりして大変ですが、
  その辺をjQueryがうまくやってくれます。
• jQueryが便利すぎて
  JavaScriptを書くハードルが大きく下がりました！

開発環境を揃える

• Firefox
• Firebug - コンソールとか出せる
• FireQuery - jQueryデバッグしやすくなる

console.log(something);

とりあえずjquery読み込ませる

<script type="text/javascript" src="jquery.js"></script>

これで準備OK

超簡単なサンプル

$('#sample1').hide();
$('#sample1').show();
$('#sample1').fadeOut();
$('#sample1').fadeIn();

jQueryはこんな風に動く

あとは組み合わせ。

さっきの例

$('#sample1')

sample1というidが付いた要素を取ってきて…

$('#sample1').hide(); // 隠す
$('#sample1').show(); // 表示させる
$('#sample1').fadeOut(); // フェードアウト
$('#sample1').fadeIn(); // フェードイン

それに何かする。jQueryがやるのは大体こんなこと。

その前に…

とりあえず初めにこれは覚えておく。

$(function(){
    $('#sample1').show();
});

JavaScriptでページ上の何かを操作するとき、ページの読み込みを待つ必要がある。上のコードを書くと、その中身は、ページの読み込みが完了したら実行される。

※これも本当はブラウザごとに色々問題があるんだけど、上のように書けばjQueryがうまくやってくれる！

どうやって？

• セレクタ (Selectors)
  CSSでいつも使ってるアレ
• 要素横断 (Traversing)
  選んだところからどうのこうの

セレクタ

基本的にCSSのソレと同じ。

$('#sample1').show(); // idがsample1な要素

$('.sample1').show(); // classがsample1な要素

$('div').show(); // div全部

$('*')show(); // 全要素

セレクタ

jQueryが頑張ってくれるのでIE6、7でも色々使えます。

$('.sample1[href=hoge]').show();
    // hrefがhogeでclassがsample1な要素

$('#sample1 > div').show();
    // #sample1直下のdiv

$('#sample1 + div').show();
    // #sample1の直後のdiv

セレクタ

jQuery独自のセレクタやCSS3も使える。

$('tr:even').show(); // 偶数番目のtr

$(':image').show(); //input[type=image]

$('input:disabled').show();
    // disabledになってるinput

$('.hoge:not(#foo)').show();
    // クラスがhogeでidがfooじゃない要素

要素横断 - find

$('.hoge').find('p').show();

<div class="hoge">
    <blockquote>
        <p>text text</p>
        <p>text text</p>
    </blockquote>
    <p>text text</p>
    <p>text text</p>
</div>

要素横断 - children

$('.hoge').children().show();

<div class="hoge">
    <blockquote>
        <p>text text</p>
        <p>text text</p>
    </blockquote>
    <p>text text</p>
    <p>text text</p>
</div>

要素横断 - prev

$('#hoge').prev().show();

<div>
    <blockquote>
        <p>text text</p>
        <p id="hoge">text text</p>
        <p>text text</p>
    </blockquote>
</div>

要素横断 - next

$('#hoge').next().show();

<div>
    <blockquote>
        <p>text text</p>
        <p id="hoge">text text</p>
        <p>text text</p>
    </blockquote>
</div>

要素横断 - parent

$('#hoge').parent().show();

<div>
    <blockquote>
        <p>text text</p>
        <p id="hoge">text text</p>
        <p>text text</p>
    </blockquote>
</div>

要素横断 - chaining

$('#hoge').parent().parent().show();

<div>
    <blockquote>
        <p>text text</p>
        <p id="hoge">text text</p>
        <p>text text</p>
    </blockquote>
</div>

要素横断 - 変数に保存

var blockquote = $('#hoge').parent();
blockquote.parent().show();

<div>
    <blockquote>
        <p>text text</p>
        <p id="hoge">text text</p>
        <p>text text</p>
    </blockquote>
</div>

変数に保存してそこから探すのも可能。

まとめ

• 基本はセレクタなので、
  CSS書いてた人にはとっつきやすい。
• 他にも山のように「なんか取ってくる」機能がある。
• とにかく、なんか欲しいものを取ってくるのが楽。
• jQuery無しだとすごい大変。（特に昔のブラウザが）

何ができるの？

• スタイルを変更する (CSS)
  style="color:red" 的なことをする
• 内容を変更する (Attributes)
  中身変えたり属性変えたり
• アニメーションさせる (Effects)
  アニメーションできます
• 動かす (Manipulation)
  要素をあっちやこっちに動かしたり

スタイルを変更する

CSSのプロパティ名と値を指定するだけ。

$('div.hoge').css('border','4px solid red');

スタイルを変更する

ストライプのテーブルもできたり。

$('#productTable tr:odd td').css('background','#777');

スタイルを変更する

よく使うのはショートカット的なメソッドがある。

$('#box').width(400); //≒.css('width',400)
$('#box').height(200); //≒.css('height',200)

pxは勝手に補完してくれたりもする。

スタイルを変更する

表示、非表示も。

$('#box').show(); //≒.css('display','block')
$('#box').hide(); //≒.css('display','none')

spanだったら none ⇔ inline

スタイルを変更する

opacityとかIE未対応だけどうまくやってくれる。

$('#box').css('opacity',0.3);

#代わりにfilter使ってる。

内容を変更する

要素の中のテキスト変更

$('#box').text('ぼたもち');

内容を変更する

要素の中のhtml変更

$('#box').html('<img src="imgs/memeta.gif" alt="" />');

内容を変更する

要素の属性を変更

$('#img').attr('src','dog.jpg');

内容を変更する

ショートカット。

$('#box').addClass('hoge');
$('#box').removeClass('hoge');

アニメーション

フェード

$('#box').fadeIn();
$('#box').fadeOut();

アニメーション

スライド

$('#box').slideDown();
$('#box').slideUp();
$('#box').slideToggle();

アニメーション

数値の値をとるCSSプロパティなら動かせる。

$('#box').animate({
    'left' : '400px',
    'top'  : '100px'
});

動かす

append（後ろに加える）

var hoge = $('#hoge');
var fuga = $('#fuga');
hoge.append(fuga);

fuga.appendTo(hoge); でも同じ

動かす

prepend（前に加える）

var hoge = $('#hoge');
var fuga = $('#fuga');
hoge.prepend(fuga);

fuga.prependTo(hoge); でも同じ

まとめ

• 簡単に色々できます。
• ブラウザごとの差異もjQueryが何とかしてくれます。

なんか作る

要素を作って足す

var div = $('<div>divだよー</div>');
$('#hoge').append(div);

まとめ

• 文字列から要素を作れます。
• HTMLをガリガリ作れます。

イベントは超重要

ページ上でJavaScript使う時って、
大体、クリックなりなんなりされて動かすことが多い。

• クリック（click）
• マウスオーバー（mouseover）
• マウスアウト（mouseout）
• フォーカス（focus）
• ブラー（blur）
• その他多数

何かが起こった時にスクリプトを実行させる仕組み

クリック click

さっきからボタンで使ってますけど…

$('#box').click(function(){
    $('#result').text('クリックされた');
});

マウスオーバー mouseover

マウスがのった時

$('#box').mouseover(function(){
    $('#result').text('マウスのった');
});

マウスアウト mouseout

マウスがのった時

$('#box').mouseout(function(){
    $('#result').text('マウスおりた');
});

フォーカス focus

フォーカスされた時

$('#input').focus(function(){
    $('#result').text('focusされた');
});

ブラー blur

フォーカスが外れた時

$('#input').blur(function(){
    $('#result').text('フォーカスはずれた');
});

イベントとthis

この中（イベントハンドラ）のthisは、イベントが起こった要素

$('div.box').click(function(){
    $(this).css('background','red');
});

# 犬がサイヤ人化

作ってみよう！の前に…

他の機能の一例を紹介します。
JavaScriptを普段書かない人にはしっくりこない内容かもしれませんが、頭の隅にでも置いておいてください。

値の取得

値をセットするメソッドは、大体、値の取得もできる。

$('#hoge').attr('src','hoge.gif');
var foo = $('#hoge').attr('src');
console.log(foo); // hoge.gif

$('#hoge').height(300);
var foo = $('#hoge').height();
console.log(foo); // 300

$(hoge).each

各要素についてループできる。thisは今の要素を指す。

$('div.box').each(function(){
    var text = $(this).text();
    alert(text);
});

$.each()ってのもある。こっちはただの配列もループ処理できる

$(hoge).is()

$(hoge)を、セレクタで評価。

$('#box').is('div');
    // divか？ true
$('#box').is(':hidden');
    // 隠れているか？ true
$('#box').is('.foo');
    // classにfooがあるか？ true
$('#box').is(':checked');
    // チェックされているか？ true
$('#box').is(':animated');
    // アニメーション中か？ true

他にもたくさんの機能があります

この他にも便利な機能がたくさんありますが、これ以上は、具体的に手を動かしながら覚えて行った方が良いでしょう。

ググるのもよいですが、本家のドキュメント、および、日本語リファレンスを参照し、正確な使い方を把握するのがオススメです。

これを作ってみます。

ふわっと（手抜き）ロールオーバー

どうやってゼロから完成に達する？

用意されたものをどうにか組み合わせてみる。
「動く」状態をキープさせながら徐々に書く。
結局のところ、試行錯誤してみるしかないが、とりあえずここでは以下のような考えのもとに完成できたと仮定します。

1. opacityが使えるかも？
2. とりあえず1個でやってみる
3. 複数でやってみる
4. each
5. アニメーションできるか？
6. 完成！

1. opacityが使えるかも？

opacity変えるとなんか薄くなりますよね？

$('#menu1').css('opacity',0.9);
$('#menu2').css('opacity',0.7);
$('#menu3').css('opacity',0.5);
$('#menu4').css('opacity',0.3);

あーなんか半透明になるかもねー

2. とりあえず1個でやってみる

イベントって使えるんじゃないかこれって。

var a = $('#menu1');
a.mouseover(function(){
    a.css('opacity', 0.5);
});
a.mouseout(function(){
    a.css('opacity', 1);
});

3. 複数でやってみる

クラスにすればこれって… あ…

var a = $('a.menu');
a.mouseover(function(){
    a.css('opacity', 0.5);
});
a.mouseout(function(){
    a.css('opacity', 1);
});

4. each

1個ずつ個別に処理するときはあれじゃだめっぽい

$('a.menu').each(function(){
    var a = $(this);
    a.mouseover(function(){
        a.css('opacity', 0.5);
    });
    a.mouseout(function(){
        a.css('opacity', 1);
    });
});

5. アニメーションできるか？

あ、もしかしてこれanimateってやつで動きます？

$('a.menu').each(function(){
    var a = $(this);
    a.mouseover(function(){
        a.animate({ opacity: 0.5 });
    });
    a.mouseout(function(){
        a.animate({ opacity: 1 });
    });
});

6. 完成！

しかしこれでも早くマウス動かすと動きが微妙。

そーいったことをどうするか、もっとアニメーションの機能を調べたり、もっと別の方法が無いかとか、そーいう感じでブラッシュアップを続けましょう。

JavaScriptが書けるということは
どういうことか？

まー自分が偉そうに言えたことじゃないですけど…

• 知識＋アイデア＝自分のコード
• 素敵なコードを書くために
• コーディングを楽しめるということ

知識＋アイデア＝自分のコード

コードとはただ単にアイデアが具現化したもの。
JavaScriptが書けるようになりたいという人は
何をどうしたいんでしょう？
とりあえず書いてみることから始めましょう。

• ロールオーバーの例
• アニメーションの例

ロールオーバーの例

どうすればさっきのロールオーバーが作れる？
あれが作れるという発想に至る？

• CSSのopacityを知っている（CSSとJSは仲がいい）
• イベントの使い方を知っている
• 幸運にもここから閃いた
• もしくは、幸運にも前に似たようなのを見たことがある
• アニメーションの使い方を知っている

じゃあちょっと書いてみようかなとでも思う。

アニメーションの例

jQueryのanimationだのfadeInだの

• これってどうやって動いてるの？
• タイマー
• スタイルの変更
• 乱暴に言うと、この組み合わせなだけ
• 自分でもちょろっと書けばできないこともない
• （汎用的に使えるようにするのは大変）

どっかのスゲー人がこれを使いやすいように書いて、それがライブラリになってるってだけ。複雑なものは単純なものの組み合わせなだけ。

素敵なコードを書くために

• より深く文法を知る
• クロージャとかprototypeとか…
• 人のコードを読む
• JSは特に色々な書き方ができるので大変だけど、
  これすげーとでも思ったら冷めないうちに。
• 読みやすいコードを心がける
• 複雑なものにブチあたってハマる
• オブジェクト指向とかデザインパターンとか学ぶ

コーディングを楽しめるということ

が重要だと思います。

• あっという間にいろんな問題にぶち当たるはず
  ですがそれを解決していくのは楽しいです
• サイトにとってJSはただのスパイスかもしれないですけど、JSが出来ることはどんどん増えている。
• 全ajaxでページ遷移無しのサイトとか超楽しい
• CSS3とかと組み合わせても楽しい
• 綺麗に書けたら単純に嬉しい

jQueryはJavaScriptのコーディングを楽に、楽しくします。
どんどん色々書いてみましょう！

See also...

• jQuery
• jQuery日本語リファレンス
• Firefox
• Firebug
• FireQuery
• My blog
• jquery-presentation