Hello jQuery
SACSS SPECIAL4 FRONTREND IN SAPPORO
@pocotan001
Hayato Mizuno
📣 #01 Introduction
✎ #02 The Basics
📕 #03 Patterns
📣

#01 Introduction
#01 Introduction

photo by shoze
#01 Introduction

photo by victoria white2010
57%
#01 Introduction
jQuery

None

57%

57.3%

54.9%

50.8%

49.1%

46.7%

46%

42.7%

42.8%

2012/01

#01 Introduction

39.2%

2012/05

2012/0...
#01 Introduction
想像力は知識より重要である。
Albert Einstein
$('div').css('color', 'red');

#01 Introduction
$('div').css('color', 'red');
!
!
!
!

var divs = document.getElementsByTagName('div');
 
for (var i = 0; i < divs.length;...
何かを学ぶのに、自分自身で経
験する以上に良い方法はない。
Albert Einstein
調べられるものを、いちいち覚
えておく必要などない。
Albert Einstein
調べられるものを、いちいち覚
えておく必要などない。
Albert Einstein

ggrks!
jQueryの読み込み

#01 Introduction
<!doctype html>
<html>
<body>
<p>jQuery</p>
<script src="jquery.js"></script>
<script>
// Your code goes here.
</script>
<...
<!doctype html>
<html>
<body>
<p>jQuery</p>
<script src="//ajax.googleapis.com/ajax/libs/
jquery/1.10.2/jquery.min.js"></s...
CDNの良いところ

_ 無ホスティング
_ ドメインシャーディング
_ クロスサイトキャッシング
_ etc.

#01 Introduction
Google CDNで人気のバージョン
1.4.2 (http)

1.7%

1.7.2 (http)

1.6%
1.7.1 (http)

1.6%
1.3.2 (http)

1.2%
その他

4.7%
2013年3月

#01 In...
Google CDNで人気のバージョン
1.4.2 (http)

1.7%

1.7.2 (http)

1.6%
1.7.1 (http)

1.6%

89.2%

1.3.2 (http)

1.2%
その他

4.7%
2013年3月...
jQuerify

#01 Introduction
https://chrome.google.com/webstore/detail/jquerify/gbmifchmngifmadobkcpijhhldeeelkc
https://github.com/bgrins/devtools-snippets/blob/master/snippets/jquerify/jquerify.js
✎

#02 The Basics
$('div').css('color', 'red');

#02 The Basics
$ or $()

$('div').css('color', 'red');

#02 The Basics
セレクタ

$('div').css('color', 'red');

#02 The Basics
セレクタ

$('.a').css('color', 'red');

#02 The Basics
セレクタ

$('ul > li').css('color', 'red');

#02 The Basics
セレクタ

$('td:even').css('color', 'red');

#02 The Basics
セレクタ

$(':first').css('color', 'red');

#02 The Basics
セレクタ

$(':first-child').css('color', 'red');

#02 The Basics
セレクタ

$(':animated').css('color', 'red');

#02 The Basics
メソッド

$(':animated').css('color', 'red');

#02 The Basics
引数

$(':animated').css('color', 'red');

#02 The Basics
メソッド

$(':animated').addClass('a');

#02 The Basics
メソッド

$(':animated').html('じぇじぇじぇ');

#02 The Basics
メソッド

$(':animated').fadeOut();

#02 The Basics
セミコロン
で〆
$(':animated').fadeOut();

#02 The Basics
$ = jQuery

jQuery(':animated').fadeOut();

#02 The Basics
APIのカテゴリー

_ Ajax
_ Attributes
_ CSS
_ Callbacks
_ Core
_ Data
_ Deferred
_ Dimensions
#02 The Basics

_ Effects
_ Events
_...
jQuery API Documentation
jQuery 日本語リファレンス | js STUDIO
メソッドチェイン

#02 The Basics
メソッド
$('div').css('color', 'red')

#02 The Basics
$('div').css('color', 'red')
.addClass('a').html('じぇじぇじぇ');

#02 The Basics
$('div').css('color', 'red')
.addClass('a').html('じぇじぇじぇ');

#02 The Basics
メソッド

メソッド

メソッド

$('div').css('color', 'red')
.addClass('a').html('じぇじぇじぇ');

#02 The Basics
ゲッターとセッター

#02 The Basics
セッター
(設定)

$('div').css('color', 'red');

#02 The Basics
ゲッター
(取得)

$('div').css('color');

#02 The Basics
ゲッター(取得)
.attr('href')

#02 The Basics

セッター(設定)
.attr('href', '/')
ゲッター(取得)

セッター(設定)

.attr('href')

.attr('href', '/')

.width()

.width('80px')

#02 The Basics
ゲッター(取得)

セッター(設定)

.attr('href')

.attr('href', '/')

.width()

.width('80px')

.html()

.html('<p>ほげ<p>')

#02 The Basic...
ゲッター(取得)

セッター(設定)

.attr('href')

.attr('href', '/')

.width()

.width('80px')

.html()

.html('<p>ほげ<p>')

.text()

.tex...
ゲッター(取得)

セッター(設定)

.attr('href')

.attr('href', '/')

.width()

.width('80px')

.html()

.html('<p>ほげ<p>')

.text()

.tex...
戻り値

#02 The Basics
#a の width に #b の width を適用

$('#a').width($('#b').width());

#02 The Basics
$('div')

$('div').css('color', 'red');

#02 The Basics
"red"

$('div').css('color');

#02 The Basics
$('div')

#02 The Basics
$('div')
.css('color', 'red')

#02 The Basics

$('div')
$('div')
.css('color', 'red')
.find('p')

#02 The Basics

$('div')
$('div')
$('div')
.css('color', 'red')
.find('p')
.addClass('hoge')

#02 The Basics

$('div')
$('div')
$('div p')
$('div')
.css('color', 'red')
.find('p')
.addClass('hoge')
.width()

#02 The Basics

$('div')
$('div')
$('div p')
$('div p...
$('div')
.css('color', 'red')
.find('p')
.addClass('hoge')
.width()
.fadeOut()

#02 The Basics

$('div')
$('div')
$('div p...
$('div')
.css('color', 'red')
.find('p')
.addClass('hoge')
.width()
.fadeOut()

#02 The Basics

$('div')
$('div')
$('div p...
// 空の関数
$.noop();
// jqXHRオブジェクト
$.ajax('example.html');
// コールバックリスト
$.Callbacks();

#02 The Basics
📕

#03 Patterns
リーダブルコード

#03 Patterns
$('ul').find('.a').css('color',
'red').end().find('.b').css('color',
'green').text('Hello');

#03 Patterns
$('ul')
.find('.a')
.css('color', 'red')
.end()
.find('.b')
.css('color', 'green')
.text('Hello');

#03 Patterns
var $ul = $('ul'),
$a = $ul.find('.a'),
$b = $ul.find('.b');
!

$a.css('color', 'red');
$b.css('color', 'green').text('Hel...
DRY

#03 Patterns
$('#a').on('click', function() {
$('#modal').show();
});

#03 Patterns
$('#a').on('click', function() {
$('#modal').show();
});
$('#b').on('click', function() {
$('#modal').show();
});
$('#c')....
$('#a,#b,#c').on('click', function() {
$('#modal').show();
});

#03 Patterns
$('.button').on('click', function() {
$('#modal').show();
});

#03 Patterns
カプセル化・疎結合

#03 Patterns
$(function() {
$('.button').on('click', function() {
$('#modal').show();
});
});

#03 Patterns
var modal = {
init: function() {
$('.button').on('click', modal.show);
},
show: function() {
$('#modal').show();
}
};
$(mo...
jQuery Anti-Patterns for Performance & Compression
JavaScript Style Guides And Beautifiers
jQuery Core Style Guide
JavaScript Patterns
Design Patterns In jQuery
jQuery Boilerplate
何かを学ぶのに、自分自身で経
験する以上に良い方法はない。
Albert Einstein
プログラミングは
書かなきゃ覚えない
エビングハウスの忘却曲線
100%

58%
44%
26%

20分後

1時間後

1日後

23%
1週間後

21%
1ヶ月後

忘却曲線 - Wikipedia
エビングハウスの忘却曲線
100%

58%
44%
26%

20分後

1時間後

1日後

23%
1週間後

21%
1ヶ月後

忘却曲線 - Wikipedia
私には特別の才能はない。
ただ私は、情熱的に好奇心
が旺盛なだけだ。
Albert Einstein
Thank you
SACSS SPECIAL4 FRONTREND IN SAPPORO
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Upcoming SlideShare
Loading in …5
×

Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -

5,034 views

Published on

SaCSS Special4 Frontrend in Sapporo -(2013年12月7日開催)で使用したスライドです。

jQueryはCSSのセレクタが主体となるため、非プログラマーにとっても取っ付き易く、これからJavaScriptの習得を考えている方にとって良い足がかりとなるでしょう。
本セッションでは、jQueryの概要を踏まえ今後どのようにスキルを伸ばせば良いのか。
また、JavaScriptを書くにあたってどのような点について気を使うべきか、と言ったところにフォーカスを当ててお話しさせていただきます。

Published in: Technology, Education
  • Be the first to comment

Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -

  1. 1. Hello jQuery SACSS SPECIAL4 FRONTREND IN SAPPORO
  2. 2. @pocotan001 Hayato Mizuno
  3. 3. 📣 #01 Introduction ✎ #02 The Basics 📕 #03 Patterns
  4. 4. 📣 #01 Introduction
  5. 5. #01 Introduction photo by shoze
  6. 6. #01 Introduction photo by victoria white2010
  7. 7. 57% #01 Introduction
  8. 8. jQuery None 57% 57.3% 54.9% 50.8% 49.1% 46.7% 46% 42.7% 42.8% 2012/01 #01 Introduction 39.2% 2012/05 2012/09 2013/01 37.4% 2013/05 Historical trends in the usage of JavaScript libraries
  9. 9. #01 Introduction
  10. 10. 想像力は知識より重要である。 Albert Einstein
  11. 11. $('div').css('color', 'red'); #01 Introduction
  12. 12. $('div').css('color', 'red'); ! ! ! ! var divs = document.getElementsByTagName('div');   for (var i = 0; i < divs.length; i++) { divs[i].style.color = 'red'; } #01 Introduction
  13. 13. 何かを学ぶのに、自分自身で経 験する以上に良い方法はない。 Albert Einstein
  14. 14. 調べられるものを、いちいち覚 えておく必要などない。 Albert Einstein
  15. 15. 調べられるものを、いちいち覚 えておく必要などない。 Albert Einstein ggrks!
  16. 16. jQueryの読み込み #01 Introduction
  17. 17. <!doctype html> <html> <body> <p>jQuery</p> <script src="jquery.js"></script> <script> // Your code goes here. </script> </body> </html> #01 Introduction
  18. 18. <!doctype html> <html> <body> <p>jQuery</p> <script src="//ajax.googleapis.com/ajax/libs/ jquery/1.10.2/jquery.min.js"></script> <script> // Your code goes here. </script> </body> </html> #01 Introduction https://developers.google.com/speed/libraries/devguide?hl=ja&csw=1#jquery
  19. 19. CDNの良いところ _ 無ホスティング _ ドメインシャーディング _ クロスサイトキャッシング _ etc. #01 Introduction
  20. 20. Google CDNで人気のバージョン 1.4.2 (http) 1.7% 1.7.2 (http) 1.6% 1.7.1 (http) 1.6% 1.3.2 (http) 1.2% その他 4.7% 2013年3月 #01 Introduction http://www.stevesouders.com/blog/2013/03/18/http-archive-jquery/
  21. 21. Google CDNで人気のバージョン 1.4.2 (http) 1.7% 1.7.2 (http) 1.6% 1.7.1 (http) 1.6% 89.2% 1.3.2 (http) 1.2% その他 4.7% 2013年3月 #01 Introduction http://www.stevesouders.com/blog/2013/03/18/http-archive-jquery/
  22. 22. jQuerify #01 Introduction
  23. 23. https://chrome.google.com/webstore/detail/jquerify/gbmifchmngifmadobkcpijhhldeeelkc
  24. 24. https://github.com/bgrins/devtools-snippets/blob/master/snippets/jquerify/jquerify.js
  25. 25. ✎ #02 The Basics
  26. 26. $('div').css('color', 'red'); #02 The Basics
  27. 27. $ or $() $('div').css('color', 'red'); #02 The Basics
  28. 28. セレクタ $('div').css('color', 'red'); #02 The Basics
  29. 29. セレクタ $('.a').css('color', 'red'); #02 The Basics
  30. 30. セレクタ $('ul > li').css('color', 'red'); #02 The Basics
  31. 31. セレクタ $('td:even').css('color', 'red'); #02 The Basics
  32. 32. セレクタ $(':first').css('color', 'red'); #02 The Basics
  33. 33. セレクタ $(':first-child').css('color', 'red'); #02 The Basics
  34. 34. セレクタ $(':animated').css('color', 'red'); #02 The Basics
  35. 35. メソッド $(':animated').css('color', 'red'); #02 The Basics
  36. 36. 引数 $(':animated').css('color', 'red'); #02 The Basics
  37. 37. メソッド $(':animated').addClass('a'); #02 The Basics
  38. 38. メソッド $(':animated').html('じぇじぇじぇ'); #02 The Basics
  39. 39. メソッド $(':animated').fadeOut(); #02 The Basics
  40. 40. セミコロン で〆 $(':animated').fadeOut(); #02 The Basics
  41. 41. $ = jQuery jQuery(':animated').fadeOut(); #02 The Basics
  42. 42. APIのカテゴリー _ Ajax _ Attributes _ CSS _ Callbacks _ Core _ Data _ Deferred _ Dimensions #02 The Basics _ Effects _ Events _ Forms _ Manipulation _ Selector _ Traversing _ Utilities
  43. 43. jQuery API Documentation
  44. 44. jQuery 日本語リファレンス | js STUDIO
  45. 45. メソッドチェイン #02 The Basics
  46. 46. メソッド $('div').css('color', 'red') #02 The Basics
  47. 47. $('div').css('color', 'red') .addClass('a').html('じぇじぇじぇ'); #02 The Basics
  48. 48. $('div').css('color', 'red') .addClass('a').html('じぇじぇじぇ'); #02 The Basics
  49. 49. メソッド メソッド メソッド $('div').css('color', 'red') .addClass('a').html('じぇじぇじぇ'); #02 The Basics
  50. 50. ゲッターとセッター #02 The Basics
  51. 51. セッター (設定) $('div').css('color', 'red'); #02 The Basics
  52. 52. ゲッター (取得) $('div').css('color'); #02 The Basics
  53. 53. ゲッター(取得) .attr('href') #02 The Basics セッター(設定) .attr('href', '/')
  54. 54. ゲッター(取得) セッター(設定) .attr('href') .attr('href', '/') .width() .width('80px') #02 The Basics
  55. 55. ゲッター(取得) セッター(設定) .attr('href') .attr('href', '/') .width() .width('80px') .html() .html('<p>ほげ<p>') #02 The Basics
  56. 56. ゲッター(取得) セッター(設定) .attr('href') .attr('href', '/') .width() .width('80px') .html() .html('<p>ほげ<p>') .text() .text('ほげ') #02 The Basics
  57. 57. ゲッター(取得) セッター(設定) .attr('href') .attr('href', '/') .width() .width('80px') .html() .html('<p>ほげ<p>') .text() .text('ほげ') .val() .val('') #02 The Basics
  58. 58. 戻り値 #02 The Basics
  59. 59. #a の width に #b の width を適用 $('#a').width($('#b').width()); #02 The Basics
  60. 60. $('div') $('div').css('color', 'red'); #02 The Basics
  61. 61. "red" $('div').css('color'); #02 The Basics
  62. 62. $('div') #02 The Basics
  63. 63. $('div') .css('color', 'red') #02 The Basics $('div')
  64. 64. $('div') .css('color', 'red') .find('p') #02 The Basics $('div') $('div')
  65. 65. $('div') .css('color', 'red') .find('p') .addClass('hoge') #02 The Basics $('div') $('div') $('div p')
  66. 66. $('div') .css('color', 'red') .find('p') .addClass('hoge') .width() #02 The Basics $('div') $('div') $('div p') $('div p')
  67. 67. $('div') .css('color', 'red') .find('p') .addClass('hoge') .width() .fadeOut() #02 The Basics $('div') $('div') $('div p') $('div p') 122
  68. 68. $('div') .css('color', 'red') .find('p') .addClass('hoge') .width() .fadeOut() #02 The Basics $('div') $('div') $('div p') $('div p') 122 エラー
  69. 69. // 空の関数 $.noop(); // jqXHRオブジェクト $.ajax('example.html'); // コールバックリスト $.Callbacks(); #02 The Basics
  70. 70. 📕 #03 Patterns
  71. 71. リーダブルコード #03 Patterns
  72. 72. $('ul').find('.a').css('color', 'red').end().find('.b').css('color', 'green').text('Hello'); #03 Patterns
  73. 73. $('ul') .find('.a') .css('color', 'red') .end() .find('.b') .css('color', 'green') .text('Hello'); #03 Patterns
  74. 74. var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); ! $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); #03 Patterns
  75. 75. DRY #03 Patterns
  76. 76. $('#a').on('click', function() { $('#modal').show(); }); #03 Patterns
  77. 77. $('#a').on('click', function() { $('#modal').show(); }); $('#b').on('click', function() { $('#modal').show(); }); $('#c').on('click', function() { $('#modal').show(); }); #03 Patterns
  78. 78. $('#a,#b,#c').on('click', function() { $('#modal').show(); }); #03 Patterns
  79. 79. $('.button').on('click', function() { $('#modal').show(); }); #03 Patterns
  80. 80. カプセル化・疎結合 #03 Patterns
  81. 81. $(function() { $('.button').on('click', function() { $('#modal').show(); }); }); #03 Patterns
  82. 82. var modal = { init: function() { $('.button').on('click', modal.show); }, show: function() { $('#modal').show(); } }; $(modal.init); #03 Patterns
  83. 83. jQuery Anti-Patterns for Performance & Compression
  84. 84. JavaScript Style Guides And Beautifiers
  85. 85. jQuery Core Style Guide
  86. 86. JavaScript Patterns
  87. 87. Design Patterns In jQuery
  88. 88. jQuery Boilerplate
  89. 89. 何かを学ぶのに、自分自身で経 験する以上に良い方法はない。 Albert Einstein
  90. 90. プログラミングは 書かなきゃ覚えない
  91. 91. エビングハウスの忘却曲線 100% 58% 44% 26% 20分後 1時間後 1日後 23% 1週間後 21% 1ヶ月後 忘却曲線 - Wikipedia
  92. 92. エビングハウスの忘却曲線 100% 58% 44% 26% 20分後 1時間後 1日後 23% 1週間後 21% 1ヶ月後 忘却曲線 - Wikipedia
  93. 93. 私には特別の才能はない。 ただ私は、情熱的に好奇心 が旺盛なだけだ。 Albert Einstein
  94. 94. Thank you SACSS SPECIAL4 FRONTREND IN SAPPORO

×