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

Transcript

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

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

3. ΤίγεςϜ
   

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

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

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

   ͞ΕɺΤίγεςϜ͕޿͕͍ͬͯΔ

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

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

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

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

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

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

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

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

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

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

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

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

19. Hex #1F1F1F ϑϩϯτΤϯυͷΤίγεςϜ͸ʁ w 8FCΞϓϦΛ։ൃ͢Δࡍ
    w OQNΛϕʔεʹ༷ʑͳϥΠϒϥϦΛ׆༻
    w ϥΠϒϥϦΛར༻͢Δࡍ
    w

    QMVHJO
    QSFTFU
    BEEPO
    DPOpHͳͲΛ༗ࢤͷ։ൃऀ͕ ։ൃͯ͠ڞ༗ɾར༻

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

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

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

23. OQN
    ΤίγεςϜ 

24. Hex #1F1F1F OQN w /PEF
    1BDLBHF
    .BOBHFS
 
    /PEFKTͷύοέʔδΛ؅ཧ͢Δ
    w ϨδετϦ
    IUUQTXXXOQNKTDPN
    

    w ศརͳύοέʔδΛOQN ϨδετϦ ʹஔ͍ͯɺOQN ͷ$-* OQN
    JOTUBMM ͰΈΜͳ͕ར༻Ͱ͖Δ

25. Hex #1F1F1F 3FBDU 3FEVY XFCQBDL #BCFM +FTU 1SFUUJFS &4-JOU TUZMFEDPNQPOFUT

    5ZQF4DSJQU ʁ ʁ ྫ͑͹3FBDUͰ8FCΞϓϦΛ։ൃ͢Δ࣌ SFBDUSPVUFS 'PSNJL BYJPT

26. Hex #1F1F1F BYJPT 3FBDU 3FEVY XFCQBDL #BCFM +FTU 1SFUUJFS &4-JOU

    TUZMFEDPNQPOFUT 5ZQF4DSJQU ʁ ʁ ྫ͑͹3FBDUͰ8FCΞϓϦΛ։ൃ͢Δ࣌ SFBDUSPVUFS 'PSNJL )551
    $MJFOU ঢ়ଶ؅ཧ 6* Ϟδϡʔϧόϯυϥʔ τϥϯεύΠϥ ςετ ϑΥʔϚολʔ -JOUFS ελΠϦϯά 'PSN ϧʔςΟϯά ੩తܕ෇

27. OQN
    JOTUBMM
    YYY

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

    OQN্ʹ͸ɺ༷ʑͳ໾ׂɾ໰୊Λղܾ͢ΔϥΠϒϥϦ͕೔ʑެ ։͞ΕΔ

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

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

    ঢ়ଶ؅ཧ ελΠϦϯά 3FBDU

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

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

    https://qiita.com/Takepepe/items/41e3e7a2f612d7eb094a

33. 1MVHJO
    ΤίγεςϜ 

34. Hex #1F1F1F 1MVHJO
    ΤίγεςϜ w &4-JOU
    #BCFM
    XFCQBDLͳͲͷϥΠϒϥϦ͸ɺ QMVHJOͱ͍͏࢓૊ΈΛ༻ҙ͍ͯ͠Δ
    w ༷ʑͳϢʔεέʔεʹରԠ͢Δ͜ͱ͕Ͱ͖Δ
    

    w ϥΠϒϥϦຊମͰରԠ͠ͳͯ͘΋ɺ༗ࢤͷ։ൃऀ͕ศརͳ QMVHJOΛ࡞Δ͜ͱͰɺ༷ʑͳ͜ͱ͕ՄೳʹͳΔ

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

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

    5SBOTGPSNFE
    "45 $PEF

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

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

    FTMJOUQMVHJOSFBDU FTMJOUQMVHJOWVF !UZQFTDSJQUFTMJOU
    FTMJOUQMVHJO

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

    FTMJOUQMVHJOFTMJOUQMVHJO /PEF
    4FDVSJUZνΣπΫ FTMJOUQMVHJOTFDVSJUZ

40. Hex #1F1F1F ͦͷଞͷϥΠϒϥϦ΋ w XFCQBDL
    QMVHJO
    w 4UPSZCPPL
    "EEPOT
    w K2VFSZ
    1MVHJO
    w

    3FEVY
    .JEEMFXBSF
    FUD

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

42. $POpH
    ΤίγεςϜ 

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

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

    TUZMFMJOUSDKT

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

46. Hex #1F1F1F $POpH
    ΤίγεςϜ w &4-JOUͷ4IBSFBCMF
    $POpH
    w ઃఆΛڞ༗Ͱ͖Δ
    w #BCFM΍4UPSZCPPLͷ1SFTFUT
    w

    ؆୯ʹઃఆ͕ߦ͑Δ
    w ྫ͑͹ɺ3FBDUͷઃఆʹ
    w FTMJOUDPOpHSFBDUBQQ
    w !CBCFMQSFTFUSFBDU
    w !TUPSZCPPLQSFTFUDSFBUFSFBDUBQQ

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

48. Hex #1F1F1F ྫ
    #BCFM
    1SFTFUT

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

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

51. Hex #1F1F1F $SFBUF
    /FX
    1SPKFDU"VUPNBUJD
    TFUVQ 
    $SFBUF
    /FX
    1SPKFDU
    
    DSFBUFSFBDUBQQ
    NZBQQ
    
    WVF
    DSFBUF
    IFMMPXPSME
    
    OH
    OFX
    NZBQQ
    
    4UPSZCPPL
    "VUPNBUJD
    4FUVQ
    
    OQY
    Q
    !TUPSZCPPLDMJ
    TC
    JOJU

52. Hex #1F1F1F OQN
    JOJU
    JOJUJBMJ[FS 
    DSFBUFSFBDUBQQ
    
    OQN
    JOJU
    SFBDUBQQ
    NZBQQ
    
    
    DSFBUFOVYUBQQ
    
    OQN
    JOJU
    OVYUBQQ
    NZOVYUBQQ
    
    !LJOUPOFDSFBUFQMVHJO
    
    OQN
    JOJU
    !LJOUPOFQMVHJO
    NZQMVHJO
    

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

54. 5ZQF
    ΤίγεςϜ 

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

    %FpOJUFMZ
    5ZQFE

    ͕͋Δ

56. OQN
    JOTUBMM
    %
    !UZQFTYYY

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

     ༗ࢤ͕ܕఆٛϑΝΠϧΛ࡞ͬͯڞ༗͢Δ

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

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


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

60. ·ͱΊ

61. Hex #1F1F1F ·ͱΊ w ϑϩϯτΤϯυʹ͸༷ʑͳΤίγεςϜ͕͋Γ
 8FCΞϓϦ։ൃ΍ϥΠϒϥϦͷར༻Λࢧ͍͑ͯΔ
    w OQN
    1MVHJO
    $POpH

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

62. 5)"/,
    :06