Snowpack で始めるバンドルレス開発 / about Snowpack

Meguro.es #25 @ Fringe81 on 2020/02/06 の LT 用スライドです。

Transcript

1. 4OPXQBDLͰ࢝ΊΔόϯυϧϨε։ൃ
   !OBCFMJXPNFHVSPFT
   

   View Slide

2. ࣗݾ঺հ
   

   View Slide

3. OBCFMJXP
   wϑϩϯτΤϯυΤϯδχΞ
   wגࣜձࣾ4NBSU)3
   w5ZQF4DSJQU3FBDU3FEVY
   w41"େ޷͖
   w࠷ۙ͸झຯͰ6OJUZ΍ͬͯΔ
   

   View Slide

4. ࠓ೔࿩͢͜ͱ
   

   View Slide

5. 4OPXQBDL
   ͱ͍͏πʔϧͷྑ͞Λ
   ఻͑ʹདྷ·ͨ͠ʂʂ
   

   View Slide

6. (FU4UBSUFE
   4OPXQBDLPO3FBM8PSME
   4OPXQBDL͕࢖͑ͳ͍ͱ͖
   
   
   
   4OPXQBDLͱ͸
   1JLBͷ࿩
   
   

   View Slide

7. 4OPXQBDLͱ͸
   

   View Slide

8. 4OPXQBDL
   w8FCQBDLͳͲͷϞδϡʔϧόϯυϥΛඞཁͱ͠ͳ
   ͍։ൃΛఏڙ͢Δπʔϧ
   w&4.PEVMFTΛલఏͱ͢Δ
   wґଘ௥Ճ࣌ʹҰ౓4OPXQBDLΛ࣮ߦ͢Δ͚ͩ
   w͋ͱ͸શͯϒϥ΢βωΠςΟϒͰಈ͘
   wIUUQTHJUIVCDPNQJLBQLHTOPXQBDL
   

   View Slide

9. ྑ͍ͱ͜Ζ
   w։ൃΛ࢝ΊΒΕΔ·Ͱ͕ૣ͍
   wXFCQBDLDPOpHKT͔Βͷղ์
   wґଘϥΠϒϥϦ͕શͯผϑΝΠϧͰಡ·ΕΔͷͰ
   Ωϟογϡʹ৐Γ΍͍͢
   w)551 )551ͰͷฒྻಡΈࠐΈͰڧ͍
   w8FCඪ४ʹ৐ͬͨͱ͍͏خ͠͞
   

   View Slide

10. (FU4UBSUFE
    

    View Slide

11. ґଘΛΠϯετʔϧͯ͠TOPXQBDLΛ࣮ߦ͢Δͱ
    XFC@NPEVMFTσΟϨΫτϦ͕ੜ੒͞ΕΔ
    

    View Slide

12. XFC@NPEVMFTͷத਎
    

    View Slide

13. +4ϑΝΠϧΛ༻ҙ͢Δ
    ϥΠϒϥϦͷύε͕XFC@NPEVMFTIPHFKT
    ʹͳ͍ͬͯΔ
    

    View Slide

14. )5.-Λ༻ҙ͢Δ
    UZQFNPEVMFͰ͖ͬ͞࡞ͬͨ+4ΛಡΉ
    

    View Slide

15. ϩʔΧϧαʔόʔΛཱͯΔ
    

    View Slide

16. ಈ͍ͨʂ
    ϥΠϒϥϦ͝ͱʹಡΈࠐ·Ε͍ͯΔ
    

    View Slide

17. ͜Ε͚ͩͰ΋͏ΞϓϦέʔγϣϯΛ
    ࡞Γ࢝ΊΒΕΔ
    

    View Slide

18. 4OPXQBDLPO3FBM8PSME
    

    View Slide

19. ϓϩμΫτ։ൃΛ8FCQBDL͔Β
    ஔ͖׵͑ΒΕΔͷ͔
    

    View Slide

20. 2&4.PEVMFTͩͱ*&Ͱ࢖͑ͳ͘ͳ͍ʁ
    

    View Slide

21. "ͦ͏ͩͶɻͰ΋େৎ෉ʂʂ
    

    View Slide

22. ϨΨγʔϒϥ΢β༻ͷϏϧυ͕Ͱ͖·͢
    

    View Slide

