Save 37% off PRO during our Black Friday Sale! »

JavaScriptビルド概論

 JavaScriptビルド概論

上越TechMeetup #3で喋りました。なんでJavaScriptにビルドが必要なんじゃ!という方向けです。

9a6e4623f9314c5e1fc99635ac9617ed?s=128

Yukiya Nakagawa

April 13, 2019
Tweet

Transcript

  1. JavaScriptϏϧυ֓࿦ 2019.4.13 @Nkzn / Yukiya Nakagawa Joetsu Tech Meetup

  2. whoami • Yukiya Nakagawa / @Nkzn ʢ32ࡀʣ
 ্ӽࢢग़਎ • ΢Υʔλʔηϧגࣜձࣾ@৽ׁࢢ


    ೶ۀ޲͚αʔϏεʮΞάϦϊʔτʯ • AndroidΤϯδχΞˠϞόΠϧدΓJSΤϯδχΞ • ໌೔͸ٕज़ॻయͰຊചͬͯ·͢
  3. ޷ධൃץத

  4. ࠓ೔͸ JSͷϏϧυͷ࿩Λ͠·͢

  5. Target • JavaScriptʹͲ͏ͯ͠Ϗϧυ͕ඞཁʹͳ͍ͬͯ Δͷ͔ͬ͘͠Γདྷ͍ͯͳ͍ํ

  6. ࠷ۙͷJavaScript

  7. ϞδϡʔϧػߏͬͯେࣄͰ͢ΑͶ • ϑΝΠϧ͝ͱʹ໊લۭؒΛ෼͚ΒΕΔ • େ͖ͳΞϓϦέʔγϣϯΛখ͞ͳػೳͷू߹ ͱͯ͠࡞Γ΍͘͢ͳΔ ಥવͰ͕͢

  8. <!-- index.html --> <script type="text/javascript" src="./greeter.js"></script> <script type="text/javascript" src="./app.js"></script> Plain

    Old JavaScript (ES5) // app.js Greeter.greet('Bob'); // greeter.js var Greeter = { greet: function(name) { alert("Hello, " + name + "!"); } }; • ϑΝΠϧؒͰ
 ໊લۭؒΛڞ༗ • ؔ਺಺ʹ͔͠
 είʔϓ͕ͳ͍ • ΈΜͳͰ໊લͷ
 औΓ߹͍
  9. 2017೥9݄ • Chrome 61ͰϞδϡʔϧػߏ͕ϦϦʔε

  10. ES6 Modules <!-- index.html --> <script type="module" src="./app.js"></script> // greeter.js

    const greet = (name) => { alert(`Hello, ${name}!`); } export const Greeter = { greet, }; // app.js import {Greeter} from './greeter.js'; Greeter.greet("hoge"); (SFFUFS͔͠ެ։͞Εͳ͍ ʢHSFFUؔ਺͸Ӆṭ͞ΕΔʣ JNQPSUͨ͠ϞδϡʔϧΛ૊Έ߹Θͤͯ ػೳΛ࡞ΕΔ
  11. େମͷ࠷৽ϒϥ΢βͰಈ͘ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

  12. ΊͰͨ͠ʂ

  13. Ͱ͸ͳͯ͘

  14. օ͞Μͷखݩͷϒϥ΢βͰ͸ import/exportಈ͖·͔͢ʁ

  15. ͨͿΜಈ͖·͢ΑͶ

  16. օ͞Μͷ ͓٬͞Μͷϒϥ΢βͰ͸ import/exportಈ͖·͔͢ʁ

  17. https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

  18. ES201xͷ ͋ͷจ๏΍͜ͷจ๏ ͓٬͞Μͷϒϥ΢βͰ ಈ͖·͔͢ʁ

  19. const greet = (name) => { alert(`Hello, ${name}!`); } export

    const Greeter = { greet, }; "SSPX'VODUJPOT 5FNQMBUF-JUFSBMT 4IPSUIBOEQSPQFSUZOBNFT
  20. Arrow Functions https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

  21. Template Literals

  22. Shorthand property names https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer

  23. IE11͕΍͹͍ ʢEdgeͱSafari΋ͪΐͬͱ΍͹͍ʣ

  24. WebΞϓϦέʔγϣϯ͕ Ͳͷϒϥ΢β͔Β ΞΫηε͞ΕΔ͔Λ ੍ݶ͢Δ͜ͱ͸೉͍͠ ʢ͋Δఔ౓͸Ͱ͖Δ͚Ͳମݧ͕ѱ͍ʣ

  25. Ͳ͏͠Α͏ • ͔ͤͬ͘ྑ͍ݴޠ࢓༷ʹͳ͖ͬͯͨͷʹɺݹ͍ϒϥ΢ βͰಈ͔ͨ͢Ίʹݹ͍JavaScriptͰॻ͘ͷ͸ݏ • WebΞϓϦ͸ෳࡶͳϏδωεϩδοΫΛ࣋ͭ΋ͷ΋ଟ ͍ • Ϟδϡʔϧػߏ΍async/awaitແ͠ͰෳࡶͳϏδωεϩ δοΫΛίʔυ্ʹදݱ͢Δͷ͸ɺ։ൃޮ཰΍อकੑ

    ͷ໘Ͱ΋ΑΖ͘͠ͳ͍
  26. ES201xͰॻ͍ͨίʔυΛ ES5͔͠ಈ͔ͳ͍ϒϥ΢βͰ ಈ͔͍ͨ͠

  27. ϓϩάϥϚʔ͕ॻ͍ͨ ϑΝΠϧͷݴޠ࢓༷ͱ ࣮ࡍʹಈ͘ϑΝΠϧͷ ݴޠ࢓༷Λผʹ͍ͨ͠

  28. ͋ΔϓϩάϥϜϑΝΠϧΛ ϥϯλΠϜϑΝΠϧʹ ม׵͍ͨ͠

  29. ͜Ε͸ίϯύΠϧ΍Ϗϧυͱ ݺ͹ΕΔ΋ͷͰ͸ʁ JavaScriptΛ Ϗϧυ͢Δͧʂʂ

  30. JavaScriptͷϏϧυ

  31. JavaScriptͷ3ͭͷΞϓϩʔν • τϥϯεύΠϧ • ґଘੑղܾ • ϙϦϑΟϧ

  32. τϥϯεύΠϧ • ʮಈ͘จ๏ʹ͢ΔʯʹಛԽͨ͠෼໺ • ͕͜͜ಘҙͳͷ͕Babelʢ͋ͱTypeScriptʣ • ϑΝΠϧ͸όϥόϥͷ··ʢimportߏจ͸ ͪΐͬͱܗ͕มΘΔఔ౓ʣ

  33. https://babeljs.io/repl Babel(presets-es2015)ʹΑΔม׵ Ṗͷάϩʔόϧม਺ʹม׵͞Εͨ ʢ$PNNPO+4࢓༷ͷFYQPSUػߏʣ #FGPSF "GUFS

  34. https://babeljs.io/repl Babel(presets-es2015)ʹΑΔม׵ #FGPSF "GUFS Ṗͷάϩʔόϧؔ਺ʹม׵͞Εͨ ʢ$PNNPO+4࢓༷ͷJNQPSUػߏʣ

  35. https://babeljs.io/repl Babel(presets-es2017)ʹΑΔม׵ ϒϥ΢βʹશ෯ͷ৴པΛஔ͘৔߹͸͜ΕͰ΋͍͍ #FGPSF "GUFS

  36. https://babeljs.io/repl Babel(presets-es2017)ʹΑΔม׵ #FGPSF "GUFS es2017؀ڥͰasync/awaitΛಈ͔͍ͨ͠৔߹͸ ΍͸Γม׵͕ೖΔ BTZODؔ਺Λ ͔ͭͬͯΈͨ

  37. TypeScript(tsc)ʹΑΔม׵ #FGPSF "GUFS ※ ઃఆͰม׵ઌͷϞδϡʔϧ࢓༷ʢCommonJS, AMDʣΛબ୒Ͱ͖Δ https://www.typescriptlang.org/play/

  38. ґଘੑղܾ • importߏจ΍requireؔ਺ͷ࣮ݱ • ΤϯτϦʔϙΠϯτʢindex.jsʣ͔Βimport΍requireͰ ܨ͕ͬͨϞδϡʔϧΛɺຊ౰ʹ࣮ߦͰ͖ΔΑ͏ʹ͢Δ • ࣮ߦ࣌ʹܨ͛Δ΍ͭɿRequireJSʢAMDܗࣜΛಈ͔ ͢ʣ •

    Ϗϧυ࣌ʹܨ͛Δ΍ͭɿWebpack/Browserify/Rollup
  39. Webpackͷ৔߹ @@XFCQBDL@SFRVJSF@@ ͱ͍͏ؔ਺͕ϞδϡʔϧղܾΛؤுΔ ͻͱͭPS͍͔ͭ͘ͷ +4ϑΝΠϧʹશϑΝΠϧΛ·ͱΊΔ

  40. Webpackͷ৔߹ ˞ FWBMͳͷ͸σόοάதͷڍಈͰ
 ͋ͱͰͪΌΜͱͨ͠ίʔυʹͳΓ·͢ ֎෦ϥΠϒϥϦ΍ϓϩμΫτίʔυ͕ SFRVJSFՄೳͳܗͰऔΓࠐ·Ε͍ͯΔ

  41. NJOJGZVHMJGZͱ͔͍Ζ͍Ζೖͬͯ ϓϩμΫγϣϯ؀ڥͰ͸͜͏ͳΔ ʢ͜ͷྫ͸UXJUUFSDPNʣ

  42. ϙϦϑΟϧ • ଍Γͳ͍ඪ४ϥΠϒϥϦΛJS੡ͷ୅ସ࣮૷Ͱॆ౰ͯ͘͠ΕΔ • Promise΍Object.assign౳͕ແ͔ͬͨࠒͷϒϥ΢βͰ΋ɺಉ౳ ͷಈ͖Λ͢Δಉ໊ͷؔ਺/Ϟδϡʔϧ͕ଘࡏ͢ΔΑ͏ʹؤுΔ • ϒϥ΢βଆʹຊ࣮૷͕͋Δ৔߹͸ຊ࣮૷ͷํΛ࢖͏ • ͕͜͜ಘҙͳͷ͕core-js

    • @babel/preset-env Ͱྑ͍ײ͡ʹͳΔ͜ͱ͕ଟ͍
  43. Babel(presets-es2015) https://babeljs.io/repl #FGPSF "GUFS 1SPNJTF͸ղܾ͞Εͳ͍

  44. https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

  45. @babel/preset-env + core-js https://babeljs.io/repl 1SPNJTFΛάϩʔόϧείʔϓʹ ొ࿥ͯ͘͠ΕΔ1PMZpMM !CBCFMQSFTFUFOWͷVTF#VJMU*OΦϓγϣϯΛ zVTBHFzʹ͢Δ͜ͱͰɺඞཁͳ1PMZpMM͕ೖΔΑ͏ʹͳΔ

  46. padStart΋࢖͑ΔΑ

  47. core-js/modules/es.string.pad-start.js 'use strict'; var internalStringPad = require('../internals/string-pad'); var WEBKIT_BUG =

    require('../internals/webkit-string-pad-bug'); // `String.prototype.padStart` method // https://tc39.github.io/ecma262/#sec-string.prototype.padstart require(‘../internals/export') ({ target: 'String', proto: true, forced: WEBKIT_BUG }, { padStart: function padStart(maxLength /* , fillString = ' ' */) { return internalStringPad( this, maxLength, arguments.length > 1 ? arguments[1] : undefined, true); } }); https://github.com/zloirock/core-js/blob/e3b99db/packages/core-js/modules/es.string.pad-start.js
  48. 2019೥ͷJavaScriptϏϧυ • Babel / TypeScriptͰτϥϯεύΠϧ͢Δ • Webpack౳ͰґଘੑղܾΛߦ͏ • @babel/preset-envͱ͔ͰϙϦϑΟϧΛೖΕΔ Ͳ͏΍ͬͯʁ

    ʢ@babel/preset-typescriptͰBabelͰ΋τϥϯεύΠϧͰ͖ΔΑ͏ʹͳͬͨʣ
  49. தڃऀҎ্޲͚ webpack.config.jsͱ babel.config.jsͷ ॻ͖ํΛ֮͑Δ

  50. Ϗϧυ৬ਓͷே͸ૣ͍

  51. ॳڃऀ޲͚ɿ
 ͜ͷล࢖ͬͯॳظԽ͢ΔͱউखʹೖΔ • Create React App
 https://facebook.github.io/create-react-app/ • Angular CLI


    https://cli.angular.io/ • Vue CLI
 https://cli.vuejs.org/ τϥϯεύΠϧ͸ 5ZQF4DSJQUͰ࣮ݱ ઃఆϑΝΠϧΛ৮Βͤͯ΋Β͑ͳ͍έʔε΋͋Δ ৮Γͨ͘ͳͬͨΒεςοϓΞοϓͷλΠϛϯά
  52. ·ͱΊ • JavaScriptͷϏϧυ͸ॻ͘ݴޠͱಈ͘ݴޠͷဃ཭͔Β ੜ·Εͨ෼໺ • ϊϯϏϧυϞμϯJS͸·ͩ·ͩ͜Ε͔Βʢϗϯτ ͔ʁʣ • ࠓ͙͢։ൃ͢ΔͳΒʮϏϧυ͢ΔJSʯʹ׳Ε͍ͯ͜͏ •

    ͔͜͜Βઌ͸܅ͨͪͷ໨Ͱ͔֬Ίͯ͘Εʂ