Pro Yearly is on sale from $80 to $50! »

JS/jQueryのはなし | リジョブ社内勉強会

JS/jQueryのはなし | リジョブ社内勉強会

9541b31c963d9dc06901dab9d3049049?s=128

madapaja

May 12, 2015
Tweet

Transcript

  1. JS/jQueryͷ࿩ @Ϧδϣϒࣾ಺ษڧձ 2015-5-12

  2. JS/jQueryΛ ࢖͍͜ͳͨ͢Ίʹ େ੾ͳ͜ͱΛ ࿩͠·͢

  3. ࠓ೔͓࿩͢͠Δ͜ͱ • JavaScriptͷείʔϓͷ͜ͱ • JavaScriptͷ this ͷ͜ͱ • ·ͱΊ

  4. είʔϓͱ͸Կ͔ʁ

  5. είʔϓͱ͸ ม਺͕ఆ໊ٛͨ͠લͰ࢖͑Δ ൣғͷ͜ͱ

  6. είʔϓͱ͸ JavaScriptͰ͸େ͖͘ҎԼͷ2ͭʹ෼͚ΒΕΔ • άϩʔόϧείʔϓ Ͳ͔͜ΒͰ΋ࢀরͰ͖Δείʔϓ • ϩʔΧϧείʔϓ ಛఆͷൣғ಺ͰࢀরͰ͖Δείʔϓ ͔͜͜Β͸ɺม਺ͷείʔϓΛݟ͍͖ͯ·͢ɻ

  7. είʔϓ var greeting = 'Hello, '; function greet(name) { var

    message = greeting + name; isGreeted = true; alert(message); } greet('World'); // ← ? console.log(message); // ← ? console.log(isGreeted); // ← ?
  8. είʔϓ var greeting = 'Hello, '; function greet(name) { var

    message = greeting + name; isGreeted = true; alert(message); } greet('World'); // ← 'Hello, World' ͱΞϥʔτ console.log(message); // ← ະఆٛΤϥʔ console.log(isGreeted); // ← true
  9. άϩʔόϧม਺ͱϩʔΧϧม ਺ var greeting = 'Hello, '; // ←άϩʔόϧม਺ function

    greet(name) { var message = greeting + name; // ←ϩʔΧϧม਺ isGreeted = true; // ←άϩʔόϧม਺ alert(message); }
  10. ϩʔΧϧม਺Λ࡞Δʹ͸ 1. function ͷதͰม਺એݴ͢Δ 2. var Λ༻͍ͯม਺એݴ͢Δ ͷ྆ํ͕ඞͣඞཁ

  11. ΋͏Ұ౓ݟͯΈΑ͏ var greeting = 'Hello, '; function greet(name) { //

    ← functionͷதͰ… var message = greeting + name; // ← var Λ༻͍ͯม਺એݴʂ isGreeted = true; alert(message); }
  12. Α͘࢖͏ςΫχοΫ ଈ࣌ؔ਺Ͱғ͍είʔϓΛ࡞Δ (function(){ // ← functionͷதͰ… var hoge; // ←

    var એݴ 㱺 ϩʔΧϧม਺ʂ })();
  13. Α͘࢖͏ςΫχοΫ ΋ͪΖΜjQueryΛ࢖ͬͨҎԼͷΑ͏ͳॻ͖ํͰ΋ OK $.ready(function(){ // ← functionͷதͰ… var hoge; //

    ← var એݴ 㱺 ϩʔΧϧม਺ʂ }); $(function(){ // ← functionͷதͰ… var hoge; // ← var એݴ 㱺 ϩʔΧϧม਺ʂ });
  14. είʔϓͷޮՌ ม਺ͷিಥ͕ආ͚Δ ಉ͡ม਺໊͕͋ͬͯ΋ɺผͷείʔϓͰ͋Ε͹ ผͷม਺ͱͳΔͨΊɺؒҧͬͯ࢖༻தͷม਺Λ ॻ͖׵͑ͯ͠·ͬͨΓͱ͍ͬͨࣄނΛ๷͗΍͍͢

  15. άϩʔόϧม਺͸࢖Θͳ͍!!! • άϩʔόϧม਺͸୭Ͱ΋ಡΈॻ͖ग़དྷͪΌ͏Α • ࣗ෼͔͠࢖͍ͬͯͳ͍ͱࢥ͍ͬͯͨάϩʔόϧ ม਺͸ ผͷਓ΋࢖ͬͯΔ͔΋͠Εͳ͍

  16. άϩʔόϧม਺͸࢖Θͳ͍!!! • ͦͷάϩʔόϧม਺ͰɺผͷεΫϦϓτͷڍಈ ʹӨڹ͢Δ͔΋ • ͦͷάϩʔόϧม਺͸ɺผͷεΫϦϓτ͔Β ॻ͖׵͑ΒΕΔ͔΋ • ͦͷϖʔδʹ͸͍ΖΜͳਓ͕ॻ͍ͨJS͕ಡΈࠐ ·Ε͍ͯΔ

    ͔ͩΒ
  17. άϩʔόϧม਺͸࢖ Θͳ͍!!!

  18. μϝɻθολΠɻά ϩʔόϧม਺ʂ

  19. ʢ΋ͪΖΜάϩʔόϧม਺Λ࢖Θͳ͚Ε͹ͳΒͳ ͍έʔε΋͋ΔͷͰɺͦͷ࣌͸༻๏ɾ༰ྔΛकͬ ͯ࢖༻͠·͠ΐ͏ʣ

  20. this ͱ͸Կ͔ʁ

  21. this ͱ͸ • JavaScriptͰࣗಈతʹఆٛ͞ΕΔϚδοΫม਺ • Ͳ͜Ͱ this Λ࢖͏͔ʢ΋͘͠͸ݺͼग़͞Ε ํʣʹΑΓɺ ࢦ͢಺༰͕ҟͳΔ

  22. jQuery Ͱͷ this ͷྫ $('a').on('click', function() { var link_to =

    $(this).attr('href'); return window.confirm( link_to + '΁Ҡಈ͠·͔͢ʁ' ) }); • ͜ͷ this ͸ΫϦοΫ͞Εͨ a λάࣗ਎Λࢦ͠ ͍ͯΔ
  23. ؔ਺಺Ͱͷ this 4ύλʔϯΛ཈͑Ε͹OK • ΦϒδΣΫτϝιουݺͼग़࣌͠ͷ this • ؔ਺Λ new ͨ࣌͠ͷ

    this • .call()ɺ.apply() ΍ .bind() ͷࡍͷ this • ͦΕҎ֎ͷ this
  24. ΦϒδΣΫτϝιουݺͼग़ ࣌͠ͷ this var user = { name: 'ଠ࿠', greet:

    function() { alert('Hello, ' + this.name + '!'); } }; user.greet(); // 'Hello, ଠ࿠!' ͱΞϥʔτ͞ΕΔ
  25. ؔ਺Λ new ͨ࣌͠ͷ this function User(name) { this.name = name;

    } var user = new User('ଠ࿠'); alert(user.name); // 'ଠ࿠' ͱΞϥʔτ͞ΕΔ
  26. .call()ɺ.apply() ΍ .bind() ͷࡍ ͷ this ΍΍͍͜͠ͷͰงғؾ͚ͩ var user =

    { name: 'ଠ࿠', greet: function() { alert('Hello, ' + this.name + '!'); } }; user.greet.call({name: 'Ֆࢠ'}); // 'Hello, Ֆࢠ!' ͱΞϥʔτ͞ΕΔ user.greet.apply({name: 'Ֆࢠ'}); // 'Hello, Ֆࢠ!' ͱΞϥʔτ͞ΕΔ var userHanakoGreet = user.greet.bind({name: 'Ֆࢠ'}); userHanakoGreet(); // 'Hello, Ֆࢠ!' ͱΞϥʔτ͞ΕΔ
  27. ͦΕҎ֎ͷ this function setOnClick() { this.onclick = function() { alert('Click͞Ε·ͨ͠!');

    }; } setOnClick(); • ͜ͷ this ͸άϩʔόϧΦϒδΣΫτΛࢦͯ͠ ͍Δ • ϒϥ΢βͷάϩʔόϧΦϒδΣΫτ͸ window ΦϒδΣΫτ • this.onclick ͸ window.onclick ͱಉ͡ҙຯ
  28. ΋͏׬ᘳͰ͢Ͷʁ

  29. ͜ͷ this ͸Կʁ (function(){ this; // !ʁ });

  30. ౴͑ (function(){ this; // !window(άϩʔόϧΦϒδΣΫτ) });

  31. ͜ͷ this ͸Կʁ var obj = { hoge: function() {

    this; // !ʁ } }; obj.hoge();
  32. ౴͑ var obj = { hoge: function() { this; //

    !obj } }; obj.hoge();
  33. ͜ͷ this ͸Կʁ $("li").each(function() { this; // !ʁ });

  34. ౴͑ $("li").each(function() { this; // ! li ΦϒδΣΫτ }); jQuery಺Ͱͷ࣮૷Πϝʔδ

    each: function(callback) { for (var i = 0; i < elements.length; i++) { callback.call(elements[i]); // ← } }
  35. ظ଴ͨ͠ಈ࡞ʹͳΔʁ // ը૾͕ϩʔυ͞Εͯ $('img').hide().on('load', function() { // 1ඵޙʹϑΣʔυΠϯ setTimeout(function() {

    $(this).fadeIn(); }, 1000); });
  36. ظ଴ͨ͠ಈ࡞͸͠ ͳ͍ʂ

  37. ͳͥʁ

  38. ͜ͷ৔߹ $('img').hide().on('load', function() { setTimeout(function() { $(this).fadeIn(); }, 1000); });

    • ΦϒδΣΫτϝιουݺͼग़࣌͠ͷ this • ؔ਺Λ new ͨ࣌͠ͷ this • .call()ɺ.apply() ΍ .bind() ͷࡍͷ this • ͦΕҎ֎ͷ this
  39. ෮श͠·͢ • ΦϒδΣΫτϝιουݺͼग़࣌͠ͷ this → ͦ ͷΦϒδΣΫτࣗ਎ • ؔ਺Λ new

    ͨ࣌͠ͷ this → new͞ΕͨΦϒδ ΣΫτࣗ਎ • .call()ɺ.apply() ΍ .bind() ͷࡍͷ this → Ҿ਺Ͱࢦఆͨ͠ΦϒδΣΫτ • ͦΕҎ֎ͷ this → άϩʔόϧΦϒδΣΫτ ʢwindowʣ
  40. ͜ͷ this ͸ window $('img').hide().on('load', function() { setTimeout(function() { $(this).fadeIn();

    }, 1000); });
  41. ͜͏͢Ε͹OK $('img').hide().on('load', function() { var $img = $(this); // ←

    ม਺ʹ୅ೖͯ͠ setTimeout(function() { $img.fadeIn(); // ← ࢖͏ }, 1000); });
  42. ·ͱΊ

  43. ·ͱΊ ϩʔΧϧείʔϓ͸େਓͷ਎ͩ͠ͳΈ 1. function ͷதͰ 2. varΛ༻͍ͯม਺એݴ͠Α͏ (function(){ var i_am_free

    = 'ࣗݾදݱʂ'; })();
  44. ·ͱΊ this ͳΜͯා͘ͳ͍ • ΦϒδΣΫτϝιουݺͼग़࣌͠ͷ this → ͦ ͷΦϒδΣΫτࣗ਎ •

    ؔ਺Λ new ͨ࣌͠ͷ this → new ͞ΕͨΦϒδ ΣΫτࣗ਎ • .call()ɺ.apply() ΍ .bind() ͷࡍͷ this → Ҿ਺Ͱࢦఆͨ͠ΦϒδΣΫτ • ͦΕҎ֎ͷ this → άϩʔόϧΦϒδΣΫτ
  45. ·ͱΊ this ͳΜͯා͘ͳ͍ $('img').hide().on('load', function() { var $img = $(this);

    // ←ม਺ʹ୅ೖͯ͠͏·͘෇͖߹͓͏ setTimeout(function() { $img.fadeIn(); }, 1000); });
  46. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ʂ