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

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

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