Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSのお勉強の話。

 JSのお勉強の話。

SaCSS Special13 の発表資料です。

Avatar for Toro_Unit (Hiroshi Urabe)

Toro_Unit (Hiroshi Urabe)

August 05, 2017
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Programming

Transcript

  1. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) ϑϦʔϥϯεr Frontend Engineer / Web

    Designer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 3
  2. Plugins • Custom Post Type Permalinks • 413,500 Downloads •

    Active Install 80,000+ • Other... Theme • Vanilla 5
  3. 8

  4. ΍͖ͬͯͨ͜ͱ (2010 ~) • HTML&CSS ։ൃ / ͨ·ʹWebσβΠϯ • JavaScript͸jQueryͰΰϦΰϦܥ͕ΘΓͱଟΊɻ

    • CMS ςʔϚ੍࡞ • ( 9ׂํ WordPress or MovableType / ͨ·ʹDrupalͱ͔...etc ) • CMS ΧελϚΠζɾϓϥάΠϯ੍࡞ • ( ΧελϜϑΟʔϧυΊͬͪΌ࡞ͬͨΓɺPHPΊͬͪΌॻ͍ͨΓ ) • ؀ڥ͸΄ͱΜͲϨϯλϧαʔόʔ (LAMP) 9
  5. ES6 / ES2015 • ECMAScript 6 Edition. 6൛. • ͜Εͷࡦఆதʹຖ೥ϦϦʔε͢ΔΑ͏ʹͳͬͨͷͰɺਖ਼ࣜʹ

    ͸ɺECMAScript 2015ɻͨͩ͠Ҏલ͔ΒES6ͱݺΜͰ͍ͨͷ ͰɺES6ͱݺͼଓ͚͍ͯΔɻ • ES6͸ES5(2009೥)ͱ͸ผ෺ʹͳΔϨϕϧͰͷେ͖ͳมߋ͕͋ ͬͨɻ 29
  6. JavaScript / ECMAScript ͷྺ࢙ 1 • 1995೥: JavaScript஀ੜɻNetscapeʹ౥ࡌɻ • 1996೥:

    JScript஀ੜɻIE3ʹ౥ࡌɻҰؾʹීٴɻ • 1997೥: ECMAScriptॳ൛ɻ • 1998೥: ES2. ୈ2൛ɻ • 1999೥: ES3͕ࡦఆɻ 31
  7. JavaScript / ECMAScript ͷྺ࢙ 2 • 2000೥~2003೥ࠒ: ES4ͷ࢓༷ࡦఆ͕࢝·Δɻ͕ɺࣦഊɻ • 2007೥~2008೥ࠒ:

    ࠶ͼES4ͷ࢓༷ࡦఆ͕࢝·Δɻ͕ɺࣦഊɻͦͯ͠ES4 ͸͓ଂೖΓʹ... • 2008೥: ࣍ੈ୅ͷJSΛߟ͑ΔϓϩδΣΫτ ECMAScript Harmony ൃ଍ɻ • 2009೥: Internet Explorer 8 (ES3४ڌ…) • 2009೥: Node.JSͷొ৔ɻ • 2009೥: ES5ࡦఆ ʢͪ͜Β͸ES3.1Λͪΐͬͱվྑͨ͠Ϟϊʣ 32
  8. Ҏલ͸ɻɻɻ function multiply(a, b) { var b = typeof b

    !== 'undefined' ? b : 1; return a*b; } multiply(5); // 5 44
  9. Class ߏจ class Human { constructor(name) { this.name = name;

    } say(){ console.log('ࢲͷ໊લ͸' + this.name + 'Ͱ͢ʂ'); } } const ham = new Human('ʢ´°Ϝ°`ʣ'); const torounit = new Human('ͱΖΏʹ'); ham.say(); //'ࢲͷ໊લ͸ʢ´°Ϝ°`ʣͰ͢ʂ' torounit.say(); //'ࢲͷ໊લ͸ͱΖΏʹͰ͢ʂ' 45
  10. Ҏલ͸ɻɻɻ function Human(name) { this.name = name } Human.prototype.say =

    function () { console.log('ࢲͷ໊લ͸' + this.name + 'Ͱ͢ʂ'); } const ham = new Human('ʢ´°Ϝ°`ʣ'); const torounit = new Human('ͱΖΏʹ'); ham.say(); //'ࢲͷ໊લ͸ʢ´°Ϝ°`ʣͰ͢ʂ' torounit.say(); //'ࢲͷ໊લ͸ͱΖΏʹͰ͢ʂ' 46
  11. JSʢͱ͍͏͔ϑϩϯτΤϯυશൠʣͷ࠷େͷਏΈɻ • ಉҰͷίʔυͰෳ਺ͷϒϥ΢βɾόʔδϣϯʹରԠɻ • IE / Edge / Safari /

    Chrome / Firefox / iOS / Android / …. • ECMAScript͸͋͘·Ͱ΋࢓༷ɻϒϥ΢βʹͦͷػೳ͕ೖ͍ͬͯΔ ͔Ͳ͏͔͸ผ໰୊ɻ • શͯͷػೳΛ100%࣮૷ͨ͠ϒϥ΢β͸ɺSafariͷΈɻࠓ೥தʹ ͸ଞͷϒϥ΢β΋? • ES6 Modules ʹ͸·ͩ·ͩน͕ɾɾɾ 58
  12. ͜͜·Ͱͷ·ͱΊ • ES/ECMAScript ͕࢓༷ɻ JavaScript ͕࣮૷ɻ • ͍ͭ࠷ۙ·Ͱ 1999೥ͷ࢓༷͔ΒಀΕΒΕͳ͔ͬͨͷ͕JSɻ •

    ͦͷ൓ಈͰɺES2015 Ͱ΄΅ผ෺ͷݴޠʹͳͬͯΔɻ • ͍ΖΜͳ؀ڥͰಉ͡ίʔυΛಈ͔ͨ͢Ίʹɺόά͕গͳ͘ಡ Έ΍͘͢؅ཧ͠΍͍͢JSͷͨΊʹɺwebpackͱ͔Ͱ·ͱΊͨ ΓɺBabel Ͱม׵ͨ͠Γͯ͠Δɻ 63
  13. 66

  14. Good Morning Sunshine • gms.life • new barlance ͷWEBϚΨδϯ •

    CMSʢWordPressʣ͕ग़ྗͨ͠JSONΛAjaxͰऔ͖ͬͯͯɺ ReactͰϨϯμϦϯάɻ 67
  15. • ͪΐΖͬͱॻ͘ͿΜʹ͸ศརɻ • ࠷ۙ͸ɺʮͱΓ͋͑ͣjQueryʯ͸ආ͚ΒΕΔ܏޲ɻ • jQuery͕ఏڙ͖ͯͨ͠ػೳ͸࠷ۙͷϒϥ΢βʹ͸͍͍ͩͨඪ४ ૷උɻ • ϒϥ΢βͷػೳ͕ඪ४Խ͞ΕΔલ͸ྑ͍ײ͡ʹͯ͘͠Εͨɻ •

    ࣮͸݁ߏτϦοΩʔͳ͜ͱΛ΍ͬͯΔͷͰ૊Έ߹Θͤ଍Γ͢Δ ͷʹ೉͕͋Δ͜ͱ΋ɻ • औ͖ͬͭ΍͢͞͸ૉ੖Β͍͚͠ͲɺͲͪΒʹ͠ΖJSͷ஌ࣝ͸ཁΔɻ 70
  16. use jQuery var button = jQuery('.button'); button.on('click', function(){ jQuery(this).addClass('active'); });

    Vanilla.js var button = document.querySelector('.button'); button.addEventListener('click', (e) => { e.currentTarget.classList.add('active'); }); 72
  17. use jQuery jQuery.ajax('/api.json') .then( data => console.log( data ) )

    Vanilla.js fetch('/api.json') .then( response => response.json() ) .then( data => console.log( data ) ) 73