2010/10/9におこなったプレゼン資料

1. これからのJSの話をしよう
～jQueryで作るTwitterアプリ～
Present by ぱろっと(@parrot_studio)
for Gunma.web #2
2010/10/09

2. Profile
・名前：ぱろっと
・使える言語：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/

3. というわけで早速・・・

5. JavaScriptとは何か？

6. あるプログラマsays:
フォーム制御に使うやつ？

7. JavaScriptなめんな
(#ﾟДﾟ)ｺﾞﾙｧ

8. Viewは各クライアントが制御
View1
View2
Resource
View3
REST(API)
View4

9. iOS その他
Flash × ○
HTML5 ○ ○

10. HTML5を学ぶこと
≒
JavaScriptを学ぶこと

11. もはや「知らない」では
済まされない・・・
(((((( ;ﾟДﾟ)))))

12. でも・・・
難しいんでしょう(´･ω･)？

13. そんなあなたに・・・

15. jQueryでできること
・セレクタによるDOM操作
・属性の操作
・イベント処理
・エフェクト（アニメーション）
・Ajax

16. 実例：ページ送りの処理

17. // <a page=‚6‛>6</a>をクリックしたときの処理
$(
$(‚a[page]‛).click(function(){
var page = $(this).attr('page');
jump_page(page); // ページ遷移（別function）
return false;
});
);

18. そんなのは
prototype.jsでも
できるんじゃないかね？
( ﾟДﾟ)y─~~

19. jQueryの利点：
グローバル変数が
「$」一つしかないこと

20. 本当はこのあたりで
jQueryの機能をいろいろ
紹介するつもりだったけど・・・

21. 時間が足りないので
ばっさりカットで
Σ(ﾟДﾟ)ｶﾞｰﾝ

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

23. jQueryで
Twitterアプリを作ろう

24. さっきから
顔文字を多用してるけど・・・

25. きっと顔文字を使う人は
いっぱいいるはずだよね
(´･ω･)？

26. そんな人を
Twitterから探すアプリ

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

28. 完成したものが
こちらに(´･ω･)っ

29. Data: Twitter(REST API)
View: Browser(JS)

30. エフェクト実例：fadeIn処理

31. 0. まず服を脱ぎます
1. 取得済みのツイートを一つ持ってくる
2. display:noneをセットしてDOMに追加
3. addClass(name)でLvに応じたclassをセット
4. fadeIn()でデータを浮かび上がらせる
5. 1秒くらい後に1.から再実行

32. もっと小難しいアニメーションも
プラグインを使えば超簡単

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

34. JavaScriptにまつわる
二つの悲劇

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

36. HTMLのDOMすら
グローバル変数
（ﾉﾟДﾟ)ノ彡┻━┻

37. つられて（？）プログラマも
グローバル変数を多用

38. 2. ‚Java‛Scriptという名前

39. ‛JavaScriptは
Cの皮をかぶった
Lispなのである。 ‛
--- Douglas Crockford

40. むしろJavaよりRubyに近い
Σ(ﾟДﾟ)ｶﾞｰﾝ

41. そんなJavaScriptを
どう‚美しく‛書くか？

43. JavaScriptは
ブラウザ付属の
「簡易」言語にあらず！
∠( ﾟдﾟ)／

44. 以上だけど
何か質問ある(´･ω･)？

45. ～おまけ～
jQueryの主要機能

46. 1. セレクタ

47. $(‚p‛) // pタグ
$(‚#id‛) // 特定のidを持つ要素
$(‚.class‛) // 特定のclassをもつ要素
$(‚td:even‛) / $(‚td:odd‛) // tdタグの奇数/偶数
$("a[page]") // <a page=‚x">x</a>

48. 2. 操作

49. // #lvのフォームが持つ値をget
$(‚#lv‛).val()
// #lvのフォームに値をset
$(‚#lv‛).val(3)
// selectを指定した場合、
// 自動でoption側を見てくれる

50. よくやる間違い：
値を取得するつもりで
$(…).val と書く

51. // 対象の要素にclass=‘lv3’を付加
$(‚#data‛).addClass(‘lv3’)
// 要素に属性を付加
$(‚a[page]:first‛).attr(‘page’, ‘1’)
// 属性値を取得
$(‚a[page]‛).attr(‘page’)

52. 3. ハンドラ

53. $(‚a[page]‛).click(function(){
// クリックされた時の処理
})
$(‚#textform‛).keydown(function(){
// キーが押された時の処理
})

54. $(function(){
// 初期化処理
// ハンドラの設定とか
// body.onloadに近いタイミング
})

55. 4. エフェクト

56. $(…).fadeIn()
$(…).fadeOut()
$(…).slideUp()
$(…).slideDown()
// その他カスタムやプラグイン

57. 5. Ajax

58. $.get(url, param, function(result){
})
$.post(url, param, function(result){
})
$.getJSON(url, param, function(data){
})
// JSONPも対応