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

by Toshihisa Tomatsu

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ΤίγεςϜ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

έʔε ϓϩμΫτͰͷྫ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

έʔε ϥΠϒϥϦͰͷྫ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

OQNΤίγεςϜ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

OQNJOTUBMMYYY

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ΤίγεςϜ͕੒ख़͍ͯ͠Δ͔Βͦ͜ কདྷɺҠߦ͠΍͍͢Α͏ʹ޻෉͢Δ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

1MVHJOΤίγεςϜ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

$POpHΤίγεςϜ

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Hex #1F1F1F ྫ &4-JOU4IBSFBCMF$POpHT

Slide 48

Slide 48 text

Hex #1F1F1F ྫ #BCFM1SFTFUT

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

5ZQFΤίγεςϜ

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

OQNJOTUBMM%!UZQFTYYY

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

·ͱΊ

Slide 61

Slide 61 text

Hex #1F1F1F ·ͱΊ w ϑϩϯτΤϯυʹ͸༷ʑͳΤίγεςϜ͕͋Γ  8FCΞϓϦ։ൃ΍ϥΠϒϥϦͷར༻Λࢧ͍͑ͯΔ w OQN 1MVHJO $POpH 5ZQFΛΩʔϫʔυʹ  ͍͔ͭ͘ͷΤίγεςϜʹ͍ͭͯઆ໌ͨ͠ w ࠓޙɺ͜ΕΒͷԸܙΛड͚ɺศརʹ։ൃ͍ͯ͜͠͏ʂ

Slide 62

Slide 62 text

5)"/,:06