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

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

E9ce07196f470caff07053e98a88fa9e?s=47 Toshihisa Tomatsu
June 21, 2020
Programming
8
2.3k

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

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

E9ce07196f470caff07053e98a88fa9e?s=128

Toshihisa Tomatsu

June 21, 2020
Tweet

More Decks by Toshihisa Tomatsu

See All by Toshihisa Tomatsu
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
3
1.3k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
3
190
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
8
1.8k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
17
8.9k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
0
720
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
5
4.5k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
5
2.4k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
8
2k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
2
400

Other Decks in Programming

See All in Programming
0c2ae3d2aa77423465e1e533ff0d030a?s=48 mski_iksm
5
1.9k
0ed400174f90a4bcee05f3455597932f?s=48 ohbarye
3
100
81011f5622102c067230901506f21e5f?s=48 gorou_178
0
120
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
160
4f2867b43e88bf4fbb6cf9f371dc9501?s=48 guni1192
1
300
Cfbe23392787cb3ad4689c5f72463fcc?s=48 makicamel
3
750
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
0
420
F74146bada61d15a5e652919815bd355?s=48 satoki
0
300
7988692211244373f0e84a922a1f4f78?s=48 inabajunmr
0
9.3k
E65d5a0c854f5433a69859ec0cd4d5bb?s=48 massa142
0
310
F21d69109b1c03921abf7d12f0fb6654?s=48 dscs
0
140
0187ef0e45a8d745eafc223cf2ebb90c?s=48 tosh7
1
360

Featured

See All Featured
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
118
26k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
120
11k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.7k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
64
10k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
249
21k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
162
6.8k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
29
5.1k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
336
30k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
660
55k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
69
3.2k

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