2020年代、使う技術はどう選ぶ？

Front-End Study #5 の発表資料です。
https://forkwell.connpass.com/event/205227/

フィードバックはこちら：
https://koibu.me/events/14/talks/wQQs0pbvMZHcnZ8TawAi

Transcript

1. ೥୅ɺ ࢖͏ٕज़͸Ͳ͏બͿʁ 'SPOU&OE
   4UVEZ
    -*/&גࣜձࣾ ϑϩϯτΤϯυΤϯδχΞ VIZP
2. "CPVU
   4QFBLFS uhyo –-*/&ͷϑϩϯτΤϯυΤϯδχΞ –5ZQF4DSJQUͱ3FBDU͕ओͳ෢ث –ొஃ͢Δͱ͍ͭ΋ܕ҆શੑͷ࿩Λ͢Δ – ࠓճ͸͋·Γ͠·ͤΜ
3. Q. 2020年代のフロントエンド͸Ͳ͏ͳΔʁ
4. Q. 2020年代のフロントエンド͸Ͳ͏ͳΔʁ A. Θ͔Γ·ͤΜ
5. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
6. ະདྷͷ͜ͱΛ஌Δͷ͸೉͍͠ ೥લɺࠓͲ͏ͳ͍ͬͯΔ͔૝૾Ͱ͖·͔ͨ͠ʁ ೥ͷࣗ෼͸૝૾Ͱ͖ͳ͔ͬͨͷͰ K2VFSZͱ$PGGFF4DSJQUͰ41"Λ࡞ͬͯ·ͨ͠ɻ ͳΜͱࠓ΋ಈ͍ͯΔʂʢએ఻ʣ ݄Լਓ࿛ IUUQTKJOSPVVIZPIZPOFU
7. 5IJT
   5BML –ະདྷͷ͜ͱ͕෼͔Βͳ͍தͰͲ͏ٕज़બఆ͢Δ͔ –ະདྷͷ͜ͱΛ༧ଌ͢ΔͨΊʹ͸Ͳ͏͢Δ͔
8. 
   ໰୊ղܾͱٕज़બఆ
