フロントエンドのエコシステム / Frontend Ecosystem

チャリティーカンファレンス沖縄2020 フロントエンド編の資料です。
https://charity-conf.okinawa.jp/

Transcript

1. ϑϩϯτΤϯυͷΤίγεςϜ
   αΠϘ΢ζגࣜձࣾ
   5PTIJIJTB5PNBUTV
   νϟϦςΟΧϯϑΝϨϯεԭೄ7PM'SPOUFOE
   

   View Slide

2. ֎দढ़ঘ 5PTIJIJTB5PNBUTV
   
   αΠϘ΢ζגࣜձࣾ
   'SPOUFOE&YQFSU5FBN
   ౦ژˠѪඤ
   !UPTIJUPNB
   !UPTIJ@@UPNB
   

   View Slide

3. ΤίγεςϜ
   

   View Slide

4. ʁ
   ʁ
   ΋͠ΤίγεςϜͷج൫͕ແ͔ͬͨΒʁ
   

   View Slide

5. έʔε
   ϓϩμΫτͰͷྫ
   

   View Slide

6. Hex
   #1F1F1F
   αΠϘ΢ζ͕ఏڙ͢ΔLJOUPOF
   w ΤίγεςϜ͕ॏཁͳϓϩμΫτ
   w LJOUPOF͕3&45"1*΍+4"1*Λఏڙ͓ͯ͠Γɺ
   +BWB4DSJQUͰΧελϚΠζ͕Մೳ
   w ༷ʑͳ࿈ܞαʔϏε΍ϓϥάΠϯ͕શࠃ֤஍Ͱൢചɾ։ൃ
   ͞ΕɺΤίγεςϜ͕޿͕͍ͬͯΔ
   

   View Slide

7. Ϣʔβʔ͕+BWB4DSJQU΍$44Λ
   ॻ͖ɺϓϥάΠϯΛ։ൃͰ͖Δʂ
   

   View Slide

8. ΋͠ΤίγεςϜ͕ແ͔ͬͨΒʁ
   

   View Slide

9. ΋͠ΤίγεςϜ͕ແ͔ͬͨΒʁ
   શͯϓϩμΫτଆͰػೳΛ࣮૷͠ͳ͍ͱ
   

   View Slide

10. ΋͠ΤίγεςϜ͕ແ͔ͬͨΒʁ
    શͯϓϩμΫτଆͰػೳΛ࣮૷͠ͳ͍ͱ
    ͜ͷϢʔεέʔεΛຬ͍ͨͨ͠
    

    View Slide

11. ΋͠ΤίγεςϜ͕ແ͔ͬͨΒʁ
    શͯϓϩμΫτଆͰػೳΛ࣮૷͠ͳ͍ͱ
    ͜ͷϢʔεέʔεΛຬ͍ͨͨ͠
    Ͱ΋ɺͦΕ͸ϓϩμΫτͷํ਑ͱҧ͏͠
    

    View Slide

12. έʔε
    ϥΠϒϥϦͰͷྫ
    

    View Slide

13. ʮ-JOUͰɺ৽͘͠ʓʓͳίʔυ΋νΣοΫ͍ͨ͠ʯ
    

    View Slide

14. ʮ-JOUͰɺ৽͘͠ʓʓͳίʔυ΋νΣοΫ͍ͨ͠ʯ
    &4-JOUʹ13Λ౤͛Δ͔͠ʜ
    

    View Slide

15. &4-JOUʹ13Λ౤͛Δ͔͠ʜ
    &4-JOU͸ϧʔϧΛࣗ࡞Ͱ͖ΔΑʂ
    ʮ-JOUͰɺ৽͘͠ʓʓͳίʔυ΋νΣοΫ͍ͨ͠ʯ
    

    View Slide

16. &4-JOUʹ13Λ౤͛Δ͔͠ʜ
    &4-JOU͸ϧʔϧΛࣗ࡞Ͱ͖ΔΑʂ
    ஌Βͳ͔ͬͨʂͦΕͳΒ؆୯ͩ
    ʮ-JOUͰɺ৽͘͠ʓʓͳίʔυ΋νΣοΫ͍ͨ͠ʯ
    

    View Slide

