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

フロントエンドの基礎知識

5b166f1b11885f1b0168aa14adda7428?s=47 Go Tanaka
February 17, 2017

 フロントエンドの基礎知識

5b166f1b11885f1b0168aa14adda7428?s=128

Go Tanaka

February 17, 2017
Tweet

More Decks by Go Tanaka

Other Decks in Technology

Transcript

  1. WWW.SITE2MAX.PRO PowerPoint & KeyNote Templates ϑϩϯτΤϯυͷجૅ஌ࣝ @tan_go238

  2. Go Tanaka PHP, Java, Scala, JavaScript VagrantΑΓDocker͕޷͖ twitter: @tan_go238 ʲӡӦελοϑʳ

    ؔ੢JavaΤϯδχΞͷձ, Scalaؔ੢ Summit Freelance Engineer
  3. ࣭໰

  4. Yes No "OHVMBS΍3FBDUΛ࢓ࣄͰόϦόϦॻ͍͍ͯΔ ʢ&4΍5ZQF4DSJQUͰόϦόϦॻ͍ͯΔʣ

  5. Yes No (VMQ΍8FCQBDLΛ࢖ͬͯΔ OQNTDSJQUTͰ΋PL

  6. Yes No ͍͍ͩͨK2VFSZ௚ॻ͖ͰNJOJGZͤͣͦͷ··ϦϦʔε

  7. Yes No ຊ൪ͷ+4ͷࢀরઌ͕εςʔδϯάʹͳ͍ͬͯΔ͜ͱ͕ൃ֮

  8. ຊ୊

  9. +4ք۾ͷྲྀΕ͕ૣ͍ͷ͸ੈͷதͷྲྀΕ͕ૣ͍͍ͤʁ

  10. ࠷ۙͷ+4ք۾͸ͲΜͳײ͡ʁ http://bit.ly/2kBCSpV ೥ʹ+BWB4DSJQUΛֶͿͱ͜Μͳײ͡

  11. ࠷ۙͷ+4ք۾͸ͲΜͳײ͡ʁ σʔλͷऔಘʹK2VFSZΛ࢖ͬͯσʔλΛϖʔδ্ʹද͍ࣔͨͨ͠Μ͚ͩͲɻ K2VFSZͳΜͯ΋͏୭΋࢖͍ͬͯͳ͍ɻ3FBDUΛࢼͨ͠΄͏͕͍͍ɻ ͋͋ɺͳΔ΄Ͳɻ3FBDUͬͯԿʁ Ϗϡʔͷมߋͷ੍ޚ͕؆୯ʹͳΔ௒ΫʔϧͳϥΠϒϥϦͩɻ αʔό͔Βऔಘͨ͠σʔλΛදࣔ͢ΔͨΊʹ3FBDUΛ࢖͏͜ͱ͸Ͱ͖Δʁ ͋͋ɺͰ΋·ͣ͸3FBDUͱ3FBDU%0.ͷϥΠϒϥϦ͕ඞཁͩɻ 3FBDU͸͖ͬ͞ग़͖͚ͯͨͲɺ3FBDU%0.ͬͯʁ %0.Λૢ࡞͢ΔͨΊͷ΋ͷͩɻ+49Ͱهड़͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳΔɻ +49ʁ+49ͬͯʁ

    +49͸+BWB4DSJQUͷߏจ֦ுͰ)5.-Λ΋ͬͱྑͨ͘͠΋ͷͱߟ͑Ε͹͍͍ɻ
  12. ࠷ۙͷ+4ք۾͸ͲΜͳײ͡ʁ ͡Ό͋)5.-Ͱ͍͍͡ΌΜʁ ೥ʹ)5.-Λ௚઀ॻ͍ͯΔ΍ͭͳΜ͍ͯͳ͍ɻ ͱʹ͔͘͜ͷͭͷϥΠϒϥϦΛಋೖ͢Ε͹3FBDU͕࢖͑Δɺͱ ͪΐͬͱҧ͏ͳɻ#BCFMΛ௥Ճ͢Δඞཁ͕͋Δɻ ·ͨผͷϥΠϒϥϦʁ#BCFMͬͯԿʁ #BCFM͸τϥϯεύΠϥͩɻಛఆͷόʔδϣϯͷ+4ʹίϯύΠϧͰ͖Δɻ ܅͕·ͩ&4Λ࢖ͬͯΔͷͳΒ3FBDUΛ࢖͏ͷʹ#BCFMΛ࢖͏ඞཁ͕͋Δͬͯ͜ͱͩɻ ΄͔ͷΫʔϧΩοζୡ͸&4 Λ࢖ͬͯΔɻ

    &4ʁ&4  !
  13. ϑϩϯτΤϯυͷ͜ͱΛԿͱͳ͘Θ͔ͬͯ΋Β͏ େମͷಓے΍୯ޠ͕෼͔͍ͬͯΔͱͦͷ͋ͱͷֶश͕ཧղ͠΍͘͢ͳΓ·͢ ͳͷͰࡉ͔͍ͱ͜Ζ͸࿩͞ͳ͍Ͱͬ͘͟Γઆ໌͠·͢ ෼͔Βͳ͍୯ޠΛϝϞͨ͠Γͭͭ͠ඞཁʹͳͬͨΒؼ͔ͬͯΒௐ΂͍ͯͩ͘͞ ͜ͷൃදͷ໨త

  14. ͳͥมԽ͕ૣ͍ͷ͔ ྺ࢙ΛݟΔͱԿͱͳ͘Θ͔ͬͯ͘Δ 1. *&࣌୅ʢ೥ʙ೥ʣ 2. )5.-ຄڵظ ೥ࠒʙʣ 3. +4൙ཞظ ೥ࠒʙʣ

  15. *&࣌୅ʢ೥ʙ೥ʣ ɾϒϥ΢βಠࣗ࢓༷ ɾ$44ϋοΫ ɾK2VFSZ͕ొ৔͢Δ·Ͱʢొ৔ޙ΋ʣ*&͸ผѻ͍ ɾΨϥέʔରԠʢ%P$P.PBV4PGUCBOLʣ ɾ1$αΠτΛ࡞ΓΨϥέʔαΠτ΋ͦΕʹ߹Θ੍ͤͯ࡞

  16. )5.-ຄڵظ ೥ࠒʙʣ ɾ8)"58(ͱ8$ ɹɾ8$ͷ9)5.-ͷํ޲ੑ΁ͷٙ໰ ɹɾ8FC"QQMJDBUJPOTˠ)5.- ɹɾϒϥ΢β্ͰΞϓϦΛ࡞Δ౔୆͕Ͱ͖ͨ ɹɹɾ$BOWBT 8FC4UPSBHF WJEFP ɹɹɾϨεϙϯγϒσβΠϯʢ$44ʣ

    8$ʜ)5.-ͷ࢓༷ܾΊͯΔஂମ 8)"58(ʜ8FC)ZQFSUFYU"QQMJDBUJPO5FDIOPMPHZ8PSLJOH(SPVQ ɹɹɹɹɹɹ"QQMF .P[JMMB 0QFSBʹΑͬͯઃཱ͞Εͨ 8JLJQFEJB
  17. +4൙ཞظ ೥ࠒʙʣ ɾJ1IPOFͷొ৔ ɾ'MBTI͕ͳ͘ͳͬͨ &4׬શʹ಴࠳  ɾϞόΠϧϑΝʔετ ɾΞϓϦ։ൃ͸J04"OESPJE ɾλϒϨοτΞϓϦΛ8FCϒϥ΢βͰಈ͔͢ ɾ+4Ͱ41"ͷधཁ͕ٸ଎తʹ૿͑ͨ

    41"ʜγϯάϧϖʔδΞϓϦέʔγϣϯ &4ʜ&$."4DSJQUɻ&$."4DSJQU͸+BWB4DSJQUͷඪ४Ͱ͋Γ &DNB*OUFSOBUJPOBMͷ΋ͱͰඪ४Խखଓ͖ͳͲ͕ߦΘΕ͍ͯΔ &4ˠ&4ʢ಴࠳ʣˠ&4ˠ&4&4ͷ࢓༷ܾఆʹ೥͔͔Δ
  18. +4൙ཞظ ೥ࠒʙʣ ɾ/PEFKTͷొ৔ ೥  ɾ࠷ॳ͸଎౓໘͕஫໨͞Ε͍ͯͨ ɹɾϊϯϒϩοΩϯά*0 ɹɾΠϕϯτϧʔϓ ɾϒϥ΢βͳ͠Ͱ+4Λ࣮ߦͰ͖ΔΑ͏ʹͳΔ ɾ͔͜͜Β+4։ൃ؀ڥ͕ٸ଎ʹ੔උ͞Ε࢝ΊΔ

  19. ͦΕ·Ͱͷ+4 ೥&$."ୈ൛ʢ&4ʣ·Ͱ͸ඪ४Խ͕͏·͍͍͕ͬͯͨ͘ &4Λਪਐ͢Δ"EPCFɺ.P[JMMBͱ.4ɺ:BIPPͰҙݟ͕෼͔ΕΔɻ ࠷ऴతʹ͸'MBTIΛ࡞Δ'MFYͱ͍͏ݴޠΛ&4Ͱ࡞ͬͯͨ"EPCF͕ J1IPOFͰҰؾʹࢢ৔Λͱͬͨ"QQMFͷεςΟʔϒɾδϣϒζʹΑΓ 'MBTI͕͓๢͘ͳΓʹͳͬͨͷΛ͏͚ɺ&4΋์غ͞Εͨײ͡ʹݟ͑Δ &4Λ֦ுͨ͠΋ͷ͕&4Ͱ͞Βʹ&4ͰͰ͖ͳ͔ͬͨ&4ͱ ͱͷରཱΛจࣈ௨Γ)BSNPOFZʢௐ࿨ʣͤ͞Α͏ͱͨ͠ͷ͕&4ɻ ˞&4ͷϓϩδΣΫτίʔυ͸)BSNPOFZ

  20. ҲΕग़Δ+4ͷ࢓༷ &$."4DSJQU͸࢓༷Λࡦఆ͍͕ͯͨ͠ɺ๲Ε্͕ͬͯ͠·͍ඪ४Խ͞ ΕΔ·Ͱʹ೥͔͔ͬͯ͠·ͬͨɻͦͷͨΊϦϦʔεΑΓͣͬͱૣ͘४ උ͕Ͱ͖ͨػೳͰ΋ɺ݁ہϦϦʔεΛ଴ͨͳ͍ͱ͍͚ͳ͘ͳͬͯ͠·ͬ ͍ͯͨɻͳͷͰɺ&$."4DSJQU &4 Ͱ͸΋ͬͱසൟʹϦϦʔ εͰ͖ΔΑ͏ʹຖ೥ϦϦʔε͢Δ͜ͱʹͳͬͨɻ

  21. &4Ҏ߱ͷࡦఆϓϩηε &$."4DSJQU͔Β͸ػೳ͝ͱʹ࢓༷ͷϓϩϙʔβϧ ఏҊ Λग़͠ ࡦఆ͍ͯ͘͜͠ͱʹͳͬͨɻͦΕͧΕͷϓϩϙʔβϧʹ͸4UBHFͱݺ͹ ΕΔஈ֊ͷϥϕϧ͕ৼΒΕ͍ͯΔɻ4UBHFͱͳͬͨϓϩϙʔβϧ͸࣍ ظ&$."4DSJQUʹऔΓࠐ·Εɺਖ਼ࣜʹ&$."4DSJQUͷ࢓༷ͱͳΔɻ 4USBXNBOʜΞΠσΞ  1SPQPTBMʜఏҊɻ໨త΍ղܾํ๏Λࣔ͢

    %SBGUʜυϥϑτɻ&$."4DSJQUඪ४ͱಉ͡ߏจ΍ηϚϯςΟΫεͰهड़ $BOEJEBUFʜ࢓༷͸׬੒ͨ͠ঢ়ଶɻ࣮૷΍֎෦ͷϑΟʔυόοΫΛٻΊΔঢ়ଶ 'JOJTIFEʜ&$."4DSJQU΁औΓࠐ·ΕΔ४උ͕׬ྃͨ͜͠ͱΛࣔ͢ঢ়ଶ
  22. &4Ͱ௥Ճ͞Εͨ࢓༷ʢൈਮʣ Ξϩʔؔ਺ޠኮతͳUIJT Ϋϥε ఆ਺ʢDPOTUʣͱہॴม਺ʢMFUʣ δΣωϨʔλGPSʜPGϧʔϓ .BQ4FU ςϯϓϨʔτจࣈྻ σϑΥϧτҾ਺Մม௕Ҿ਺ ΑΓهड़͠΍͍͢௨৴ॲཧʢඇಉظʣ

  23. Ξϩʔؔ਺ Ξϩʔؔ਺ࣜ͸ɺGVODUJPOࣜͱൺ΂ͯΑΓ୹͍ߏจΛ࣋ͪɺUIJT ͷ஋Λޠኮతʹଋറ͠·͢ɻ ͨͩ͠ɺࣗ਎ͷUIJT΍BSHVNFOUT  TVQFS OFXUBSHFU͸ଋറ͠·ͤΜ ɻΞϩʔؔ਺͸ɺৗʹಗ໊ؔ ਺Ͱ͢ɻ

  24. Ξϩʔؔ਺ var a = [ "Hydrogen", "Helium", "Lithium", "BerylÂlium" ];

    // ES5 var a2 = a.map(function(s){ return s.length }); // ES2015 var a3 = a.map( s => s.length );
  25. function Person() { var self = this; self.age = 0;

    setInterval(function growUp() { self.age++; }, 1000); } ޠኮతͳUIJT &4 function Person(){ this.age = 0; setInterval(() => { this.age++; }, 1000); } &4ʢΞϩʔؔ਺͕είʔϓ಺ͷUIJTͷ஋Λัଊ͢Δʣ
  26. Ϋϥε class Animal { constructor(name) { this.name = name; }

    speak() { console.log(this.name + ' makes a noise.'); } } class Dog extends Animal { speak() { console.log(this.name + ' barks.'); } } var dog = new Dog(‘Wanko'); dog.speak(); // Wanko barks. +BWB4DSJQUʹ͢Ͱʹ͋ΔϓϩτλΠϓϕʔεܧঝͷ౶ҥߏจɻΫϥεߏ จ͸ɺ৽͍͠ΦϒδΣΫτࢦ޲ܧঝϞσϧΛ+BWB4DSJQUʹಋೖ͍ͯ͠ ΔΘ͚Ͱ͸ͳ͍ͷͰ஫ҙ͕ඞཁɻʢ˞Ϋϥε͸ʮಛผͳؔ਺ʯѻ͍ʣ
  27. ఆ਺ʢDPOTUʣͱہॴม਺ʢMFUʣ function test() { const x = 31; if (true)

    { const x = 71; console.log(x); // 71 } console.log(x); // 31 x = 32; // Error } ఆ਺ͷ஋͸ɺ࠶୅ೖʹΑΔมߋ͸Ͱ͖ͣɺ࠶એݴ΋Ͱ͖ͳ͍ɻ MFUʢޙड़ʣͱಉ͘͡ϒϩοΫείʔϓɻ ఆ਺
  28. ఆ਺ʢDPOTUʣͱہॴม਺ʢMFUʣ function test() { let x = 31; if (true)

    { let x = 71; console.log(x); // 71 } console.log(x); // 31 x = 32; console.log(x); // 32 } MFUจ͸ϒϩοΫείʔϓͷہॴม਺ΛએݴͰ͖Δɻ ೚ҙͰ஋Λ୅ೖͯ͠ॳظԽͰ͖Δɻ ہॴม਺
  29. δΣωϨʔλGPSʜPGϧʔϓ GPSJOϧʔϓ͸ɺΦϒδΣΫτͷ͢΂ͯͷFOVNFSBCMFͳϓϩύςΟ Λ൓෮͢ΔɻGPSPGߏจ͸ɺίϨΫγϣϯʹಛ༗ͳ΋ͷͰ <4ZNCPMJUFSBUPS>ϓϩύςΟΛ࣋ͭ೚ҙͷίϨΫγϣϯͷཁૉશମΛ ൓෮͢ΔɻʢGVODUJPO એݴ͸ɺδΣωϨʔλʔؔ਺Λఆٛ͢Δʣ function* fibonacci() { let

    [prev, curr] = [1, 1]; while (true) { [prev, curr] = [curr, prev + curr]; yield curr; } } for (let n of fibonacci()) { console.log(n); if (n >= 1000) { break; } }
  30. .BQ4FU var map = new Map([ ['one', '111'] ]); map.set('two',

    'aaa'); map.set('two', 'bbb'); console.log(map.get('one')); // 111 console.log(map.get('two')); // bbb console.log(map.size); // 2 console.log(map.has('one')); // true var set = new Set([1, 'one', function (){}]); set.add(2); set.add(1); // Կ΋͓͜Βͳ͍ console.log(set.has('one')); // true console.log(set.size); // 4 set.delete(1); console.log(set.size); // 3
  31. ςϯϓϨʔτจࣈྻ var name = 'John'; var country = 'Japan'; console.log(`Hello!

    My name is ${name}. I live in ${country}.`); // Hello! My name is John. I live in Japan. var today = new Date(); console.log(`Today is ${today.getFullYear()}/${today.getMonth()+1}/${today.getDate()}`); // Today is 2017/2/18
  32. σϑΥϧτҾ਺Մม௕Ҿ਺ function multiply(a, b = 1) { return a*b; }

    multiply(5); // 5 function f(x, ...y) { // y is an Array return x * y.length; } f(3, "hello", true) == 6
  33. +4ͷඇಉظॲཧ͸ඇಉظॲཧޙʹ·ͨඇಉظॲཧΛߦͬͨΓ͢Δͱɺωετ͕ ਂ͘ͳΔॻ͖ํΛ͠ͳ͚Ε͹͍͚·ͤΜͰͨ͠ɻ 1SPNJTF &4 ͷొ৔ʹΑΓ͜ͷίʔϧόοΫ஍ࠈ͔Βղ์͞Ε·ͨ͠ɻ &4Ͱ͸BTZODBXBJU͕ಋೖ͞Εɺ͔͋ͨ΋ಉظॲཧΛߦ͍ͬͯΔ͔ͷ Α͏ʹ؆ܿʹهड़Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ɻ ΑΓهड़͠΍͍͢௨৴ॲཧ &4

  34. openFile('foo.txt', (event, xhr) => { openFile('bar.txt', (event, xhr) => {

    openFile('baz.txt', (event, xhr) => { console.log('done!'); }); }); }); ίʔϧόοΫ஍ࠈ ΑΓهड़͠΍͍͢௨৴ॲཧ &4
  35. Promise var request = require('superagent') function fetch(path) { return new

    Promise( (resolve, reject) => { request.get("https://api.github.com" + path) .end((err, res) => { if (err) { reject(err); } else { resolve(JSON.parse(res.text)); } }); }); } fetch("/users/tango238") .then((obj) => { console.log(obj); return fetch("/users/tango238/repos"); }) .then((obj) => console.log(obj)) .catch(function(err) { console.error(err); }); Promise Λฦ͢ ΑΓهड़͠΍͍͢௨৴ॲཧ &4
  36. var request = require('superagent') function fetch(path) { return new Promise(

    (resolve, reject) => { request.get("https://api.github.com" + path) .end((err, res) => { if (err) { reject(err); } else { resolve(JSON.parse(res.text)); } }); }); } async function getRepos() { await fetch("/users/tango238") .then((obj) => console.log(obj)) .catch((err) => console.error(err)); await fetch("/users/tango238/repos") .then((obj) => console.log(obj)) .catch((err) => console.error(err)); } ΑΓهड़͠΍͍͢௨৴ॲཧ &4 async / await await ͸ async ͕͍ͭͨؔ਺ͷதͰ͔͠࢖͑ͳ͍
  37. &4Ͱ௥Ճ͞Εͨ࢓༷ ରԠঢ়گ http://kangax.github.io/compat-table/es6/ #BCFM͕ରԠͯ͠Ε͹·͍͍͊Μ͡Όͳ͍͔ͳΈ͍ͨͳҹ৅

  38. Α͘࢖͏πʔϧ ύοέʔδϚωʔδϟ λεΫϥϯφʔ ϞδϡʔϧγεςϜ

  39. ύοέʔδϚωʔδϟ ϓϩδΣΫτʹඞཁͳϥΠϒϥϦͷ໊લ΍όʔδϣϯ͕هࡌ͞ΕͨϑΝΠϧ͔Βɺ ґଘϥΠϒϥϦΛࣗಈతʹΠϯετʔϧͰ͖Δπʔϧɻ OQN΍ZBSOͰ͸QBDLBHFKTPOʹهड़͢Δɻ QBDLBHFKTPO͸.BWFOͷQPNYNMΈ͍ͨͳ΋ͷɻʢCPXFS͸CPXFSKTPOʣ

  40. OQN /PEFKTͰ࢖͏ύοέʔδϚωʔδϟɻඪ४ͩͱࢥ͑͹͍͍ɻ #PXFS +BWB4DSJQU $44 )5.-ͳͲΛґଘؔ܎ΛؚΊͯ؅ཧͯ͘͠ΕΔɺϑϩϯτΤϯυ༻ ύοέʔδϚωʔδϟɻOQNͱ#SPXTFSJGZ ޙड़ ͕͋Ε͹ඞཁͳ͍ͷͰඍົͳཱͪ Ґஔɻ

    ࠷ۙݟ͔͚ͳ͍ɻ5XJUUFS੡ɻ ZBSO QBDLBHFKTPO͕ͦͷ··࢖͑ΔɻZBSOMPDL͕ੜ੒͞ΕΔɻ͜Ε͸OQNͷ TISJOLXSBQʹ૬౰͢ΔػೳͰύοέʔδͷόʔδϣϯ͕ݻఆͰ͖Δɻ ϞδϡʔϧͷΠϯετʔϧ͕଎͍ɻ'BDFCPPL੡ɻ w ύοέʔδϚωʔδϟ
  41. NJOJGZ ѹॖ ΍ෳ਺ͷ+4ϑΝΠϧͷ݁߹ɺ୯ମςετͷ࣮ߦɺ+4-JOUͷνΣοΫɺ $P⒎FF4DSJQU΍5ZQF4DSJQUͷίϯύΠϧʢ+4΁ม׵ʣɺ4BTT΍-&44ͷίϯ ύΠϧʢ$44΁ม׵ʣͳͲ༷ʑͳλεΫΛ؆୯ʹ࣮ߦ͢ΔͨΊͷπʔϧɻ .BLF "OU .BWFO (SBEMFͷΑ͏ͳ΋ͷɻ λεΫϥϯφʔ

  42. (SVOU ࠷ॳʹྲྀߦͬͨλεΫϥϯφʔɻ +40/ܗࣜͰύϥϝʔλʔΛࢦఆ͍ͯ͘͠ͷ͕࢖͍ʹ͍͘ɻ (VMQ ͦͷ࣍ʹྲྀߦͬͨλεΫϥϯφʔɻγϯϓϧʹهड़Ͱ͖Δɻ ฒྻ࣮ߦ͞ΕΔͨΊ଎͍ɻ OQNTDSJQUT QBDLBHFKTPOͷlTDSJQUTzʹεΫϦϓτΛॻ͍͓ͯ͘ͱOQNSVOͰ࣮ߦͰ͖Δɻ XFCQBDL ϞδϡʔϧόϯυϥʔͳͷͰҰൠతʹݴΘΕΔλεΫϥϯφʔͱ͸ҧ͏ɻ

    ෳ਺ͷϞδϡʔϧΛ·ͱΊΔͱ͍͏λεΫΛઐ໳ʹ͍ͯ͠Δɻ λεΫϥϯφʔ
  43. CommonJS / Browserify / AMD / RequireJS / webpack $PNNPO+4

    $PNNPO+4ͱ͍͏ϓϩδΣΫτɻ+4Ͱ։ൃ͢ΔͨΊͷඪ४తͳ"1*ͷ࢓༷ΛఆΊ Δɻ .PEVMFͱ1SPNJTFʹ͍ͭͯ͸ɺ&4Ͱඪ४ن͕֨ఆΊΒΕ͍ͯΔɻ #SPXTFSJGZ $PNNPO+4ͷϞδϡʔϧ࢓༷ʹԊͬͯॻ͍ͨ+BWB4DSJQUΛϒϥ΢β্Ͱಈ͔ͤΔ Α͏ʹͨ͠ϞδϡʔϧγεςϜɻ Ϟδϡʔϧ
  44. CommonJS / Browserify / AMD / RequireJS / webpack ".%

    "TZODISPOPVT.PEVMF%FpOJUJPOͷུɻϞδϡʔϧΛඇಉظͰϩʔυ͢Δ࢓૊Έ ΍ఆٛͱ͍ͬͨ"1*ͷ࢓༷Λࢦ͢ɻ 3FRVJSF+4 ".%Λϒϥ΢β্Ͱಈ͔ͤΔΑ͏ʹͨ͠ϞδϡʔϧγεςϜɻ XFCQBDL ޙൃͷϞδϡʔϧόϯυϥʔɻ$PNNPO+4ɺ".%ɺ&4ͷܗ͕ࣜ࢖͑Δɻ Ϟδϡʔϧ
  45. σϞ Gulp + Browserify + Babel + async/await (ES2017) https://github.com/tango238/js-sample

  46. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