Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Toshihisa Tomatsu

June 21, 2020
Tweet

More Decks by Toshihisa Tomatsu

Other Decks in Programming

Transcript

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

    View Slide

  2. ֎দढ़ঘ 5PTIJIJTB5PNBUTV

    αΠϘ΢ζגࣜձࣾ
    'SPOUFOE&YQFSU5FBN
    ౦ژˠѪඤ
    !UPTIJUPNB
    [email protected]@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