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

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

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

E9ce07196f470caff07053e98a88fa9e?s=128

Toshihisa Tomatsu

June 21, 2020
Tweet

Transcript

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

  2. ֎দढ़ঘ 5PTIJIJTB5PNBUTV  αΠϘ΢ζגࣜձࣾ 'SPOUFOE&YQFSU5FBN ౦ژˠѪඤ !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 /PEF1BDLBHF.BOBHFS
 /PEFKTͷύοέʔδΛ؅ཧ͢Δ w ϨδετϦ IUUQTXXXOQNKTDPN 

    w ศརͳύοέʔδΛOQN ϨδετϦ ʹஔ͍ͯɺOQN ͷ$-* OQNJOTUBMM ͰΈΜͳ͕ར༻Ͱ͖Δ
  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. OQNJOTUBMMYYY

  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$PSF3VMFT

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

    FTMJOUQMVHJOFTMJOUQMVHJO /PEF4FDVSJUZνΣπΫ FTMJOUQMVHJOTFDVSJUZ
  40. Hex #1F1F1F ͦͷଞͷϥΠϒϥϦ΋ w XFCQBDLQMVHJO w 4UPSZCPPL"EEPOT w K2VFSZ1MVHJO 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-JOU4IBSFBCMF$POpHT

  48. Hex #1F1F1F ྫ #BCFM1SFTFUT

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

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

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

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

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

  54. 5ZQFΤίγεςϜ 

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

    ͕͋Δ
  56. OQNJOTUBMM%!UZQFTYYY

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

     ༗ࢤ͕ܕఆٛϑΝΠϧΛ࡞ͬͯڞ༗͢Δ
  58. Hex #1F1F1F %FpOJUFMZ5ZQFE 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