23. 25ZQF4DSJQU3FBDU࢖͑Δʁ
    τϥϯεύΠϧඞਢͩΑͶʜ
    
    

    View Slide

24. "ͪΐͬͱؤுΕ͹࢖͑Δʂ
    

    View Slide

25. ೉͍͠ϙΠϯτ
    w3FBDU͸&4.PEVMFTରԠ͍ͯ͠ͳ͍
    wτϥϯεύΠϧΛ͠ͳ͍ͱ͍͚ͳ͍
    wJNQPSU3FBDUGSPNXFC@NPEVMFTSFBDUKT
    w͜ΕͩͱܕϑΝΠϧ͕ಡ·Εͳ͍
    

    View Slide

26. 3FBDU͸&4.PEVMFTରԠ͍ͯ͠ͳ͍
    

    View Slide

27. ͜ΕΛ࢖͏ʜ
    UIBOLTUP!TEFHVUJT`T!SFBDUFTNQSPKFDU
    

    View Slide

28. τϥϯεύΠϧΛ͠ͳ͍ͱ͍͚ͳ͍
    όϕΓ·͠ΐ͏
    

    View Slide

29. JNQPSU3FBDUGSPNXFC@NPEVMFTSFBDUKT
    ͩͱܕϑΝΠϧ͕ಡ·Εͳ͍
    UTDPOpHKTPOͰ͝ʹΐ͝ʹΐ
    ͢Ε͹͍͚ͳ͘΋ͳ͍͚Ͳʜ
    ͪΐͬͱΊΜͲ͍͘͞
    

    View Slide

30. 4OPXQBDLͷ#BCFMϓϥάΠϯΛ࢖͏
    τϥϯεύΠϧ࣌ʹSFBDUΛ
    XFC@NPEVMFTSFBDUKTʹม׵ͯ͘͠ΕΔ
    

    View Slide

31. ͜ΕͰ͍ͭ΋௨Γ։ൃͰ͖Δʂʂ
    

    View Slide

32. 4OPXQBDL͕࢖͑ͳ͍ͱ͖
    

    View Slide

33. 4OPXQBDL͕࢖͑ͳ͍ͱ͖
    w$44΍ը૾Λ+BWB4DSJQU͔Β௚઀ಡΈ͍ͨ
    w8FCQBDLͰDTTMPBEFS΍JNBHFMPBEFSΛ
    ࢖͍ͬͯΔ
    w&4.PEVMFTʹରԠ͍ͯ͠ͳ͍ϥΠϒϥϦΛ࢖༻͠
    ͍ͯΔ
    

    View Slide

34. 1JLBͷ࿩
    

    View Slide

35. View Slide

36. 1JLBπʔϧνΣΠϯ
    w/1.1BDLBHF$%/
    w/1.1BDLBHF$BUBMPH
    w4OPXQBDL
    w1BDLBHF$PEF&EJUPS
    w1BDLBHF$PNNVOJUJFT
    w!QJLBQBDL
    

    View Slide

37. ௥͍͔͚ΔͱϫΫϫΫͰ͖Δ͔΋
    

    View Slide

38. ·ͱΊ
    

    View Slide

39. w4OPXQBDLʹΑͬͯ8FCඪ४ʹ৐্ͬͨͰߴ଎
    ͳ։ൃ͕Ͱ͖ΔΑ͏ʹͳΔ
    wݱঢ়8FCQBDLΛ࢖ͬͯ࡞ΒΕͯӡ༻͞Ε͍ͯΔ
    ϓϩμΫτ͔Βஔ͖׵͑ΒΕΔ͔ͱݴ͏ͱجຊతʹ
    ͸೉͍͠
    wͱ͸͍͑࢖͍͔ͬͯͳ͍ͱπʔϧ͸ҭͨͳ͍ΑͶ
    

    View Slide

40. ΈΜͳ4OPXQBDL࢖ͬͯΈΑ͏ʂʂ
    

    View Slide

41. ৄ͍͠಺༰Λ2JJUBʹ·ͱΊ͍ͯ·͢
    4OPXQBDLͰ࣮ݱ͢ΔະདྷͷϑϩϯτΤϯυ։ൃ
    IUUQTRJJUBDPNOBCFMJXPJUFNTDDGDDFEECD
    

    View Slide

42. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ
    4NBSU)3ΤϯδχΞืूͯ͠·͢ Ϙιο
    

    View Slide