2018年の”JavaScript” 再入門/re-learning-about-js-in-2018

B81a8fa35a79d31881ca3d348f3e894a?s=47 pastak
March 20, 2018
11k

2018年の”JavaScript” 再入門/re-learning-about-js-in-2018

KMC春合宿2018での発表資料です

B81a8fa35a79d31881ca3d348f3e894a?s=128

pastak

March 20, 2018
Tweet

Transcript

  1. 2018೥ͷ”JavaScript” ࠶ೖ໳ Pasta-K at KMC SpringCamp 2018 pasta0915@gmail.com / pastak@kmc.gr.jp

  2. @pastak

  3. • ژ౎େֶ޻ֶ෦৘ใֶՊ ܭࢉػՊֶίʔε5ճੜ • KMC ݩ޿ใ • Nota Inc Gyazo։ൃνʔϜ

    ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript
  4. ໨࣍ • JavaScriptͷྺ࢙ • JavaScriptͱECMAScript • ECMAScriptͷḷ͖ͬͯͨಓͷΓ • babel /

    browserify / Webpack ...͸ԿͷͨΊʁ • ·ͱΊ
  5. ͜ͷτʔΫͷλʔήοτ • JavaScriptʹ͍ͭͯաڈʹ৮Εͨ͜ͱ͕͋Δ΋ͷͷɺ͜͜਺೥ JavaScriptͷΤίγεςϜʹ৮Ε͍ͯͳ͍ਓ • ࠷ۙͷJavaScript͸ֶशίετ͕ߴ͍ͱײ͍ͯ͡Δਓ • JavaScriptʹ͍ͭͯೖ໳͍ͨ͠ͱߟ͍͑ͯΔਓ • ࠓޙJavaScriptΛ΍͍ͬͯ͘"Մೳੑ͕͋Δਓ

  6. ͜ͷτʔΫͷΰʔϧ • ʮ࠷ۙͷJavaScriptΛॻͨ͘Ίʹඞཁͳπʔϧ͕ଟֶͯ͘शίε τ͕ߴͯ͘ΫιʯΈ͍ͨͳ͜ͱΛಥવݴ͍ग़ͯ͠͠·Θͳ͍Α͏ ʹ͢Δ • ͱ͜ΖͰԿނ͜Μͳʹ৭ʑπʔϧ΍Β࢓༷΍Β͕࿩୊ʹͳ͍ͬͯ Δͷ͔Λ੔ཧͯ͠ཧղ͢Δ • ͱ͜ΖͰͱ͜ΖͰɺ

    ʮ“JavaScript”ͬͯԿ??ʯΛ೺Ѳ͢Δ
  7. ࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘?

  8. ͜ͷτʔΫͰ͸࿩͞ͳ͍͜ͱ • JavaScriptͷจ๏΍ه๏ɺ࠷ۙ௥Ճ͞ΕͨECMAScriptͷ಺༰ʹ͍ͭͯ • JavaScriptΛ༻͍ͨΞϓϦέʔγϣϯߏஙςΫχοΫ • JSͷςΫχοΫ஌Γ͍ͨਓ͸ڈ೥ͷय़߹॓ͷࢿྉΛಡΜͰ͘Ε • WebΞϓϦέʔγϣϯͰ 60fpsΛ(ۃྗ)໨ࢦ͢

    // Speaker Deck • https://speakerdeck.com/pastak/webahurikesiyonte-60fpswo-ji-li-mu-zhi-su
  9. JavaScriptͷྺ࢙Λ ৼΓฦͬͯΈΔ

  10. օ͞Μ͕Πϝʔδ͢ΔJavaScript͸ͲΕͰ͢? • WebϖʔδΛ೐΍͔ʹ͢Δ΍ͭ • Google Maps / Web 2.0 /

    Ajax • Twitter / Facebook / SPA / PWA • NodeJS
  11. ॳظͷϢʔεέʔε • WebαΠτΛ՚ඒʹ͢Δ • ͋Μ·Γศརͳ࢖ΘΕํ͕ͳ͔ͬͨ • ΫϦοΫͨ͠ΒalertΛग़͢ • จࣈ͕νΧνΧ͢Δ •

    mouseoverͰcursorΛม͑Δ
  12. JavaScript҉ࠇ࣌୅ • 2000೥୅લ൒͸JSͷ੬ऑੑΛͭ͘΢ΣϒαΠτ΋ଟ͘JavaScript ΛແޮԽ͍ͯ͠Δਓͨͪ΋ଟ͍ͨ͘ • ϒϥΫϥ • Flashશ੝ظ

  13. 2005೥ Google Mapsര஀ • Google Maps͸ແݶʹεΫϩʔϧͰ͖Δ஍ਤαΠτͩͬͨ • ྫ͑͹Yahoo!ͷ஍ਤ͸্ԼࠨӈʹҠಈ͢ΔϦϯΫΛԡͯ͠Ҡಈ͍ͯͨ͠ • Google

    Maps͸͜ͷͱ͖XMLHttpRequestͳͲΛ࢖ͬͯμΠφϛοΫʹಡ ΈࠐΈ࢓૊ΈΛఏڙ͍ͯͨ͠ • AjaxΞϓϦέʔγϣϯ͕ਓؾΛത͢Δ͖͔͚ͬʹͳͬͨ
  14. ਓʑ͸ ؾ෇͍ͨ

  15. JavaScript ศར͡ΌΜ

  16. JavaScriptʹର͢ΔೝࣝͷมԽ • WebαΠτΛ૽͕͘͢͠Δ͚ͩͷअຐͳଘࡏͩͱࢥΘΕ͍ͯͨ • ࣮ࡍɺJavaScriptΛUXʹܨ͛ΔΑ͏ͳΞϓϦέʔγϣϯ͕ͳ͔ͬͨ • DynamicHTMLͷඇޓ׵໰୊΍ඇಉظ௨৴ΛNN͕ͳ͔ͳ͔࣮૷͠ͳ͔ͬ ͨ͜ͱ΋͋Δ͕ɾɾɾ • ࣮ྫͱͯ͠ͷGoogle

    Maps͸Ϣʔβʔ͚ͩͰͳ͘։ൃऀʹ΋େ͖ͳӨڹΛ༩ ͑ͨ
  17. JSͰϚογϡΞοϓ͢Δͷ͕ྲྀߦͬͨ • Google Maps Ajax APIΛ࢝Ίͱ͢ΔXMLΛఏڙ͢ΔAPI΍jsonpΛఏڙ͢ ΔAPI͕৭ʑͱొ৔ • ͜ΕΒΛ૊Έ߹ΘͤͯΞϓϦέʔγϣϯΛ࡞ΔʰϚογϡΞοϓʱ͕ྲྀߦ •

    ͜ͷྲྀΕΛ௥ਵ͢ΔϦονͳWebΞϓϦέʔγϣϯ͕ొ৔࢝͠ΊΔ • ʰWeb 2.0ʱ
  18. ϒϥ΢βߴ଎Խ • 2008೥ Google Chromeͷొ৔ • Googleۘ੡JSΤϯδϯ V8͕଎͔ͬͨ • ଞͷJSΤϯδϯ΋௥ਵͯ͠ߴ଎Խͷಓ΁

    • ͜Μͳʹ଎͘Ͱ͖ΔͳΒ΋ͬͱΞϓϦέʔγϣϯͷػೳΛدͤΕΔ ͧ
  19. NodeJSొ৔ • 2009೥ V8Λར༻ͨ͠αʔόʔαΠυ্ͷJavaScript࣮ߦ؀ڥͱͯ͠ొ৔ • ΠϕϯτۦಈܕʹΑΔϊϯϒϩοΩϯάIOͳͲʹ஫໨͕ू·ͬͨ • ʰΫϥΠΞϯτ1ສ୆໰୊ʱ͕ى͖ͳ͍ • ͔͜͜ΒҰؾʹJS͸ϒϥ΢β্Ҏ֎Ͱ΋ಈ͘ϓϩάϥϛϯάݴޠʹ

    • ͦΕҎલ΋ಈ͔͢؀ڥ͸͕͋ͬͨ͋·ΓϝδϟʔʹͳΒͳ͔ͬͨ • ࠓ͸αʔόʔαΠυ͸΋ͪΖΜɺCLI༻ͷεΫϦϓτ΍πʔϧΛॻͨ͘Ίʹଟ͘ར༻͞Ε͍ͯΔ
  20. ݱࡏͷJavaScriptΞϓϦέʔγϣϯ • Angular΍ReactɺVueͳͲΛ࢖ͬͨSPAΞϓϦέʔγϣϯ • pushStateʹΑΔཤྺॻ͖ࠐΈ + XHR/fetchʹΑΔσʔλऔಘ • Progressive Web

    Application • ϞόΠϧϒϥ΢βͰ΋σεΫτοϓϒϥ΢βͰ΋͍͍ײ͡ʹಈ͘ • ΦϑϥΠϯΩϟογϡɾϩʔΧϧετϨʔδ
  21. JavaScriptͱECMAScript

  22. ECMAScriptͱ͸Կ͔

  23. ·ͣ͸”ECMAScript”Λͬ͘͟Γͱ • JavaScriptͷඪ४࢓༷ͷ໊শ • Ecma Internationalͷtc39Ͱٞ࿦͞Ε͍ͯΔ • ݱࡏ͸Living StandardͷܗͰͲΜͲΜ࢓༷͕௥Ճ͞Ε͍ͯΔ

  24. JavaScriptॳظ • 1995೥ NetScapeʹ৐ͤΔͨΊʹ։ൃ͞ΕΔ • Java͕ྲྀߦ͍ͬͯͨͷͰɺ໊લΛआΓ͖ͯͯJavaScriptʹ • 1996೥ IE3.0ʹ৐ͤΑ͏ͱ͢Δ΋ަবࣦഊ •

    Microsoft͕ಠࣗͷJScriptͱͯ͠։ൃ
  25. JavaScriptඪ४Խ • 1997೥ JavaScriptͱJScriptͷ྆ํ͕͋Δঢ়گΛͳΜͱ͔͠Α͏ͱ͍͏ Ϟνϕʔγϣϯ͕Netscapeʹ͋ͬͨ • ͜ͷJavaScriptͷඪ४ԽΛECMAΠϯλʔφγϣφϧʹґཔ • ECMA-262ͷॳ൛͕ग़དྷΔ •

    “JavaScript”͸঎ඪͷ౎߹Ͱ࢖͑ͳ͍ͷͰɺ”ECMAScript”ʹ
  26. ECMAScriptඪ४Խͷܥේ • 1998೥ ECMA-262 ୈ2൛ • 1999೥ ECMA-262 ୈ3൛ •

    ͜͜·Ͱ͸ॱௐͩͬͨɾɾɾ
  27. ECMAScriptඪ४Խͷܥේ • 1998೥ ECMA-262 ୈ2൛ • 1999೥ ECMA-262 ୈ3൛ •

    ͜͜·Ͱ͸ॱௐͩͬͨɾɾɾ • ECMA-262 ୈ4൛Ͱࣄ݅͸ىͬͨ͜!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  28. ECMAScript 4Ͱͷग़དྷࣄ • ਪਐ೿ • Adobe, Mozilla(چNetscape Navigationࣾ), Opera, Google

    • ଟ͘ͷ৽ػೳΛऔΓࠐΈJavaScriptΛେ෯ʹมߋ͢Δ • ൓ର೿ • Microsoft & Yahoo • ES3Λϕʔεʹػೳ௥Ճ΍όάमਖ਼ΛؚΜͩES3.1ͱͯ͠ެ։͢Δ
  29. ECMAScript4ͱ͸ͳΜͩͬͨͷ͔ • ߏ੒ཁૉᶃ • ActionScript 3.0(Adobe͕FlashΞϓϦέʔγϣϯͷͨΊʹ։ൃ͠ ͍ͯͨϓϩάϥϛϯάݴޠ)͔ΒऔΓࠐΜͩػೳ • class, interface,

    ܕ, ໊લۭؒ, package ͳͲ
  30. ECMAScript4ͱ͸ͳΜͩͬͨͷ͔ • ߏ੒ཁૉᶄ • JavaScript 1.7(NN΍Firefoxʹࡌ͍ͬͯͨJS͸౰࣌JavaScript 1.X ͱ͍͏όʔδϣϯ൪߸͕߱ΒΕ͍ͯͨ)͔ΒऔΓࠐΜͩػೳ • let,

    ෼ׂ୅ೖ, δΣωϨʔλʔ ͳͲ
  31. ECMAScript4ͱ͸ͳΜͩͬͨͷ͔ • ߏ੒ཁૉᶅ • ͦͷଞʹ΋਺ଟ͘ͷ৽ͨͳػೳΛऔΓࠐΉ͜ͱ͕ըࡦ͞Ε͍ͯͨ • ྫ͑͹ɾɾɾ

  32. ςϯϓϨʔτ • C#Ͱ͸Genericͱݺ͹ΕͯΔ΍ͭ http://tech.nitoyon.com/ja/blog/2007/10/30/es4-overview/ ΑΓ

  33. ԋࢉࢠΦʔόʔϩʔυ http://tech.nitoyon.com/ja/blog/2007/10/30/es4-overview/ ΑΓ

  34. ECMAScript4ʹؔ͢Δܾண • ݁Ռͱͯ͠͸ES3.1 (aka ES Harmony)Λ΍͍ͬͯ͘͜ͱʹऩଋ (2008೥8݄) • ES4͸͜Ε·ͰͷESʹରͯ͠มߋ͕େ͖͗͢ΔͷͰԺ౰ʹ΍Γ͍ͨ •

    จ๏ͷޓ׵ੑͷ໰୊ͳͲ͔ΒաڈͷWebͷࢿ࢈ʹӨڹΛ༩͑ͯ͠·͍͔Ͷͳ͍ • ໊લۭؒ΍ύοέʔδͳͲ͸Webʹ͙ͦΘͳ͍ͷͰɺES3.1ͷٞ࿦ͷ্Ͱ͸Ұ੾ѻ Θͳ͍ • ͦΕҎ֎ͷػೳʹ͍ͭͯ͸ٞ࿦ͷର৅ͱͯ͠ѻ͏
  35. ECMAScript5ϦϦʔε • ES Harmonyͱͯ͠ਐΊΒΕ͍ͯͨ࡞ۀ͸਱ʹ2009೥ɺES5ͱͯ͠Ϧ Ϧʔε͞Εͨ • ϝδϟʔόʔδϣϯ͕2্͕͍ͭͬͯΔ͕࣮ଶ͸3.0͔Β3.1΁ͷϚΠ φʔόʔδϣϯΞοϓ • Mozilla͕ਐΊ͍ͯͨJavaScript

    1.X → 2.0΁ͷ࡞ۀ΋ESʹ४ڌ͢Δํ ޲ʹͳΓɺ͜ͷόʔδϣϯݺশ΋ߦΘΕͳ͘ͳͬͨ
  36. ECMAScript 5ͷ৽ػೳ • JSON.parse, JSON.stringify ͷ௥Ճ • Array΁ͷϝιουͷ௥Ճ forEach, filter,

    map, reduce, indexOf • String΁ͷϝιουͷ௥Ճ trim • StrictϞʔυͷ௥Ճ ͳͲ
  37. ׻تͷECMAScript6ϦϦʔε • 2015೥ϦϦʔε • ਺ଟ͘ͷັྗతͳػೳ͕࢓༷ʹͳͬͨ!!!!!!!!!!!!!!!!!!! • Θ͍Θ͍

  38. arrow function • () => {} Ͱؔ਺ࣜΛॻ͚Δ • this͕ͦͷએݴ࣌ͷίϯςΩετͷthisʹଋറ͞ΕΔ

  39. enhanced object literals / destructuring • Objectͷkey͕ม਺໊ͱಉ࣌͡ʹলུՄೳ • ArrayͱObjectͰ෼ׂ୅ೖ͕Մೳʹ

  40. Promise • JSͷίʔϧόοΫ஍ࠈ͔ΒਓʑΛղ์ • ͦΕ·Ͱਓʑ͸jQuery.defferͱ͔ʢyieldͱ͔ʣͰࣃΛ৯͍͠͹ͬ ͍ͯͨͷ͡Ό

  41. Class • ͦΕ·Ͱਓʑ͸prototypeΛར༻ͯ͠΍͍͍ͬͯͬͯͨ

  42. Class • ES6Ͱ͸Classߏจ͕௥Ճ͞Εͨ

  43. ͦͷଞ • Symbol • Number.isNaN • Array.from / Array.find •

    String.includes / String.repeat • Object.assign • ຤ඌ࠶ؼ࠷దԽ
  44. ES6➜ES2015…ͦͯͦ͠ͷઌ΁ • ES6͸ES2015ʹվশɻҎ߱͸Living Standardํࣜʹ • ECMAScriptͷ࢓༷ॻͷυϥϑτ͸Github্ͷtc39/ecma262Ͱ؅ཧ͞Ε͍ͯΔ • ࠷৽ͷECMAScript࢓༷͸ https://tc39.github.io/ecma262/ •

    ຖ೥۠੾ΓΛ෇͚ͯҎ߱͸ES2016, ES2017ͱTagΛ෇͚Δ • ͜ͷλΠϛϯάͰStage4ʹೖ͍ͬͯΔ࢓༷Λର৅ʹ͢Δ
  45. http://azu.github.io/slide/2018/node/ecmascript39.html ΑΓ

  46. ࠓͷECMAScript • ͦΕ·Ͱ͸શͯͷ࢓༷͕߹ҙ͞ΕͨޙʹϦϦʔε͞Ε͍͕ͯͨɺݱ ࡏͷES͸߹ҙ͕औΕͨ࢓༷͔Βॱ࣍ϦϦʔε͞Ε͍ͯΔ • ྫ͑͹ɺES4ͷ߹ҙܗ੒ͷࣦഊʹΑΓES3͔Β࣍ظόʔδϣϯͰ͋ ΔES5·Ͱʹ10೥ʢES4ࣗମʹ΋2.5೥͘Β͍ͷϦιʔε͕͔͔ͬ ͍ͯͨͱݴΘΕ͍ͯΔ)͕͔͔ͬͨ

  47. ࠓͷECMAScript • Github্ͷେ͖ͳϓϩδΣΫτͱ͍͏ܗͰਐΊ͍ͯΔ • ϑΟʔυόοΫΛΑΓड͚΍͍͢؀ڥʹ • ϒϥ΢βϕϯμʔ͚ͩͰͳ͘JavaScriptΛར༻͢Δ։ൃऀ͔Β΋ ϑΟʔυόοΫΛΑΓड͚ΔͨΊʹ • ϓϩηεͷಁ໌Խ

    • ϛʔςΟϯάϊʔτ΋શͯGithub্Ͱެ։͞Ε͍ͯΔ
  48. ECMAScriptͷݱࡏͷࡦఆखॱ • ͦΕͧΕͷػೳʹ͍ͭͯݸผͷϓϩϙʔαϧͱͯ͠ਐΊΔ • ͜ͷϓϩϙʔαϧ΋ٞ࿦ͷͨΊʹ࠷େ࠷খݶͷܗͷ΋ͷ͕૿͑ͨ • ੹೚ऀ(νϟϯϐΦϯ)ͱstage0ʙ4͕͋Γɺstage4ʹͳΔͱ ECMAScriptͷ࢓༷ʹmergeՄೳʹͳΔ

  49. ECMAScriptϓϩϙʔαϧͷStageʹ͍ͭͯ http://azu.github.io/slide/2018/node/ecmascript39.html ΑΓ

  50. ECMAScriptϓϩϙʔαϧͷStageʹ͍ͭͯ stage3͔Βstage4ʹ͸ ʲ2ͭҎ্ͷ࣮૷*ʳ͕ඞཁ * flag෇͖࣮૷Ͱ΋OK

  51. Transpiler΍Polyfillʹ͍ͭͯ • Transpiler: ৽͍͠ߏจΛطଘͷػೳͰ࠶ݱͰ͖ΔΑ͏ʹιʔείʔυΛม ׵͢Δπʔϧ • ex: Babel • Polyfill:

    ϓϩϙʔβϧͰ௥Ճ͞Εͨ৽͍͠ϝιου΍ؔ਺ͳͲΛ࣮૷Λఏ ڙ͢ΔϥΠϒϥϦ • ex: babel-polyfill, whatwg-fetch
  52. Transpiler΍Polyfillʹ͍ͭͯ • Transpiler΍Polyfill͸৽͍͠ߏจ΍ϝιουͳͲͷ࠶ݱΛࢼΈ͍ͯ Δ͚ͩͰɺ಺෦తͳৼΔ෣͍΍࣮ߦ଎౓ʹ͍ͭͯ͸࣮ࡍͷϒϥ΢β ࣮૷ͱ͸ҟͳΔͷͰ஫ҙ • ϒϥ΢βຊମ΁ͷ࣮૷Λ଴ͨͣͯ͠ઌߦͯ͠ࢼ͢͜ͱ͕ग़དྷΔͷͰɺ ϓϩϙʔαϧ΁ͷϑΟʔυόοΫ͕༰қʹͳͬͨ

  53. ECMAScriptݱঢ়·ͱΊ • ES5·Ͱ͸શ࢓༷ʹ͍ͭͯಉҙͷ্ͰϦϦʔε͍ͯͨ͠ • ES6 (= ES2015)Ҏ߱͸࢓༷ຖʹಉҙ͕ͳ͞ΕΔͱϦϦʔε • ࣮૷͕2ͭҎ্ଘࡏ͍ͯ͠Δɾςετ͕͋Δ •

    tc39ٕज़ҕһձͰͷঝೝ • ຖ೥6݄ࠒʹESXXXXͱศٓతͳ໊લ(λά)͕෇͚ΒΕΔ
  54. JavaScriptͱECMAScript

  55. “JavaScript”ͱ”ECMAScript"

  56. “JavaScript”ͱ”ECMAScript" ͔͜͜Β͕ຊ୊!!!!!!!!!!

  57. JavaScriptͷॲཧܥ • ϒϥ΢βʹࡌ͍ͬͯΔΤϯδϯͨͪ • Chrome: V8, Safari: JavaScriptCore, Firefox: SpiderMonkey

    ͳͲ • CLI্ͳͲͰར༻Ͱ͖Δॲཧܥ • NodeJS
  58. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ

  59. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ Perl????

  60. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ ES5 strict mode

  61. "use strict" / Opt-in Strict mode • JavaScript͸جຊతʹޙํޓ׵ੑΛഁյ͠ͳ͍Α͏ʹ։ൃ͕ਐΊΒΕͯ ͖ͨ •

    ES5ͷStrict mode͸աڈͷJSͷෛ࠴ͷฦ٫ɺকདྷͷJS΁ͷ౤ࢿͷͨΊ • ߏจ΍ϥϯλΠϜͷৼΔ෣͍ʹରͯ͠มߋΛՃ͑Δ • ϑΝΠϧͷઌ಄·ͨ͸ؔ਺ͷઌ಄Ͱ
  62. "use strict" / Opt-in Strict mode • JavaScript͸جຊతʹޙํޓ׵ੑΛഁյ͠ͳ͍Α͏ʹ։ൃ͕ਐΊΒΕͯ ͖ͨ •

    ES5ͷStrict mode͸աڈͷJSͷෛ࠴ͷฦ٫ɺকདྷͷJS΁ͷ౤ࢿͷͨΊ • ߏจ΍ϥϯλΠϜͷৼΔ෣͍ʹରͯ͠มߋΛՃ͑Δ • ϑΝΠϧͷઌ಄·ͨ͸ؔ਺ͷઌ಄Ͱ ߏจΛ௥Ճ͢ΔͷͰ͸ͳ͘จࣈྻΛࣝผ ʹར༻͢Δ͜ͱͰඇରԠͷ؀ڥͰ΋ͦΕ ͳΓʹಈ͘Α͏ʹͳ͍ͬͯΔ (ͨͩ͠ৼΔ෣͍͕ҟͳΔͷͰҙਤ௨Γ ʹಈ͔ͳ͍͜ͱ͕ଟ͍ͷͰ஫ҙ)
  63. Strict modeͰมΘΔ͜ͱ • ۮൃతͳάϧʔόϧม਺΁ͷ୅ೖΛΤϥʔʹ • ͍͔ͭ͘ͷ৔߹ʹTypeError ྫ֎͕ൃੜ͢ΔΑ͏ʹʢҎԼ͸ͦͷྫʣ • NaN ΁ͷ୅ೖ

    • JSͰ͸ NaN ͸ΩʔϫʔυͰ͸ͳ͘άϧʔόϧม਺ • getterϓϩύςΟ΁ͷ୅ೖ • ΦϒδΣΫτʹॏෳͨ͠ϓϩύςΟΛઃఆ͢Δ
  64. Strict modeͰมΘΔ͜ͱ • implementsɺinterfaceɺletɺpackageɺprivateɺprotectedɺpublicɺstaticɺyield Λ༧໿ޠʹ௥Ճ • with Λ࢖͏ͱSyntax Errorʹ •

    thisͷৼΔ෣͍ͷมߋ • τοϓϨϕϧ·ͨ͸ؔ਺಺Ҏ֎Ͱͷؔ਺એݴΛΤϥʔʹ ͳͲ
  65. this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ

  66. this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ From http://efcl.info/2018/01/04/what-is-this/

  67. this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ From http://efcl.info/2018/01/04/what-is-this/

  68. this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ • JSΛॻ͍͍ͯΔͱͱʹ͔͘thisͰϋϚΔɻ͜ΕͰ΋͔ͱϋϚΔɻ • ࠷ۙ͸Ξϩʔؔ਺ͳͲͷ͓ӄͰϚγʹ͸ͳͬͨ

  69. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ ES6 spread parameter

  70. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ jQuery

  71. jQuery • ΈΜͳେ޷͖jQuery • JS͸jQueryΛ༻͍ͨ΋ͷ͔͠ॻ͍ͨ͜ͱͳ͍ਓ΋ଟ͍͔΋? • $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

  72. jQueryͱJavaScript • JS͕DOMૢ࡞ʹΑΔUIߏஙͳͲͷϋʔυϧ͕ҰؾʹԼ͕ͬͨ • ϝιουνΣʔϯͰॻ͚Δͷ΋ਓؾͩͬͨ • jQueryϓϥάΠϯΛར༻ͨ͠Ξχϝʔγϣϯ΍৭ʑͳύʔπ(ྫ͑͹lightbox)Λར༻ ͨ͠WebαΠτ͕രൃతʹ૿͑ͨ • jQuery

    mobileͱ͍͏ϞόΠϧରԠͤ͞Δͷ΋͋ͬͨ • WebαΠτͰෳ਺ͷϓϥάΠϯΛ࢖ͬͨΓɺUIຖʹ৭ʑͳίʔυΛॻ͍ͯఏڙ͢Δͱ ͍͏͜ͱ΋Ұൠతʹͳͬͨ
  73. ͦͷଞͷஶ໊ͳJavaScriptϥΠϒϥϦ • Backbone.js • prototype.js • YUI Library • AngularJS

    • React • VueJS
  74. 2009೥:AngularJS 2005೥: prototype 2006೥: jQuery 2014೥:Vue 2010೥:Backbone 2013೥:React

  75. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ DOM API

  76. DOM APIͬͯԿʁ • DOM(Document Object Model)͸XML, HTML, SVGυΩϡϝϯτΛ ϓϩάϥϛϯάݴޠͰར༻͢ΔͨΊʹϞσϧԽͨ͠΋ͷ •

    จॻΛ໦ߏ଄Ͱදݱ͍ͯ͠Δ • ϊʔυ͸͞ΒʹΠϕϯτϋϯυϥΛ͍࣋ͬͯΔ • ଟ͘͸JavaScriptͰར༻͞ΕΔ͕ɺDOM͸ECMAScriptͷ࢓༷ͷҰ ෦Ͱ͸ͳ͍
  77. DOM APIͬͯԿʁ • Q: DOM APIʹ͍ͭͯͷ࢓༷͸ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ

  78. DOM APIͬͯԿʁ • Q: DOM APIʹ͍ͭͯͷ࢓༷͸ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ • A: W3C, WHATWG

  79. DOM APIͬͯԿʁ • Q: DOM APIʹ͍ͭͯͷ࢓༷͸ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ • A: W3C, WHATWG

    • HTMLͷ࢓༷ࡦఆͷํ਑ͷҧ͍ͰᦻΛ෼͔ͭ͜ͱʹͳͬͨ2ͭͷஂ ମ͕ͦΕͧΕ࢓༷Λ༗͍ͯ͠Δ • WHATWGͰ͸DOM Standard, W3CͰ͸DOM 4 • جຊతʹ͸ಉ͕ͩ͡Ұ෦ࠩ෼͕͋Δ
  80. ༨ஊ: W3CͱWHATWG • 1999೥ͷHTML4.01קࠂҎ߱ɺ௕೥HTMLͷΞοϓσʔτ͕ࢭ·͍ͬͯͨ • 2004೥ Apple, Opera, MozillaͰWHATWGઃཱ •

    2007೥ ྆ऀ͕ڠྗମ੍ΛऔΔW3C HTML Working GroupΛઃཱ • 2012೥ קࠂΛઃཱ͍ͨ͠W3Cͱ։ൃͷܧଓΛॏࢹ͢ΔWHATWG͕ᦻΛ෼͔ͭ͜ͱʹ ͳΓɺ྆૊৫͕ผʑʹࡦఆ࡞ۀΛਐΊ͍ͯ͘͜ͱʹ • 2014೥ W3C HTML 5קࠂ͕ൃߦ
  81. ༨ஊ: W3CͱWHATWG • WHATWGͷDOM (Living) Standard • ϒϥ΢βϕϯμʔ͸WHATWGͷվగʹूத͍ͯ͠Δ • W3C͸͜ΕΒΛίϐʔ͢Δ͚ͩͰͳ͘Ұ෦ՃචΛͯ͠ဃ཭Λ࢈ΜͩΓ͍ͯ͠Δ

    ͜ͱʹରͯ͠൷൑͕͋Δ • ͨͩW3Cͷจॻ͸ϩΠϠϦςΟʔϑϦʔ͕໌ه͞Ε͍ͯͨΓɺઐ໳ՈʹΑΔϫ ΠυϨϏϡʔ͕ͳ͞Ε͍ͯΔ(ͱ͍͏ͷ͕ओுͰ͋Δ)
  82. ಉ͘͡ECMAScriptͷ࢓༷ʹؚ·Εͳ͍΋ͷ • window • window.navigator • window.location • window.history •

    XMLHttpRequest • HTML Canvas 2D Context • WebStorage ...etc HTML Living Standardʹ ؚ·Ε͍ͯΔ
  83. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ ES module

  84. JavaScriptͰ֎෦ϥΠϒϥϦΛಡΈࠐΉ • ఻౷తͳJavaScriptͷϥΠϒϥϦͷಡΈࠐΈํ

  85. JavaScriptͰ֎෦ϥΠϒϥϦΛಡΈࠐΉ • scriptλάͰಡΈࠐΉख๏ͷ໰୊఺ • window(άϩʔόϧ)Λհͯؔ͠਺Λڞ༗͢Δඞཁ͕͋Δ • άϩʔόϧྖҬͷԚછ • ར༻ॱΛߟ͑ͯɺॱ൪ʹλάΛهड़͢Δඞཁ͕͋Δ •

    ෳ਺ͷϑΝΠϧΛಡΈࠐΉඞཁ͕͋Δ • ಉҰΦϦδϯͷಉ࣌઀ଓ਺੍ݶ
  86. ֎෦ϥΠϒϥϦಡΈࠐΈ໰୊ͱ޲͖߹͏ • JSͷߏจͱͯ͠֎෦ϥΠϒϥϦΛಡΈࠐΉํ๏Λఏڙ͢Δ͜ͱͰ άϩʔόϧ؀ڥΛར༻ͨؔ͠਺ͷڞ༗ΛࢭΊΔ • ࣄલʹͦΕΒͷϥΠϒϥϦΛؚΜͩঢ়ଶͰ1ͭͷϑΝΠϧʹίϯύ Πϧ͢Δ͜ͱͰ઀ଓ਺΍ϑΝΠϧαΠζͷ໰୊Λղܾ͢Δ

  87. JavaScriptͱpackage maneger • ֎෦ͷϥΠϒϥϦΛޮ཰Α͘؅ཧ͢ΔͨΊʹ͸ύοέʔδϚωʔδϟ ͕ඞཁͰ͋ͬͨ • ͦͷͨΊʹొ৔ͨ͠ͷ͕ • bower •

    npm
  88. JavaScriptͱpackage maneger • JavaScriptͷpackage manager • bower • ϒϥ΢β޲͚ͷϥΠϒϥϦΛఏڙ͍ͯͨ͠ •

    2014೥ޙ൒͘Β͍͔ΒJSք۾͔Β͸ෛ࠴ͱͯ͠ೝࣝ͞Ε͍ͯͨ • npm • Node޲͚ͷϥΠϒϥϦΛఏڙ͍͕ͯͨ͠ɺϒϥ΢β޲͚ͷϥΠϒϥϦ΋ѻ ͏Α͏ʹͳͬͨ • 2014೥7݄ʹ͸jQuery͕npmͷΈͰbowerͷαϙʔτΛऴྃͨ͠ • https://github.com/jquery/jquery/pull/1620
  89. require vs import • CommonJS • module.exportsʹ୅ೖ͢Δ͜ͱͰॻ͖ग़͠ • require()Λར༻ͯ͠ಡΈࠐΈ •

    ECMAScript • exportࣜΛར༻ͯ͠ॻ͖ग़͠ • importࣜΛར༻ͯ͠ಡΈࠐΈ
  90. #

  91. ͋Εʁզʑ͸ ECMAScriptܗࣜ ͡Όͳ͍ͷΛ ͣͬͱ࢖ͬͯͨͷʁ

  92. ͳͥ require ͕࢖ΘΕ͍ͯͨͷ͔ • ES2015ͷͱ͖ʹ͸γϯλοΫεͷΈΛܾΊ͍ͯͨ • ࣮ࡍʹॲཧܥ͕ͲͷΑ͏ʹϞδϡʔϧͷಡΈࠐΈΛߦ͏͔ʹ͍ͭͯ͸ECMAScriptͰఆٛ͞ Ε͍ͯͳ͔ͬͨ ➜ NodeJS:

    NodeJSਞӦ ➜ϒϥ΢β: WHATWG • ͲͷΑ͏ͳৼΔ෣͍Ͱ࣮૷͢Δ͔Λ֤ਞӦ͕ܾఆ͢Δඞཁ͕͋ͬͨͷͰɺ࢓༷ʹΑͬͯ શͯ
  93. ۩ମతʹͲ͏͍͏໰୊͕͋ͬͨͷ͔ • ϩʔυ࣌ʹͦͷϑΝΠϧ͕ESM͔Ͳ͏͔Λ஌Δඞཁ͕͋Δ • ࣝผࢠ(URI)ΛͲͷΑ͏ʹղܾ͢Δ͔ • طଘͷCommonJSͱͷޓ׵ੑΛͲ͏͢Δ͔(NodeJS)

  94. ۩ମతʹͲ͏͍͏໰୊͕͋ͬͨͷ͔ https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs ΑΓ

  95. ES Modulesͷݱঢ় • ϒϥ΢β͸ChromeͱFirefox͸ରԠࡁΈ • NodeJS͸֦ுࢠΛmjsͱ࣮ͯ͠ߦ͢Δ͜ͱͰରԠ • Strict mode͕ڧ੍͞ΕɺτοϓϨϕϧthis͸undefinedʹ •

    __dirnameͳͲ΋࢖͑ͳ͘ͳ͍ͬͯΔͷͰ஫ҙ
  96. ͜͜ʹͳ͍ʁ

  97. ΋͔ͯ͠͠ʁ

  98. ΋͔ͯ͠͠ʁ CoffeeScript

  99. CoffeeScript • Alt JSͷ1ͭɻRubyͳͲ͔ΒӨڹΛड͚ͨγϯλοΫεγϡΨʔ΍͍͔ͭ͘ ͷػೳͳػೳ͕ਓؾͩͬͨ • Ruby on Rails 3.1Ҏ߱Ͱެࣜʹαϙʔτ͞Ε͍ͯͨ

    • Atom΋ϦϦʔε࣌͸֤छϓϥάΠϯͳͲ͕CoffeeScriptͰॻ͔Ε͍ͯͨ • JavaScriptͷੜΈͷ਌Ͱ͋ΔϒϨϯμϯɾΞΠΫ΋ʮJavaScriptͷະདྷʯʹ ӨڹΛ༩͑ͨͱ໌ݴ͍ͯ͠Δ • ͪͳΈʹࠓ΋ܧଓతʹΞοϓσʔτ͞Ε͍ͯͯɺݱࡏ͸2ܥ͕࠷৽൛
  100. CoffeeScriptͷه๏;Γ͔͑Γ Ruby෩ʹ ObjectϦςϥϧͷ{}Λলུ

  101. CoffeeScriptͷه๏;Γ͔͑Γ this.ͷγϯλοΫεγϡΨʔ

  102. CoffeeScriptͷه๏;Γ͔͑Γ ޙஔͷif/unless

  103. arrow function

  104. arrow function

  105. arrow function fat arrow͸thisΛଋറ

  106. arrow function ͜Ε͕ޙʹES2015Ͱ arrow functionΛಋೖ͢ΔͨΊͷ͖͔͚ͬʹ ͳͬͨ

  107. 2010೥ CoffeeScriptొ৔

  108. JSͱESͷҧ͍ͷ੔ཧ • "ECMAScript" • JavaScriptݴޠͷ࢓༷͕ऩΊΒΕ͍ͯΔ • ࣮ࡍͷϒϥ΢β্Ͱѻ͑ΔAPI͸ผ్HTMLͷ࢓༷΍DOMͷ࢓༷ͱ ͯ͠ࡦఆ͞Ε͍ͯΔ • ্هશͯΛؚΊͯ೔ৗతʹ͸"JavaScript"ͱݺশ͍ͯ͠Δ

  109. babel / browserify / Webpack ...etc ͸ͦΕͧΕԿͷͨΊʁ

  110. Babel

  111. Babel • Babel (چ: 6to5) ͸ES2015Ҏ߱ͷه๏Λ֤छϒϥ΢βͰಈ͘ES5 Ҏલͷදݱʹม׵͢ΔTranspiler • ։ൃऀ͸ES2015Ҏ߱ͷه๏Ͱهड़ՄೳʹͳΓͭͭ΋ɺϢʔβʔ ʹରͯ͠͸ޙํޓ׵ੑΛ୲อͯ͠αʔϏεΛఏڙͰ͖Δ

  112. Babel • babel-plugin • ECMAScriptͷ1ͭͷ࢓༷ʹରԠͨ͠ม׵͕ϓϥάΠϯʹͳ͍ͬͯΔ • babel-preset • babel-pluginͷू߹ɻbabel-preset-2015͸ES2015ʹؚ·ΕΔ΋ͷ ͷू߹ɻbabel-preset-stage0,

    babel-preset-latest, babel-preset- envͳͲɻ
  113. Babel • babel-register • NodeJSͰrequire͢ΔࡍʹઌಡΈͯ͠BabelͰcompile͢ΔΑ͏ʹ͠ ͯ͘ΕΔ • babel-polyfill • globalείʔϓ΁ͷ௥Ճ͕ඞཁͳPromise΍Weakmap΍static

    methodͰ͋ΔArray.formͳͲΛར༻Մೳʹ͢Δ
  114. Browserify

  115. Browserify • CommonJSܗࣜͷmoduleͷղܾΛ͢Δπʔϧ • BrowserifyΛར༻͢Δ͜ͱͰCJS moduleΛར༻ͨ͠ϑΝΠϧ Λϒϥ΢βͰ΋ಡΊΔܗʹม׵Ͱ͖Δ • NodeJS޲͚ʹॻ͔ΕͨCJSܗࣜͷϥΠϒϥϦͳͲΛϒϥ΢βͰ ΋࢖༻Մೳʹ

  116. Webpack

  117. Webpack • BrowserifyͷΑ͏ͳJSͷTranspiler΍gulpͷΑ͏ͳλεΫϥϯ φʔ͕ྲྀߦ͢ΔதɺͦΕΒΛΦʔϧΠϯϫϯతʹ૊Έ߹Θͤͨ πʔϧͱͯ͠ొ৔ • JSϑΝΠϧͷόϯυϦϯά͚ͩͰͳ͘ɺCSS/LESSͳͲ΍ը૾ ϑΝΠϧͳͲͷΞηοτ΋JSϑΝΠϧͱಉ༷ʹѻ͏͜ͱ͕ग़དྷ ͨͷͰਓؾ

  118. TypeScript

  119. TypeScript • MicrosoftʹΑͬͯJSʹܕΛ༩͑ΔͨΊͷAltJS/Transpilerͱͯ͠ ։ൃ͞Εͨ • JavaScriptʹ੩తܕ෇͚ͳͲΛՃ͑ͨϓϩάϥϛϯάݴޠ • େن໛ΞϓϦέʔγϣϯͷ։ൃʹ΋଱͑͏ΔΑ͏ʹͳ͍ͬͯΔ(?)

  120. ͦͷଞͷπʔϧͨͪ • rollup • ES moduleܗࣜͷJSͷͨΊͷόϯυϦϯάπʔϧ • tree-shaking΋΍ͬͯ͘ΕΔͧ • flowtype

    • JSʹ੩తܕ෇͚ͷͨΊͷه๏Λ௥Ճ͢Δ • babelϓϥάΠϯͱͯ͠ಈ࡞͢ΔͷͰɺbabelͰॲཧ͢ΔࡍʹAST͔Βফͯ͘͠ΕΔ
  121. babel / browserify / Webpack ...etc ͸ͦΕͧΕԿͷͨΊʁ

  122. ͦΕͧΕԿͷͨΊʁ • Babel • ES2015Ҏ߱ͷදݱΛඇରԠͷϒϥ΢βͳͲͰ΋ಈ͘Α͏ʹม׵ • Browserify • CommonJSܗࣜͷrequireΛղܾɻओʹrequireΛղܾͰ͖ͳ͍ϒϥ΢β޲͚ •

    Webpack • JSͷόϯυϦϯά͚ͩͰͳ͘ɺCSS΍ը૾ͳͲ΋औΓѻ͏
  123. ·ͱΊ

  124. ࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘?

  125. ࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘? Έͳ͞Μ౴͑ΒΕ·͢ΑͶʁ

  126. ࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘? ղ౴͸օ͞Μͷࣗྗݚڀʹظ଴͠·͢

  127. ·ͱΊ • "JavaScript"ͷ࢓༷͸ECMAScript͚ͩͰͳ͘WHATWG HTML Living StandardͳͲ΋ؚΜͰ͍Δ • ͜͜ʹࢸΔ·Ͱʹ৭ʑͳܦҢ͕͋ͬͨ • JavaScriptͷݱࡏͷπʔϧͨͪ͸͜Ε·Ͱͷྺ࢙ͷෛ࠴ͱະདྷͷ౤ࢿͷͨ

    ΊͷؒΛܨ͍Ͱ͘Ε͍ͯΔ • ίϯςΩετΛཧղͯ͠దࡐదॴͰֶΜͩΓ࢖͍ͬͯ͜͏
  128. ࢀߟจݙ • [ThinkIT] ୈ2ճɿGoogle͸WebͷৗࣝΛృΓସ͑ͨ (1/4) https://thinkit.co.jp/free/article/0612/22/2/ • GoogleΤϯδχΞɿʮGoogle Mapsͷެ։ͰAJAX΁ͷؔ৺͕ߴ·ͬͨʯ -

    ZDNet Japan https://japan.zdnet.com/article/20085943/ • ECMAScript 4 ͷ Draft Λͬ͘͟ΓಡΜͰΈͨ - ͯͬࣽ͘ϒϩά http://tech.nitoyon.com/ja/blog/2007/10/30/es4-overview/ • JavaScript - Wikipedia https://ja.wikipedia.org/wiki/JavaScript • ECMAScript 4ͷඪ४Խ͕தࢭ͞ΕΔ | εϥυ σϕϩούʔ https://developers.srad.jp/story/08/08/19/0714251/ • JavaScript 1.7 ͷ৽ػೳ: Days on the Moon http://nanto.asablo.jp/blog/2006/08/12/481381#js17-block-scope • JavaScript ୈ6൛, David Flanagan ஶɺଜ্ ྻ ༁, ΦϥΠϦʔδϟύϯ • JavaScript 2.0͸ECMAScript 3.1ϕʔεʹɺECMAScript 4͸ৡา | ϚΠφϏχϡʔε https://news.mynavi.jp/article/20080818-a027/ • ECMAScript 5ϦϦʔε https://www.infoq.com/jp/news/2009/12/ecmascript5 • ECMAScript6ͷ৽ػೳ - Qiita https://qiita.com/rana_kualu/items/1f98c1a642102f48aa78 • ECMAScriptͷ࢖͍ํ http://azu.github.io/slide/2018/node/ecmascript39.html • ES6ͷ৽ػೳʮclassߏจʯ – جૅฤ – | ES6ͷ͋Δ੕ʹੜ·Εͯ https://liginc.co.jp/266587 • Node.jsͷES Modulesαϙʔτͷݱঢ়֬ೝͱඋ͑ - teppeis blog https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs • Strict Ϟʔυ - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode • WHATWG൛ͱW3C൛͕͋Δ࢓༷ͨͪ - Unreviewed http://takenspc.hatenablog.com/entry/2015/12/03/235927 • ͓ͬ͞ΜES6/ES2015,React.jsΛֶͿ https://www.slideshare.net/dcubeio/es6es2015reactjs