17. ʮ-JOUͰɺ৽͘͠ʓʓͳίʔυ΋νΣοΫ͍ͨ͠ʯ
    &4-JOUʹ13Λ౤͛Δ͔͠ʜ
    &4-JOU͸ϧʔϧΛࣗ࡞Ͱ͖ΔΑʂ
    ஌Βͳ͔ͬͨʂͦΕͳΒ؆୯ͩ
    ΤίγεςϜʹΑΓ
    ɾཁٻʹૉૣ͘ରԠͰ͖Δ
    ɾ༷ʑͳϢʔεέʔεʹରԠͰ͖Δ
    

    View Slide

18. ϑϩϯτΤϯυͷ༷ʑͳ
    ΤίγεςϜʹ͍ͭͯ஌Δ͜ͱͰ
    ࠓޙͷ։ൃͰɺͦͷԸܙΛड͚ΒΕΔΑ͏ʹ
    

    View Slide

19. Hex
    #1F1F1F
    ϑϩϯτΤϯυͷΤίγεςϜ͸ʁ
    w 8FCΞϓϦΛ։ൃ͢Δࡍ
    w OQNΛϕʔεʹ༷ʑͳϥΠϒϥϦΛ׆༻
    w ϥΠϒϥϦΛར༻͢Δࡍ
    w QMVHJO QSFTFU BEEPO DPOpHͳͲΛ༗ࢤͷ։ൃऀ͕
    ։ൃͯ͠ڞ༗ɾར༻
    

    View Slide

20. Hex
    #1F1F1F
    ϑϩϯτΤϯυΤίγεςϜͷϕʔεʹͳΔ΋ͷ
    OQN
    ։ൃ
    ίϛϡχςΟ
    044
    

    View Slide

21. Hex
    #1F1F1F
    ϑϩϯτΤϯυΤίγεςϜͷϕʔεʹͳΔ΋ͷ
    OQN
    ։ൃ
    ίϛϡχςΟ
    044
    ϑϩϯτΤϯυͰ͸ͲΜͳΤίγεςϜ͕
    ҭ͍ͬͯΔΜͩΖ͏
    

    View Slide

22. ͭͷΤίγεςϜ
    OQNΤίγεςϜ
    1MVHJOΤίγεςϜ
    $POpHΤίγεςϜ
    5ZQFΤίγεςϜ
    
    
    
    
    

    View Slide

23. OQNΤίγεςϜ
    
    

    View Slide

24. Hex
    #1F1F1F
    OQN
    w /PEF1BDLBHF.BOBHFS

    /PEFKTͷύοέʔδΛ؅ཧ͢Δ
    w ϨδετϦ IUUQTXXXOQNKTDPN
    
    w ศརͳύοέʔδΛOQN ϨδετϦ
    ʹஔ͍ͯɺOQN
    ͷ$-* OQNJOTUBMM
    ͰΈΜͳ͕ར༻Ͱ͖Δ
    

    View Slide

25. Hex
    #1F1F1F
    3FBDU
    3FEVY
    XFCQBDL
    #BCFM
    +FTU
    1SFUUJFS
    &4-JOU
    TUZMFEDPNQPOFUT
    5ZQF4DSJQU
    ʁ
    ʁ
    ྫ͑͹3FBDUͰ8FCΞϓϦΛ։ൃ͢Δ࣌
    SFBDUSPVUFS
    'PSNJL
    BYJPT
    

    View Slide

26. Hex
    #1F1F1F
    BYJPT
    
    3FBDU
    3FEVY
    XFCQBDL
    #BCFM
    +FTU
    1SFUUJFS
    &4-JOU
    TUZMFEDPNQPOFUT
    5ZQF4DSJQU
    ʁ
    ʁ
    ྫ͑͹3FBDUͰ8FCΞϓϦΛ։ൃ͢Δ࣌
    SFBDUSPVUFS
    'PSNJL
    )551$MJFOU
    ঢ়ଶ؅ཧ
    6*
    Ϟδϡʔϧόϯυϥʔ
    τϥϯεύΠϥ
    ςετ
    ϑΥʔϚολʔ
    -JOUFS
    ελΠϦϯά
    'PSN
    ϧʔςΟϯά
    ੩తܕ෇
    

    View Slide