9. ະདྷΛ஌Δͱ͸ –ʮະདྷΛ஌Δʯ –কདྷతʹϑϩϯτΤϯυྖҬͷٕज़ελοΫ ʹൃੜ͢ΔมԽΛ஌Δ –কདྷྲྀߦΔٕज़ɾ͜Ε͔ΒֶͿ΂͖ٕज़Λ஌Δ –஌͚ࣝͩͰ͸Ͳ͏ʹ΋ͳΒͳ͍😩 –೥୅ʹى͖ͨมԽɾྲྀߦٕͬͨज़͕ࢀߟʹͳΔ͔΋ʁ
10. ೥୅ͷߦ·ͱΊ –એݴత6*͕ग़͖͕ͯͯࠢ਒͑ͨ –5ZQF4DSJQU͕ීٴ –8FCඪ४ͷਐԽ͕Ճ଎
11. Q. ৽͍ٕ͠ज़͸ͳͥੜ·ΕΔͷ͔ʁ
12. Q. ৽͍ٕ͠ज़͸ͳͥੜ·ΕΔͷ͔ʁ A. ৽͍͠໰୊Λղܾ͢ΔͨΊ – ϥΠϒϥϦ΍ϑϨʔϜϫʔΫ͸໰୊ղܾͷखஈͰ͋Δ – ৽͍͠໰୊Λղܾ͢ΔͨΊʹ͸৽͍ٕ͠ज़͕ඞཁͰ͋Δ
13. େ৽ٕज़ͷ෼ੳ ϑϩϯτΤϯυ։ൃͷେن໛Խ એݴత6* ੩తܕγεςϜ ໋ྩతͳ%0.ૢ࡞͕ͭΒ͍ ιʔείʔυͷಡղɾߋ৽ίετ ͕େ͖ͯͭ͘Β͍ ໰୊ ղܾࡦ
14. େ৽ٕज़ͷ෼ੳ એݴత6* ܾࡦ
15. େ৽ٕज़ͷ෼ੳ એݴత6* ܾࡦ ͍ͭ͜Β͸ ͷҧ͍ ઃܭ
16. Α͘ฉ͔ΕΔ࣭໰ Q. Ͳ͏ͯ͠3FBDUΛબΜͩͷʁ
17. Α͘ฉ͔ΕΔ࣭໰ Q. Ͳ͏ͯ͠3FBDUΛબΜͩͷʁ A. ޷͖͔ͩΒ
18. ͲͷϥΠϒϥϦΛબͿʁ એݴత6* ܾࡦ ͜ͷ ͕޷͖ ઃܭ
19. એݴత6* ͍ͭ͜Β͸ ͕ҧ͏͚ͩɻ ͱ ͸͍͍ͩͨಉ͡ɻ ͲͷϥΠϒϥϦΛબͿʁ ܾࡦ ઃܭ ໰୊ ղܾࡦ ͷྑ͠ѱ͠΋͋Δ͕ɺ ޷ΈͰબΜͰ΋ΘΓͱྑ͍ɻ ઃܭ
20. ݁ہະདྷΛ஌Δʹ͸Ͳ͏ͨ͠Β͍͍͔ ະདྷΛ஌Δʹ͸৽͍͠ Λ஌Ε͹͍͍ʂ Ή͠Ζ Λࣗ෼Ͱ࡞Ε͹ະདྷΛ࡞ΕΔ͔΋ʜʜ ղܾࡦ ໰୊ ղܾࡦ ໰୊
21. ૝ఆ͞ΕΔٙ໰ Q. Ͳ͏ͨ͠Β৽͍͠ Λ஌Δ͜ͱ͕Ͱ͖Δʁ ղܾࡦ ໰୊
22. ૝ఆ͞ΕΔٙ໰ Q. Ͳ͏ͨ͠Β৽͍͠ Λ஌Δ͜ͱ͕Ͱ͖Δʁ A. ࢥ͍ͭ͘ ղܾࡦ ໰୊
23. ϥΠϒϥϦͷਐԽͱ໰୊ղܾ ύϥμΠϜΛม͑ΔϨϕϧͷ ͸ͱͯ΋رɻ ೥Ͱͭͱ͔ɻ ͔͠͠ϑϩϯτΤϯυͷਐԽ͸଎͍ͱݴΘΕΔɻͳ͔ͥʁ ΑΓখ͞ͳ໰୊ղܾαΠΫϧΛճ͍ͯ͠Δ͔Β ղܾࡦ
24. 3FBDUͷྫ ղܾࡦ ໰୊ ໋ྩత%0.ૢ࡞͸ εέʔϧ͢Δઃܭ͕ࠔ೉ એݴత6*ɾԾ૝%0. ղܾࡦ ໰୊ ίϯϙʔωϯτͷઃܭ͕ ͭΒ͍ʢεςʔτϑϧʹ ͳΓ͕ͪʣ 3FBDU
    )PPLT ղܾࡦ ໰୊ ඇಉظॲཧͷઃܭ͕·ͩͭΒ͍ ʢ໋ྩతɾεςʔτϑϧʹͳΓ͕ͪʣ 69ͱͷཱ྆΋೉͍͠ 3FBDU
    $PODVSSFOU
    .PEF ʢະϦϦʔεʣ ղܾࡦ ໰୊ όϯυϧαΠζ࡟ݮͷͨΊʹܭࢉΛ αʔόʔଆʹҠ͢ͱΞϓϦͷઃܭ͕ ΍΍͘͜͠ͳΔ 3FBDU
    4FSWFS
    $PNQPOFOUT ʢະϦϦʔεʣ
