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

JavaScriptビルド概論

 JavaScriptビルド概論

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

Yukiya Nakagawa

April 13, 2019
Tweet

More Decks by Yukiya Nakagawa

Other Decks in Programming

Transcript

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

    View Slide

  2. whoami
    • Yukiya Nakagawa / @Nkzn ʢ32ࡀʣ

    ্ӽࢢग़਎
    • ΢Υʔλʔηϧגࣜձࣾ@৽ׁࢢ

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

    View Slide

  3. ޷ධൃץத

    View Slide

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

    View Slide

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

    View Slide

  6. ࠷ۙͷJavaScript

    View Slide

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

    View Slide




  8. Plain Old JavaScript (ES5)
    // app.js
    Greeter.greet('Bob');
    // greeter.js
    var Greeter = {
    greet: function(name) {
    alert("Hello, " + name + "!");
    }
    };
    • ϑΝΠϧؒͰ

    ໊લۭؒΛڞ༗
    • ؔ਺಺ʹ͔͠

    είʔϓ͕ͳ͍
    • ΈΜͳͰ໊લͷ

    औΓ߹͍

    View Slide

  9. 2017೥9݄
    • Chrome 61ͰϞδϡʔϧػߏ͕ϦϦʔε

    View Slide

  10. ES6 Modules


    // 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ͨ͠ϞδϡʔϧΛ૊Έ߹Θͤͯ
    ػೳΛ࡞ΕΔ

    View Slide

  11. େମͷ࠷৽ϒϥ΢βͰಈ͘
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

    View Slide

  12. ΊͰͨ͠ʂ

    View Slide

  13. Ͱ͸ͳͯ͘

    View Slide

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

    View Slide

  15. ͨͿΜಈ͖·͢ΑͶ

    View Slide

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

    View Slide


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

    View Slide

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

    View Slide

  19. const greet = (name) => {
    alert(`Hello, ${name}!`);
    }
    export const Greeter = {
    greet,
    };
    "SSPX'VODUJPOT
    5FNQMBUF-JUFSBMT
    4IPSUIBOEQSPQFSUZOBNFT

    View Slide

  20. Arrow Functions
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

    View Slide

  21. Template Literals

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. ES201xͰॻ͍ͨίʔυΛ
    ES5͔͠ಈ͔ͳ͍ϒϥ΢βͰ
    ಈ͔͍ͨ͠

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. JavaScriptͷϏϧυ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. Webpackͷ৔߹
    ˞ FWBMͳͷ͸σόοάதͷڍಈͰ

    ͋ͱͰͪΌΜͱͨ͠ίʔυʹͳΓ·͢
    ֎෦ϥΠϒϥϦ΍ϓϩμΫτίʔυ͕
    SFRVJSFՄೳͳܗͰऔΓࠐ·Ε͍ͯΔ

    View Slide

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

    View Slide

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

    View Slide

  43. Babel(presets-es2015)
    https://babeljs.io/repl
    #FGPSF "GUFS
    1SPNJTF͸ղܾ͞Εͳ͍

    View Slide

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

    View Slide

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

    View Slide

  46. padStart΋࢖͑ΔΑ

    View Slide

  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

    View Slide

  48. 2019೥ͷJavaScriptϏϧυ
    • Babel / TypeScriptͰτϥϯεύΠϧ͢Δ
    • Webpack౳ͰґଘੑղܾΛߦ͏
    • @babel/preset-envͱ͔ͰϙϦϑΟϧΛೖΕΔ
    Ͳ͏΍ͬͯʁ
    ʢ@babel/preset-typescriptͰBabelͰ΋τϥϯεύΠϧͰ͖ΔΑ͏ʹͳͬͨʣ

    View Slide

  49. தڃऀҎ্޲͚
    webpack.config.jsͱ
    babel.config.jsͷ
    ॻ͖ํΛ֮͑Δ

    View Slide


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

    View Slide

  51. ॳڃऀ޲͚ɿ

    ͜ͷล࢖ͬͯॳظԽ͢ΔͱউखʹೖΔ
    • Create React App

    https://facebook.github.io/create-react-app/
    • Angular CLI

    https://cli.angular.io/
    • Vue CLI

    https://cli.vuejs.org/
    τϥϯεύΠϧ͸
    5ZQF4DSJQUͰ࣮ݱ
    ઃఆϑΝΠϧΛ৮Βͤͯ΋Β͑ͳ͍έʔε΋͋Δ
    ৮Γͨ͘ͳͬͨΒεςοϓΞοϓͷλΠϛϯά

    View Slide

  52. ·ͱΊ
    • JavaScriptͷϏϧυ͸ॻ͘ݴޠͱಈ͘ݴޠͷဃ཭͔Β
    ੜ·Εͨ෼໺
    • ϊϯϏϧυϞμϯJS͸·ͩ·ͩ͜Ε͔Βʢϗϯτ
    ͔ʁʣ
    • ࠓ͙͢։ൃ͢ΔͳΒʮϏϧυ͢ΔJSʯʹ׳Ε͍ͯ͜͏
    • ͔͜͜Βઌ͸܅ͨͪͷ໨Ͱ͔֬Ίͯ͘Εʂ

    View Slide