これからのJSの話をしよう ～jQueryで作るTwitterアプリ～

Present by ぱろっと(@parrot_studio)

for Gunma.web #2

2010/10/09

・名前：ぱろっと

・使える言語：Ruby Javascript Java Perl VB PHP etc…

・職歴：SE/プログラマ/フリーランス/MMORPGの運営

・RDGC – Ruby(Rundom Dungeon Game Core)作者

・hatena：id:parrot_studio

・Twitter：@parrot_studio

・RO’s Blog： http://parrot.blog21.fc2.com/

Profile

というわけで早速・・・

JavaScriptとは何か？

あるプログラマsays:

フォーム制御に使うやつ？

JavaScriptなめんな

(#ﾟДﾟ)ｺﾞﾙｧ

Resource

View1

View3

View2

View4

REST(API)

Viewは各クライアントが制御

iOS その他

Flash × ○

HTML5 ○ ○

HTML5を学ぶこと

≒

JavaScriptを学ぶこと

もはや「知らない」では

済まされない・・・

(((((( ;ﾟДﾟ)))))

でも・・・

難しいんでしょう(´･ω･)？

そんなあなたに・・・

jQueryでできること

・セレクタによるDOM操作

・属性の操作

・イベント処理

・エフェクト（アニメーション）

・Ajax

実例：ページ送りの処理

// <a page=‚6‛>6</a>をクリックしたときの処理

$(

$(‚a[page]‛).click(function(){

var page = $(this).attr('page');

jump_page(page); // ページ遷移（別function）

return false;

});

);

そんなのは

prototype.jsでも

できるんじゃないかね？

( ﾟДﾟ)y─~~

jQueryの利点：

グローバル変数が

「$」一つしかないこと

本当はこのあたりで

jQueryの機能をいろいろ

紹介するつもりだったけど・・・

時間が足りないので

ばっさりカットで

Σ(ﾟДﾟ)ｶﾞｰﾝ

というわけでそろそろ・・・

jQueryで

Twitterアプリを作ろう

さっきから

顔文字を多用してるけど・・・

きっと顔文字を使う人は

いっぱいいるはずだよね

(´･ω･)？

そんな人を

Twitterから探すアプリ

(´･ω･`)ｼｮﾎﾞｰﾝとしたー http://www.parrot-studio.com/shoborn/

完成したものが

こちらに(´･ω･)っ

Data: Twitter(REST API)

View: Browser(JS)

エフェクト実例：fadeIn処理

0. まず服を脱ぎます

1. 取得済みのツイートを一つ持ってくる

2. display:noneをセットしてDOMに追加

3. addClass(name)でLvに応じたclassをセット

4. fadeIn()でデータを浮かび上がらせる

5. 1秒くらい後に1.から再実行

もっと小難しいアニメーションも

プラグインを使えば超簡単

そろそろまとめますよ・・・

JavaScriptにまつわる

二つの悲劇

1. グローバル変数の多用

HTMLのDOMすら

グローバル変数

（ﾉﾟДﾟ)ノ彡┻━┻

つられて（？）プログラマも

グローバル変数を多用

2. ‚Java‛Scriptという名前

‛JavaScriptは

Cの皮をかぶった

Lispなのである。 ‛ --- Douglas Crockford

むしろJavaよりRubyに近い

Σ(ﾟДﾟ)ｶﾞｰﾝ

そんなJavaScriptを

どう‚美しく‛書くか？

JavaScriptは

ブラウザ付属の

「簡易」言語にあらず！

∠( ﾟдﾟ)／

以上だけど

何か質問ある(´･ω･)？

～おまけ～

jQueryの主要機能

1. セレクタ

$(‚p‛) // pタグ

$(‚#id‛) // 特定のidを持つ要素

$(‚.class‛) // 特定のclassをもつ要素

$(‚td:even‛) / $(‚td:odd‛) // tdタグの奇数/偶数

$("a[page]") // <a page=‚x">x</a>

2. 操作

// #lvのフォームが持つ値をget

$(‚#lv‛).val()

// #lvのフォームに値をset

$(‚#lv‛).val(3)

// selectを指定した場合、

// 自動でoption側を見てくれる

よくやる間違い：

値を取得するつもりで

$(…).val と書く

// 対象の要素にclass=‘lv3’を付加

$(‚#data‛).addClass(‘lv3’)

// 要素に属性を付加

$(‚a[page]:first‛).attr(‘page’, ‘1’)

// 属性値を取得

$(‚a[page]‛).attr(‘page’)

3. ハンドラ

$(‚a[page]‛).click(function(){

// クリックされた時の処理

})

$(‚#textform‛).keydown(function(){

// キーが押された時の処理

})

$(function(){

// 初期化処理

// ハンドラの設定とか

// body.onloadに近いタイミング

})

4. エフェクト

$(…).fadeIn()

$(…).fadeOut()

$(…).slideUp()

$(…).slideDown()

// その他カスタムやプラグイン

5. Ajax

$.get(url, param, function(result){

})

$.post(url, param, function(result){

})

$.getJSON(url, param, function(data){

})

// JSONPも対応