25. 3FBDUͷਪ͠ϙΠϯτ ͞·͟·ͳ Λग़ͯ͘͠Δ͕ɺҰ؏ͨ͠໨తҙࣝΛ ͍࣋ͬͯΔɻ ࢦ਑΋Ұ؏͍ͯ͠Δɻ ղܾࡦ ໰୊ IUUQTSFBDUKTPSHEPDTDPODVSSFOUNPEFJOUSPIUNM IUUQTHJUIVCDPNKPTFQITBWPOBSGDTCMPCTFSWFSDPNQPOFOUTUFYUTFSWFSDPNQPOFOUTNE ઃܭ
26. 3FBDU͸·͍͚ͩΔ Ұ؏ͨ͠ ͔Β܁Γग़͞ΕΔਐԽΛ͋ͱͭ΋ ࢒͍ͯ͠Δʂ ͜ͷઌͷํ޲ੑ͕༧ଌ͠΍͍͢ ͷΞοϓσʔτ͕ظ଴Ͱ͖Δ ʹ௕ظతͳ࠾༻ɾֶशͷର৅ͱͯ͠৴པੑ͕ߴ͍ ʢͰ΋$PODVSSFOU
    .PEFൃද͔Β೥Ҏ্ܦͬͯΔͦ͠ΖͦΖϦϦʔεͯ͠΄͍͠ʣ ղܾࡦ ໰୊ ઃܭ ղܾࡦ ໰୊
27. ೦ͷͨΊ͝஫ҙ 3FBDUҎ֎ͷϥΠϒϥϦΛඇ೉͢Δҙਤ͸͋Γ·ͤΜɻ ࣗ෼ͷ޷͖ͳϥΠϒϥϦͷ໨తҙࣝΛߟ࡯ͯ͠Έ·͠ΐ͏ɻ 🤫
28. छྨͷٕज़બఆ ୹ظతͳٕज़બఆʢ͙͢ʹݱ৔Ͱ࢖͏ͱ͔ʣ ͸ࠓͷϕΫτϓϥΫςΟεͰ΋͍͍ɻ ࠓͷͨΊͷ Ͱબ΅͏ –ॻ͖΍͍͢ɾܕ͕͍͍ FUD த௕ظతͳٕज़બఆʢ਺೥ޙΛݟਾ͑ͨʣ ΑΓ৽͍͠ Λબ΅͏ ղܾࡦ ໰୊ ઃܭ ղܾࡦ ໰୊
29. ୺తʹ·ͱΊΔͱ த௕ظతͳٕज़બ୒͸৽͍ٕ͠ज़Λ࠾༻͠Ζʂ ͳͥͳΒ৽͍ٕ͠ज़͸৽͍͠ Λղܾ͢Δ͔Β Λఏى͠ଓ͚ΔϥΠϒϥϦ͸৴པͰ͖Δ ໰୊ ໰୊
30. ཧ૝ͱݱ࣮ Q. Ͱ΋৽͍ٕ͠ज़͸ރΕͯͳ͍͠ʜʜ৘ใ͕ͳ͍͠ʜʜ
31. ཧ૝ͱݱ࣮ Q. Ͱ΋৽͍ٕ͠ज़͸ރΕͯͳ͍͠ʜʜ৘ใ͕ͳ͍͠ʜʜ A. ͦΕ͸ݱ࣮ͷ࿩Ͱ͢Ͷɻ – ඞཁͳ৘ใΛࣗΒௐ΂ͯಘΒΕΔͷ͕ཧ૝తͰ͢ΑͶʁ – ׬ᘳͳղܾࡦΛࣗΒ࡞Δͷ͕ཧ૝తͰ͢ΑͶʁ – ͱ͍͏͔ࣗࣾͰॻ͍ͨΫϩʔζυͳιʔεΑΓ͸ރΕͯ·͢ΑͶʁ
32. ཧ૝ͱݱ࣮ 
    ແ 
    ཧ૝ ࣌ؒతཁҼ ਓతཁҼ FUD ݱ࣮తબ୒ • ৭ʑͳཁҼʹΑΓཧ૝͔Βԕ͕͞Δͷ͸ ࢓ํ͕ͳ͍ɻ • ͏·͍མͱ͠ॴΛݟ͚ͭΔͷ΋·ٕͨज़ྗɻ • ͔͠͠ཧ૝͸ཧ૝ͱͯ͠ଘࡏ͢Δɻ
