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

Transcript

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

   View Slide

2. Go Tanaka
   PHP, Java, Scala, JavaScript
   VagrantΑΓDocker͕޷͖
   twitter: @tan_go238
   ʲӡӦελοϑʳ
   ؔ੢JavaΤϯδχΞͷձ, Scalaؔ੢ Summit
   Freelance Engineer
   

   View Slide

3. ࣭໰
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. ຊ୊
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    
    

    View Slide

17. +4൙ཞظ ೥ࠒʙʣ
    ɾJ1IPOFͷొ৔
    ɾ'MBTI͕ͳ͘ͳͬͨ &4׬શʹ಴࠳
    
    ɾϞόΠϧϑΝʔετ
    ɾΞϓϦ։ൃ͸J04"OESPJE
    ɾλϒϨοτΞϓϦΛ8FCϒϥ΢βͰಈ͔͢
    ɾ+4Ͱ41"ͷधཁ͕ٸ଎తʹ૿͑ͨ
    41"ʜγϯάϧϖʔδΞϓϦέʔγϣϯ
    &4ʜ&$."4DSJQUɻ&$."4DSJQU͸+BWB4DSJQUͷඪ४Ͱ͋Γ
    &DNB*OUFSOBUJPOBMͷ΋ͱͰඪ४Խखଓ͖ͳͲ͕ߦΘΕ͍ͯΔ
    &4ˠ&4ʢ಴࠳ʣˠ&4ˠ&4&4ͷ࢓༷ܾఆʹ೥͔͔Δ
    

    View Slide

18. +4൙ཞظ ೥ࠒʙʣ
    ɾ/PEFKTͷొ৔ ೥
    
    ɾ࠷ॳ͸଎౓໘͕஫໨͞Ε͍ͯͨ
    ɹɾϊϯϒϩοΩϯά*0
    ɹɾΠϕϯτϧʔϓ
    ɾϒϥ΢βͳ͠Ͱ+4Λ࣮ߦͰ͖ΔΑ͏ʹͳΔ
    ɾ͔͜͜Β+4։ൃ؀ڥ͕ٸ଎ʹ੔උ͞Ε࢝ΊΔ
    

    View Slide

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
    

    View Slide

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

    View Slide

21. &4Ҏ߱ͷࡦఆϓϩηε
    &$."4DSJQU͔Β͸ػೳ͝ͱʹ࢓༷ͷϓϩϙʔβϧ ఏҊ
    Λग़͠
    ࡦఆ͍ͯ͘͜͠ͱʹͳͬͨɻͦΕͧΕͷϓϩϙʔβϧʹ͸4UBHFͱݺ͹
    ΕΔஈ֊ͷϥϕϧ͕ৼΒΕ͍ͯΔɻ4UBHFͱͳͬͨϓϩϙʔβϧ͸࣍
    ظ&$."4DSJQUʹऔΓࠐ·Εɺਖ਼ࣜʹ&$."4DSJQUͷ࢓༷ͱͳΔɻ
    4USBXNBOʜΞΠσΞ
    1SPQPTBMʜఏҊɻ໨త΍ղܾํ๏Λࣔ͢
    %SBGUʜυϥϑτɻ&$."4DSJQUඪ४ͱಉ͡ߏจ΍ηϚϯςΟΫεͰهड़
    $BOEJEBUFʜ࢓༷͸׬੒ͨ͠ঢ়ଶɻ࣮૷΍֎෦ͷϑΟʔυόοΫΛٻΊΔঢ়ଶ
    'JOJTIFEʜ&$."4DSJQU΁औΓࠐ·ΕΔ४උ͕׬ྃͨ͜͠ͱΛࣔ͢ঢ়ଶ
    

    View Slide

22. &4Ͱ௥Ճ͞Εͨ࢓༷ʢൈਮʣ
    Ξϩʔؔ਺ޠኮతͳUIJT
    Ϋϥε
    ఆ਺ʢDPOTUʣͱہॴม਺ʢMFUʣ
    δΣωϨʔλGPSʜPGϧʔϓ
    .BQ4FU
    ςϯϓϨʔτจࣈྻ
    σϑΥϧτҾ਺Մม௕Ҿ਺
    ΑΓهड़͠΍͍͢௨৴ॲཧʢඇಉظʣ
    

    View Slide

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

    View Slide

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 );
    

    View Slide

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ͷ஋Λัଊ͢Δʣ
    

    View Slide

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ʹಋೖ͍ͯ͠
    ΔΘ͚Ͱ͸ͳ͍ͷͰ஫ҙ͕ඞཁɻʢ˞Ϋϥε͸ʮಛผͳؔ਺ʯѻ͍ʣ
    

    View Slide

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ʢޙड़ʣͱಉ͘͡ϒϩοΫείʔϓɻ
    ఆ਺
    

    View Slide

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จ͸ϒϩοΫείʔϓͷہॴม਺ΛએݴͰ͖Δɻ
    ೚ҙͰ஋Λ୅ೖͯ͠ॳظԽͰ͖Δɻ
    ہॴม਺
    

    View Slide

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;
    }
    }
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

