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

whoami • Yukiya Nakagawa / @Nkzn ʢ32ࡀʣ
 ্ӽࢢग़਎ • ΢Υʔλʔηϧגࣜձࣾ@৽ׁࢢ
 ೶ۀ޲͚αʔϏεʮΞάϦϊʔτʯ • AndroidΤϯδχΞˠϞόΠϧدΓJSΤϯδχΞ • ໌೔͸ٕज़ॻయͰຊചͬͯ·͢

޷ධൃץத

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

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

࠷ۙͷJavaScript

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

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

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

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

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

ΊͰͨ͠ʂ

Ͱ͸ͳͯ͘

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

ͨͿΜಈ͖·͢ΑͶ

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

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

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

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

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

Template Literals

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

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

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

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

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

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

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

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

JavaScriptͷϏϧυ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

padStart΋࢖͑ΔΑ

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

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

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

Ϗϧυ৬ਓͷே͸ૣ͍

ॳڃऀ޲͚ɿ
 ͜ͷล࢖ͬͯॳظԽ͢ΔͱউखʹೖΔ • Create React App
 https://facebook.github.io/create-react-app/ • Angular CLI
 https://cli.angular.io/ • Vue CLI
 https://cli.vuejs.org/ τϥϯεύΠϧ͸ 5ZQF4DSJQUͰ࣮ݱ ઃఆϑΝΠϧΛ৮Βͤͯ΋Β͑ͳ͍έʔε΋͋Δ ৮Γͨ͘ͳͬͨΒεςοϓΞοϓͷλΠϛϯά

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