33. ༨ஊ Q. ͳͥཧ૝ΛޠΔͷ͔ʁ A1. 理想͸جຊɺ現実͸Ԡ༻ͳͷͰ A2. Έͳ͞Μͷࢹ໺Λ޿͛ΔͨΊ
34. ༨ஊ
    5ZQF4DSJQUͷྫ 
    ແ
    
    BOZύϥμΠε 
    ཧ૝
    
    TUSJDU
    USVF
    OP*NQMJDJU"OZ
    USVF ˡ͜ͷ΁Μ͕མͱ͠ॴ͔ͳʁ ͘Β͍
35. 
    ແ
    
    BOZύϥμΠε 
    ཧ૝
    
    TUSJDU
    USVF
    OP*NQMJDJU"OZ
    USVF ˡ͜͜Ͱ͚͢Ͳʜʜ 
    ۃ๺
    
    BT΋ݪଇ࢖༻ېࢭ
    ࢖༻͢Δ৔߹͸આ໌ίϝϯτඞਢ
36. 
    8FCඪ४Λ௥͑ʂ
37. ೥୅ͷߦ·ͱΊ –એݴత6*͕ग़͖͕ͯͯࠢ਒͑ͨ –5ZQF4DSJQU͕ීٴ –8FCඪ४ͷਐԽ͕Ճ଎
38. Q. ͳͥ8FCඪ४Λ௥͏΂͖ͳͷ͔ʁ
39. Q. ͳͥ8FCඪ४Λ௥͏΂͖ͳͷ͔ʁ A. 8FCඪ४͸ڀۃͷ ͔ͩΒ – ϥΠϒϥϦϨϕϧͰղܾͰ͖ͳ͍͜ͱΛϒϥ΢β͕ղܾͯ͘͠ΕΔ – ϥΠϒϥϦ΋݁ہ8FCඪ४ͷ্ʹ৐͍ͬͯΔ ղܾࡦ
40. 8FCඪ४͸ະདྷ΁ͷಓඪ 8FCඪ४͸ ʹର͢Δࠜຊతͳ Λ༩͑Δ͕ɺ ϩʔϨϕϧͳ"1*Ͱ͋ΓPQJOJPOBUFEͳ ͸൐Θͳ͍ɻ ֤ʑͷ Λ࣋ͬͨϥΠϒϥϦ͕࡞ΒΕΔɻ ͱ͍͏͜ͱ͸͋͋͋͋͋͋͋͋ ৽͍͠8FCඪ४Λ஌Ε͹ະདྷͷ؀ڥ͕༧ଌͰ͖Δʂ ղܾࡦ ໰୊ ઃܭ ઃܭ
41. ྫ
    $44ͱ4IBEPX
    %0. ղܾࡦ ໰୊ $44͸άϩʔόϧʹొ࿥͞Εɺ େن໛ʹͳΔͱ؅ཧ͕೉͍͠ ඃΒͳ͍Ϋϥε໊ͷࣗಈੜ੒ ʢϥΠϒϥϦϨϕϧղܾࡦʣ ղܾࡦ 4IBEPX
    %0. ʢ࢓༷Ϩϕϧղܾࡦʣ ઃܭ 8FCQBDLͷ$44
    .PEVMFT ֤छ$44
    JO
    +4ϥΠϒϥϦ ઃܭ 4IBEPX
    %0.ϕʔεͷ$44
    JO
    +4 ϥΠϒϥϦΛ࡞Γ·ͨ͠ʢએ఻ʣ IUUQTHJUIVCDPNVIZPDBTUFMMB ղܾࡦ ໰୊ 4IBEPX
    %0.͸443Ͱ͖ͳ͍ ʢ4IBEPX
    %0.಺Λੜ੒͢Δͷʹ+4͕ඞਢʣ %FDMBSBUJWF
    4IBEPX
    %0.