27. OQNJOTUBMMYYY
    

    View Slide

28. Hex
    #1F1F1F
    ༷ʑͳ+BWB4DSJQUϞδϡʔϧΛΠϯετʔϧ͢Δ
    w ಛఆͷ໾ׂΛ࣋ͭখ͞ͳϥΠϒϥϦΛ૊Έ߹ΘͤΔ͜ͱͰ
    8FCΞϓϦͷ։ൃ͕ߦ͍͑ͯΔ
    w ੈքͷΤϯδχΞ͕ϥΠϒϥϦΛ+BWB4DSJQUͷϞδϡʔϧͱ
    ͯ͠࡞੒ͯ͠OQNͰެ։͢Δ
    w OQN্ʹ͸ɺ༷ʑͳ໾ׂɾ໰୊Λղܾ͢ΔϥΠϒϥϦ͕೔ʑެ
    ։͞ΕΔ
    

    View Slide

29. ʮϑϩϯτΤϯυͬͯ
    มԽܹ͍͠ΑͶʯ
    

    View Slide

30. Hex
    #1F1F1F
    ϑϩϯτΤϯυͷΤίγεςϜͱมԽ
    w OQNΛϕʔεʹɺΤίγεςϜ͕੒ख़ͯ͠ΔͷͰɺ͜Ε
    ·Ͱͷ໰୊Λղܾ͢Δ΋ͷ͕ੜ·Εɺ࢖͏΋ͷ͸มԽ͢Δ
    ςετ
    6*ͷߏங
    ϧʔςΟϯά
    'PSN ঢ়ଶ؅ཧ
    ελΠϦϯά
    3FBDU
    

    View Slide

31. ΤίγεςϜ͕੒ख़͍ͯ͠Δ͔Βͦ͜
    কདྷɺҠߦ͠΍͍͢Α͏ʹ޻෉͢Δ
    

    View Slide

32. Hex
    #1F1F1F
    Ҡߦ͠΍͍͢޻෉
    %0.ͷߏஙํ๏ΛผͷϥΠϒϥϦʹҠߦ͍ͨ͠৔߹Ͳ͕ͬͪ΍Γ΍͍͢ʁ
    FYI: ܦ೥ྼԽʹ଱͑Δ ReactComponent ͷॻ͖ํ | Qiita
    https://qiita.com/Takepepe/items/41e3e7a2f612d7eb094a
    

    View Slide

33. 1MVHJOΤίγεςϜ
    
    

    View Slide

34. Hex
    #1F1F1F
    1MVHJOΤίγεςϜ
    w &4-JOU #BCFM XFCQBDLͳͲͷϥΠϒϥϦ͸ɺ
    QMVHJOͱ͍͏࢓૊ΈΛ༻ҙ͍ͯ͠Δ
    w ༷ʑͳϢʔεέʔεʹରԠ͢Δ͜ͱ͕Ͱ͖Δ
    w ϥΠϒϥϦຊମͰରԠ͠ͳͯ͘΋ɺ༗ࢤͷ։ൃऀ͕ศརͳ
    QMVHJOΛ࡞Δ͜ͱͰɺ༷ʑͳ͜ͱ͕ՄೳʹͳΔ
    

    View Slide

35. Hex
    #1F1F1F
    1MVHHBCMFͳϥΠϒϥϦ&4-JOUͷྫ
    https://eslint.org/docs/developer-guide/architecture
    FTMJOUQMVHJOYYY
    

    View Slide