33. +4ͷඇಉظॲཧ͸ඇಉظॲཧޙʹ·ͨඇಉظॲཧΛߦͬͨΓ͢Δͱɺωετ͕
    ਂ͘ͳΔॻ͖ํΛ͠ͳ͚Ε͹͍͚·ͤΜͰͨ͠ɻ
    1SPNJTF &4
    ͷొ৔ʹΑΓ͜ͷίʔϧόοΫ஍ࠈ͔Βղ์͞Ε·ͨ͠ɻ
    &4Ͱ͸BTZODBXBJU͕ಋೖ͞Εɺ͔͋ͨ΋ಉظॲཧΛߦ͍ͬͯΔ͔ͷ
    Α͏ʹ؆ܿʹهड़Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ɻ
    ΑΓهड़͠΍͍͢௨৴ॲཧ &4
    
    

    View Slide

34. openFile('foo.txt', (event, xhr) => {
    openFile('bar.txt', (event, xhr) => {
    openFile('baz.txt', (event, xhr) => {
    console.log('done!');
    });
    });
    });
    ίʔϧόοΫ஍ࠈ
    ΑΓهड़͠΍͍͢௨৴ॲཧ &4
    
    

    View Slide

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
    
    

    View Slide

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 ͕͍ͭͨؔ਺ͷதͰ͔͠࢖͑ͳ͍
    

    View Slide

37. &4Ͱ௥Ճ͞Εͨ࢓༷
    ରԠঢ়گ
    http://kangax.github.io/compat-table/es6/
    #BCFM͕ରԠͯ͠Ε͹·͍͍͊Μ͡Όͳ͍͔ͳΈ͍ͨͳҹ৅
    

    View Slide

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

    View Slide

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

    View Slide

40. OQN
    /PEFKTͰ࢖͏ύοέʔδϚωʔδϟɻඪ४ͩͱࢥ͑͹͍͍ɻ
    #PXFS
    +BWB4DSJQU $44 )5.-ͳͲΛґଘؔ܎ΛؚΊͯ؅ཧͯ͘͠ΕΔɺϑϩϯτΤϯυ༻
    ύοέʔδϚωʔδϟɻOQNͱ#SPXTFSJGZ ޙड़
    ͕͋Ε͹ඞཁͳ͍ͷͰඍົͳཱͪ
    Ґஔɻ
    ࠷ۙݟ͔͚ͳ͍ɻ5XJUUFS੡ɻ
    ZBSO
    QBDLBHFKTPO͕ͦͷ··࢖͑ΔɻZBSOMPDL͕ੜ੒͞ΕΔɻ͜Ε͸OQNͷ
    TISJOLXSBQʹ૬౰͢ΔػೳͰύοέʔδͷόʔδϣϯ͕ݻఆͰ͖Δɻ
    ϞδϡʔϧͷΠϯετʔϧ͕଎͍ɻ'BDFCPPL੡ɻ
    w
    ύοέʔδϚωʔδϟ
    

    View Slide

41. NJOJGZ ѹॖ
    ΍ෳ਺ͷ+4ϑΝΠϧͷ݁߹ɺ୯ମςετͷ࣮ߦɺ+4-JOUͷνΣοΫɺ
    $P⒎FF4DSJQU΍5ZQF4DSJQUͷίϯύΠϧʢ+4΁ม׵ʣɺ4BTT΍-&44ͷίϯ
    ύΠϧʢ$44΁ม׵ʣͳͲ༷ʑͳλεΫΛ؆୯ʹ࣮ߦ͢ΔͨΊͷπʔϧɻ
    .BLF "OU .BWFO (SBEMFͷΑ͏ͳ΋ͷɻ
    λεΫϥϯφʔ
    

    View Slide

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

    View Slide

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

    View Slide

44. CommonJS / Browserify / AMD / RequireJS / webpack
    ".%
    "TZODISPOPVT.PEVMF%FpOJUJPOͷུɻϞδϡʔϧΛඇಉظͰϩʔυ͢Δ࢓૊Έ
    ΍ఆٛͱ͍ͬͨ"1*ͷ࢓༷Λࢦ͢ɻ
    3FRVJSF+4
    ".%Λϒϥ΢β্Ͱಈ͔ͤΔΑ͏ʹͨ͠ϞδϡʔϧγεςϜɻ
    XFCQBDL
    ޙൃͷϞδϡʔϧόϯυϥʔɻ$PNNPO+4ɺ".%ɺ&4ͷܗ͕ࣜ࢖͑Δɻ
    Ϟδϡʔϧ
    

    View Slide

45. σϞ
    Gulp + Browserify + Babel + async/await (ES2017)
    https://github.com/tango238/js-sample
    

    View Slide

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

    View Slide