JavaScriptビルド概論

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

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 4IPSUIBOE
    QSPQFSUZ
    OBNFT
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ʯʹ׳Ε͍ͯ͜͏ • ͔͜͜Βઌ͸܅ͨͪͷ໨Ͱ͔֬Ίͯ͘Εʂ