36. Hex
    #1F1F1F
    1MVHHBCMFͳϥΠϒϥϦ#BCFMͷྫ
    1BSTF
    5SBWFSTF 5SBOTGPSN
    
    (FOFSBUF
    CBCFMQMVHJOYYY
    $PEF
    "45
    5SBOTGPSNFE"45
    $PEF
    

    View Slide

37. Hex
    #1F1F1F
    ྫ͑͹ɺʓʓ΋νΣοΫ͍ͨ͠
    &4-JOU
    +BWB4DSJQUͷ-JOUFS
    ϐϡΞͳ+BWB4DSJQUίʔυ
    3FBDUKTίʔυ 7VFKTίʔυ
    5ZQF4DSJQUίʔυ
    

    View Slide

38. Hex
    #1F1F1F
    ྫ͑͹ɺʓʓ΋νΣοΫ͍ͨ͠
    &4-JOU
    +BWB4DSJQUͷ-JOUFS
    ϐϡΞͳ+BWB4DSJQUίʔυ
    3FBDUKTίʔυ 7VFKTίʔυ
    5ZQF4DSJQUίʔυ
    &4-JOU$PSF3VMFT
    FTMJOUQMVHJOSFBDU FTMJOUQMVHJOWVF
    !UZQFTDSJQUFTMJOU
    FTMJOUQMVHJO
    

    View Slide

39. Hex
    #1F1F1F
    ༷ʑͳϢʔεέʔεʹରԠ͢Δ
    &4-JOU
    KTYͷBZͷνΣοΫ
    &4.ͷJNQPSUFYQPSU
    ͷνΣοΫ
    FTMJOUQMVHJOKTYBZ FTMJOUQMVHJOJNQPSU
    FTMJOUQMVHJOͷνΣοΫ
    FTMJOUQMVHJOFTMJOUQMVHJO
    /PEF4FDVSJUZνΣπΫ
    FTMJOUQMVHJOTFDVSJUZ
    

    View Slide

40. Hex
    #1F1F1F
    ͦͷଞͷϥΠϒϥϦ΋
    w XFCQBDLQMVHJO
    w 4UPSZCPPL"EEPOT
    w K2VFSZ1MVHJO
    w 3FEVY.JEEMFXBSF
    FUD
    

    View Slide

41. 1MVHJO։ൃऀ͸+BWB4DSJQUͷϞδϡʔϧͱͯ͠
    1MVHJOΛ࡞੒ͯ͠ɺOQNʹެ։
    1MVHJOͷଘࡏʹΑΓɺ༷ʑͳϢʔεέʔεʹ
    ϥΠϒϥϦ͕ରԠ͢Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

42. $POpHΤίγεςϜ
    
    

    View Slide

43. ʮϑϩϯτΤϯυͬͯ
    ؀ڥߏங΍Δ͜ͱଟ͘ͳ͍ʁʯ
    

    View Slide

44. Hex
    #1F1F1F
    ؀ڥߏஙઃఆ
    
    XFCQBDLDPOpHKT
    UTDPOpHKTPO
    KFTUDPOpHKT
    QSFUUJFSSDKT
    FTMJOUSDKT
    TUPSZCPPL
    CBCFMSDKTPO
    TUZMFMJOUSDKT
    

    View Slide

45. Hex
    #1F1F1F
    ઃఆϑΝΠϧͷྫ
    FTMJOUSDKT
    ࣗ෼Ͱશͯઃఆ͢Δͱେม
    

    View Slide

46. Hex
    #1F1F1F
    $POpHΤίγεςϜ
    w &4-JOUͷ4IBSFBCMF$POpH
    w ઃఆΛڞ༗Ͱ͖Δ
    w #BCFM΍4UPSZCPPLͷ1SFTFUT
    w ؆୯ʹઃఆ͕ߦ͑Δ
    w ྫ͑͹ɺ3FBDUͷઃఆʹ
    w FTMJOUDPOpHSFBDUBQQ
    w !CBCFMQSFTFUSFBDU
    w !TUPSZCPPLQSFTFUDSFBUFSFBDUBQQ
    

    View Slide

47. Hex
    #1F1F1F
    ྫ
    &4-JOU4IBSFBCMF$POpHT
    

    View Slide

48. Hex
    #1F1F1F
    ྫ
    #BCFM1SFTFUT
    

    View Slide

49. Hex
    #1F1F1F
    ձࣾͷઃఆΛ࡞੒͢Δ͜ͱ΋
    IUUQTXXXOQNKTDPNQBDLBHF!DZCP[VFTMJOUDPOpH
    

    View Slide

50. ༷ʑͳ1SFTFUT΍$POpH͕༻ҙ͞Εɺ
    OQN͔Βར༻Մೳʹͳ͍ͬͯΔ
    ઃఆָ͕ʹͳΔ
    

    View Slide

51. Hex
    #1F1F1F
    $SFBUF/FX1SPKFDU"VUPNBUJDTFUVQ
    $SFBUF/FX1SPKFDU
    DSFBUFSFBDUBQQNZBQQ
    WVFDSFBUFIFMMPXPSME
    OHOFXNZBQQ
    4UPSZCPPL"VUPNBUJD4FUVQ
    OQYQ!TUPSZCPPLDMJTCJOJU
    

    View Slide

52. Hex
    #1F1F1F
    OQNJOJUJOJUJBMJ[FS
    DSFBUFSFBDUBQQ
    OQNJOJUSFBDUBQQNZBQQ
    DSFBUFOVYUBQQ
    OQNJOJUOVYUBQQNZOVYUBQQ
    !LJOUPOFDSFBUFQMVHJO
    OQNJOJU!LJOUPOFQMVHJONZQMVHJO
    

    View Slide

53. ศརͳ$-*ʹΑΓ
    ίϚϯυҰൃͰ؀ڥߏங͕Ͱ͖Δ
    ؀ڥߏஙָ͕ʹͳΔ
    

    View Slide

54. 5ZQFΤίγεςϜ
    
    

    View Slide

55. Hex
    #1F1F1F
    5ZQFΤίγεςϜ
    w 5ZQF4DSJQUΛ࠾༻͢ΔϓϩδΣΫτ͕૿͍͑ͯΔ
    w ϥΠϒϥϦͷܕఆٛ͸ʁʁ

    5ZQF4DSJQUʹ͸ɺ!UZQFTύοέʔδ

    %FpOJUFMZ5ZQFE
    ͕͋Δ
    

    View Slide

56. OQNJOTUBMM%!UZQFTYYY
    

    View Slide

57. Hex
    #1F1F1F
    ϥΠϒϥϦͷܕఆٛ EUT
    
    w ϥΠϒϥϦͷܕఆٛ EUT
    Λ༻ҙ͢Δʹ͸ʁ
    ϥΠϒϥϦຊମ͕ܕఆٛϑΝΠϧΛఏڙ͢Δ
    ༗ࢤ͕ܕఆٛϑΝΠϧΛ࡞ͬͯڞ༗͢Δ
    

    View Slide

58. Hex
    #1F1F1F
    %FpOJUFMZ5ZQFE
    w શͯͷύοέʔδΛಠཱͨͭ͠ͷϦϙδτϦͰ؅ཧ
    w IUUQTHJUIVCDPN%FpOJUFMZ5ZQFE%FpOJUFMZ5ZQFE
    w ϥΠϒϥϦຊମͰܕఆٛϑΝΠϧΛ༻ҙ͞Ε͍ͯͳ͍৔߹
    ͸ɺ༗ࢤ͕࡞੒ɾϝϯςφϯεΛߦ͏
    

    View Slide

59. Hex
    #1F1F1F
    ϥΠϒϥϦͷܕఆٛͱͯ͠ͷΤίγεςϜ
    w ࠷ۙొ৔ͨ͠IFHFMͱ͍͏+4ͷܕνΣοΧʔ͸
    5ZQF4DSJQUͷܕఆٛϑΝΠϧΛར༻Ͱ͖Δ
    w IUUQTIFHFMKTPSHEPDTMJCSBSJFT
    w 5ZQF4DSJQUʹݶΒͣɺϥΠϒϥϦͷܕఆٛ

    ΤίγεςϜͱͯ͠ॏཁͳଘࡏʹͳ͍͖ͬͯͦ͏
    

    View Slide

60. ·ͱΊ
    

    View Slide

61. Hex
    #1F1F1F
    ·ͱΊ
    w ϑϩϯτΤϯυʹ͸༷ʑͳΤίγεςϜ͕͋Γ

    8FCΞϓϦ։ൃ΍ϥΠϒϥϦͷར༻Λࢧ͍͑ͯΔ
    w OQN 1MVHJO $POpH 5ZQFΛΩʔϫʔυʹ

    ͍͔ͭ͘ͷΤίγεςϜʹ͍ͭͯઆ໌ͨ͠
    w ࠓޙɺ͜ΕΒͷԸܙΛड͚ɺศརʹ։ൃ͍ͯ͜͠͏ʂ
    

    View Slide

62. 5)"/,:06
    

    View Slide