上越TechMeetup #3で喋りました。なんでJavaScriptにビルドが必要なんじゃ！という方向けです。
JavaScriptϏϧυ֓2019.4.13 @Nkzn / Yukiya NakagawaJoetsu Tech Meetup
View Slide
whoami• Yukiya Nakagawa / @Nkzn ʢ32ࡀʣ ্ӽࢢग़• Υʔλʔηϧגࣜձࣾ@৽ׁࢢ ۀ͚αʔϏεʮΞάϦϊʔτʯ• AndroidΤϯδχΞˠϞόΠϧدΓJSΤϯδχΞ• ໌ٕज़ॻయͰຊചͬͯ·͢
ධൃץத
ࠓJSͷϏϧυͷΛ͠·͢
Target• JavaScriptʹͲ͏ͯ͠Ϗϧυ͕ඞཁʹͳ͍ͬͯΔͷ͔ͬ͘͠Γདྷ͍ͯͳ͍ํ
࠷ۙͷJavaScript
ϞδϡʔϧػߏͬͯେࣄͰ͢ΑͶ• ϑΝΠϧ͝ͱʹ໊લۭؒΛ͚ΒΕΔ• େ͖ͳΞϓϦέʔγϣϯΛখ͞ͳػೳͷू߹ͱͯ͠࡞Γ͘͢ͳΔಥવͰ͕͢
Plain Old JavaScript (ES5)// app.jsGreeter.greet('Bob');// greeter.jsvar Greeter = {greet: function(name) {alert("Hello, " + name + "!");}};• ϑΝΠϧؒͰ ໊લۭؒΛڞ༗• ؔʹ͔͠ είʔϓ͕ͳ͍• ΈΜͳͰ໊લͷ औΓ߹͍
20179݄• Chrome 61ͰϞδϡʔϧػߏ͕ϦϦʔε
ES6 Modules// greeter.jsconst greet = (name) => {alert(`Hello, ${name}!`);}export const Greeter = {greet,};// app.jsimport {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'VODUJPOT5FNQMBUF-JUFSBMT4IPSUIBOEQSPQFSUZOBNFT
Arrow Functionshttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Template Literals
Shorthand property nameshttps://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/replBabel(presets-es2015)ʹΑΔมṖͷάϩʔόϧมʹม͞Εͨʢ$PNNPO+4༷ͷFYQPSUػߏʣ#FGPSF "GUFS
https://babeljs.io/replBabel(presets-es2015)ʹΑΔม#FGPSF "GUFSṖͷάϩʔόϧؔʹม͞Εͨʢ$PNNPO+4༷ͷJNQPSUػߏʣ
https://babeljs.io/replBabel(presets-es2017)ʹΑΔมϒϥβʹશ෯ͷ৴པΛஔ͘߹͜ΕͰ͍͍#FGPSF "GUFS
https://babeljs.io/replBabel(presets-es2017)ʹΑΔม#FGPSF "GUFSes2017ڥͰasync/awaitΛಈ͔͍ͨ͠߹Γม͕ೖΔBTZODؔΛ͔ͭͬͯΈͨ
TypeScript(tsc)ʹΑΔม#FGPSF"GUFS※ ઃఆͰมઌͷϞδϡʔϧ༷ʢCommonJS, AMDʣΛબͰ͖Δhttps://www.typescriptlang.org/play/
ґଘੑղܾ• importߏจrequireؔͷ࣮ݱ• ΤϯτϦʔϙΠϯτʢindex.jsʣ͔ΒimportrequireͰܨ͕ͬͨϞδϡʔϧΛɺຊʹ࣮ߦͰ͖ΔΑ͏ʹ͢Δ• ࣮ߦ࣌ʹܨ͛ΔͭɿRequireJSʢAMDܗࣜΛಈ͔͢ʣ• Ϗϧυ࣌ʹܨ͛ΔͭɿWebpack/Browserify/Rollup
Webpackͷ߹@@XFCQBDL@SFRVJSF@@ͱ͍͏͕ؔϞδϡʔϧղܾΛؤுΔͻͱͭPS͍͔ͭ͘ͷ+4ϑΝΠϧʹશϑΝΠϧΛ·ͱΊΔ
Webpackͷ߹˞ FWBMͳͷσόοάதͷڍಈͰ ͋ͱͰͪΌΜͱͨ͠ίʔυʹͳΓ·͢֎෦ϥΠϒϥϦϓϩμΫτίʔυ͕SFRVJSFՄೳͳܗͰऔΓࠐ·Ε͍ͯΔ
NJOJGZVHMJGZͱ͔͍Ζ͍ΖೖͬͯϓϩμΫγϣϯڥͰ͜͏ͳΔʢ͜ͷྫUXJUUFSDPNʣ
ϙϦϑΟϧ• Γͳ͍ඪ४ϥΠϒϥϦΛJSͷସ࣮Ͱॆͯ͘͠ΕΔ• PromiseObject.assign͕ແ͔ͬͨࠒͷϒϥβͰɺಉͷಈ͖Λ͢Δಉ໊ͷؔ/Ϟδϡʔϧ͕ଘࡏ͢ΔΑ͏ʹؤுΔ• ϒϥβଆʹຊ࣮͕͋Δ߹ຊ࣮ͷํΛ͏• ͕͜͜ಘҙͳͷ͕core-js• @babel/preset-env Ͱྑ͍ײ͡ʹͳΔ͜ͱ͕ଟ͍
Babel(presets-es2015)https://babeljs.io/repl#FGPSF "GUFS1SPNJTFղܾ͞Εͳ͍
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
@babel/preset-env + core-jshttps://babeljs.io/repl1SPNJTFΛάϩʔόϧείʔϓʹొͯ͘͠ΕΔ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.padstartrequire(‘../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ʯʹ׳Ε͍ͯ͜͏• ͔͜͜Βઌ܅ͨͪͷͰ͔֬Ίͯ͘Εʂ
nkzn
amixedcolor
elainenaomi
hschwentner
ogiwarat
jrf
shumpei0111
kazamori
kdai
junk0612
taowata
tomokusaba
subomi
destraynor
samanthasiow
jeffersonlam
lauravandoore
eileencodes
bkeepers
dougneiner
tammielis
dotmariusz
cherdarchuk
jakevdp