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

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

pastak
March 20, 2018
12k

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

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

pastak

March 20, 2018
Tweet

More Decks by pastak

Transcript

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

    ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript
  2. 2005೥ Google Mapsര஀ • Google Maps͸ແݶʹεΫϩʔϧͰ͖Δ஍ਤαΠτͩͬͨ • ྫ͑͹Yahoo!ͷ஍ਤ͸্ԼࠨӈʹҠಈ͢ΔϦϯΫΛԡͯ͠Ҡಈ͍ͯͨ͠ • Google

    Maps͸͜ͷͱ͖XMLHttpRequestͳͲΛ࢖ͬͯμΠφϛοΫʹಡ ΈࠐΈ࢓૊ΈΛఏڙ͍ͯͨ͠ • AjaxΞϓϦέʔγϣϯ͕ਓؾΛത͢Δ͖͔͚ͬʹͳͬͨ
  3. ݱࡏͷJavaScriptΞϓϦέʔγϣϯ • Angular΍ReactɺVueͳͲΛ࢖ͬͨSPAΞϓϦέʔγϣϯ • pushStateʹΑΔཤྺॻ͖ࠐΈ + XHR/fetchʹΑΔσʔλऔಘ • Progressive Web

    Application • ϞόΠϧϒϥ΢βͰ΋σεΫτοϓϒϥ΢βͰ΋͍͍ײ͡ʹಈ͘ • ΦϑϥΠϯΩϟογϡɾϩʔΧϧετϨʔδ
  4. ECMAScriptඪ४Խͷܥේ • 1998೥ ECMA-262 ୈ2൛ • 1999೥ ECMA-262 ୈ3൛ •

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

    • ଟ͘ͷ৽ػೳΛऔΓࠐΈJavaScriptΛେ෯ʹมߋ͢Δ • ൓ର೿ • Microsoft & Yahoo • ES3Λϕʔεʹػೳ௥Ճ΍όάमਖ਼ΛؚΜͩES3.1ͱͯ͠ެ։͢Δ
  6. ECMAScript4ʹؔ͢Δܾண • ݁Ռͱͯ͠͸ES3.1 (aka ES Harmony)Λ΍͍ͬͯ͘͜ͱʹऩଋ (2008೥8݄) • ES4͸͜Ε·ͰͷESʹରͯ͠มߋ͕େ͖͗͢ΔͷͰԺ౰ʹ΍Γ͍ͨ •

    จ๏ͷޓ׵ੑͷ໰୊ͳͲ͔ΒաڈͷWebͷࢿ࢈ʹӨڹΛ༩͑ͯ͠·͍͔Ͷͳ͍ • ໊લۭؒ΍ύοέʔδͳͲ͸Webʹ͙ͦΘͳ͍ͷͰɺES3.1ͷٞ࿦ͷ্Ͱ͸Ұ੾ѻ Θͳ͍ • ͦΕҎ֎ͷػೳʹ͍ͭͯ͸ٞ࿦ͷର৅ͱͯ͠ѻ͏
  7. ECMAScript 5ͷ৽ػೳ • JSON.parse, JSON.stringify ͷ௥Ճ • Array΁ͷϝιουͷ௥Ճ forEach, filter,

    map, reduce, indexOf • String΁ͷϝιουͷ௥Ճ trim • StrictϞʔυͷ௥Ճ ͳͲ
  8. ͦͷଞ • Symbol • Number.isNaN • Array.from / Array.find •

    String.includes / String.repeat • Object.assign • ຤ඌ࠶ؼ࠷దԽ
  9. Transpiler΍Polyfillʹ͍ͭͯ • Transpiler: ৽͍͠ߏจΛطଘͷػೳͰ࠶ݱͰ͖ΔΑ͏ʹιʔείʔυΛม ׵͢Δπʔϧ • ex: Babel • Polyfill:

    ϓϩϙʔβϧͰ௥Ճ͞Εͨ৽͍͠ϝιου΍ؔ਺ͳͲΛ࣮૷Λఏ ڙ͢ΔϥΠϒϥϦ • ex: babel-polyfill, whatwg-fetch
  10. "use strict" / Opt-in Strict mode • JavaScript͸جຊతʹޙํޓ׵ੑΛഁյ͠ͳ͍Α͏ʹ։ൃ͕ਐΊΒΕͯ ͖ͨ •

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

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

    • JSͰ͸ NaN ͸ΩʔϫʔυͰ͸ͳ͘άϧʔόϧม਺ • getterϓϩύςΟ΁ͷ୅ೖ • ΦϒδΣΫτʹॏෳͨ͠ϓϩύςΟΛઃఆ͢Δ
  13. DOM APIͬͯԿʁ • DOM(Document Object Model)͸XML, HTML, SVGυΩϡϝϯτΛ ϓϩάϥϛϯάݴޠͰར༻͢ΔͨΊʹϞσϧԽͨ͠΋ͷ •

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

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

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

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

    XMLHttpRequest • HTML Canvas 2D Context • WebStorage ...etc HTML Living Standardʹ ؚ·Ε͍ͯΔ
  18. JavaScriptͱpackage maneger • JavaScriptͷpackage manager • bower • ϒϥ΢β޲͚ͷϥΠϒϥϦΛఏڙ͍ͯͨ͠ •

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

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

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

    • Atom΋ϦϦʔε࣌͸֤छϓϥάΠϯͳͲ͕CoffeeScriptͰॻ͔Ε͍ͯͨ • JavaScriptͷੜΈͷ਌Ͱ͋ΔϒϨϯμϯɾΞΠΫ΋ʮJavaScriptͷະདྷʯʹ ӨڹΛ༩͑ͨͱ໌ݴ͍ͯ͠Δ • ͪͳΈʹࠓ΋ܧଓతʹΞοϓσʔτ͞Ε͍ͯͯɺݱࡏ͸2ܥ͕࠷৽൛
  22. ͦͷଞͷπʔϧͨͪ • rollup • ES moduleܗࣜͷJSͷͨΊͷόϯυϦϯάπʔϧ • tree-shaking΋΍ͬͯ͘ΕΔͧ • flowtype

    • JSʹ੩తܕ෇͚ͷͨΊͷه๏Λ௥Ճ͢Δ • babelϓϥάΠϯͱͯ͠ಈ࡞͢ΔͷͰɺbabelͰॲཧ͢ΔࡍʹAST͔Βফͯ͘͠ΕΔ
  23. ࢀߟจݙ • [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