42. ྫ
    &4.࣌୅ͷϦιʔε഑৴ Q. &4
    .PEVMFTωΠςΟϒͷ࣌୅ʹͳΔͱɺ ͷΑ͏ͳόϯυϥ͸ෆཁʹͳΔʁ
43. ྫ
    &4.࣌୅ͷϦιʔε഑৴ Q. &4
    .PEVMFTωΠςΟϒͷ࣌୅ʹͳΔͱɺ ͷΑ͏ͳόϯυϥ͸ෆཁʹͳΔʁ A. ͍͍͑ɺόϯυϥ͸·ͩඞཁͰ͢
44. ྫ
    &4.࣌୅ͷϦιʔε഑৴ ղܾࡦ ໰୊ &4
    .PEVMFTͷϞδϡʔϧάϥϑશମΛऔಘ͢Δʹ͸ αʔόʔͱͷؒΛԿԟ෮΋͢Δඞཁ͕͋Δ )551
    4FSWFS
    1VTIʢ಴࠳ʣ ղܾࡦ 3FTPVSDF
    #VOEMFT
    #VOEMFE
    3FTPOTFT
    
    #BUDIFE
    1SFGFUDIFT όϯυϥ͸+BWB4DSJQUͰ͸ͳ͘#VOEMFE
    3FTQPOTFTΛग़ྗ͠ɺ ϒϥ΢βɾαʔόʔ΋#VOEMFE
    3FTQPOTFTΛωΠςΟϒʹཧղ͢Δ ʢએ఻ʣ #VOEMFE
    3FTQPOTFTΛಡΈॻ͖Ͱ͖Δ$-*ͱ͔Λ࣮૷͠·ͨ͠ IUUQTHJUIVCDPNVIZPSFTPVSDFCVOEMFT 🌐📦 ղܾࡦ ໰୊ +4ͷϑΝΠϧ਺͕ଟ͗ͯ͢ ύϑΥʔϚϯε͕ѱ͍ .PEVMF
    'SBHNFOUT ʢ4UBHF
    
    1SPQPTBMʣ
45. ·ͱΊ
46. ٕज़બఆ ໨తʹ߹Θͤͯ෼͚ͯߟ͑Α͏ɻ –͙͢࢖͏ ޷͖ͳɾखʹೃછΉ ΛબͿͷָ͕ɻݱ৔ͷঢ়گʹ߹Θͤͯ࢖ ͑ΔΑ͏ʹམͱ͠ࠐΉ͜ͱ΋ॏཁɻ –௕͘࢖͍͍ͨɾઌΛݟਾ͑ͨεΩϧ޲্ ྑ͍ Λબ΅͏ɻྑ͍ ͸௕͍໨ͰݟΔͱൃల͢Δ͸ͣɻ ݟΔ໨Λຏ͍ͯΞʔϦʔΞμϓλʔʹɻ ઃܭ ղܾࡦ ղܾࡦ
47. ྑ͍ղܾࡦͬͯʁ ࣗ෼Ͱ Λۛຯ͢Δͷ͕ཧ૝ɻʢ೉͍͠ʣ 8FCඪ४Λ௥͏ͷ͕ݎ࣮ɻ ࣍ͷ࣌୅ʹྲྀߦΔϥΠϒϥϦΛ༧૝ͯ͠ΈΑ͏ɻ ղܾࡦ
48. ·ͱΊ ໰୊ղܾͱ͍͏ࢹ఺Ͱٕज़બఆΛߟ͑ͯΈ·ͨ͠ɻ ཧ૝తͳͷ͸ࣗ෼Ͱ໰୊ɾղܾࡦΛߟ͑Δ͜ͱɻ ط੒ͷϥΠϒϥϦΛ࢖͏ࡍ΋ղܾࡦΛҙࣝ͠Α͏ɻ