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

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

uhyo
March 25, 2021

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

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

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

uhyo

March 25, 2021
Tweet

More Decks by uhyo

Other Decks in Programming

Transcript

  1. ೥୅ɺ
    ࢖͏ٕज़͸Ͳ͏બͿʁ
    'SPOU&OE4UVEZ
    -*/&גࣜձࣾ ϑϩϯτΤϯυΤϯδχΞ
    VIZP

    View full-size slide

  2. "CPVU4QFBLFS
    uhyo
    –-*/&ͷϑϩϯτΤϯυΤϯδχΞ
    –5ZQF4DSJQUͱ3FBDU͕ओͳ෢ث
    –ొஃ͢Δͱ͍ͭ΋ܕ҆શੑͷ࿩Λ͢Δ
    – ࠓճ͸͋·Γ͠·ͤΜ

    View full-size slide

  3. Q. 2020年代のフロントエンド͸Ͳ͏ͳΔʁ

    View full-size slide

  4. Q. 2020年代のフロントエンド͸Ͳ͏ͳΔʁ
    A.
    Θ͔Γ·ͤΜ

    View full-size slide

  5. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide

  6. ະདྷͷ͜ͱΛ஌Δͷ͸೉͍͠
    ೥લɺࠓͲ͏ͳ͍ͬͯΔ͔૝૾Ͱ͖·͔ͨ͠ʁ
    ೥ͷࣗ෼͸૝૾Ͱ͖ͳ͔ͬͨͷͰ
    K2VFSZͱ$PGGFF4DSJQUͰ41"Λ࡞ͬͯ·ͨ͠ɻ
    ͳΜͱࠓ΋ಈ͍ͯΔʂʢએ఻ʣ
    ݄Լਓ࿛
    IUUQTKJOSPVVIZPIZPOFU

    View full-size slide

  7. 5IJT5BML
    –ະདྷͷ͜ͱ͕෼͔Βͳ͍தͰͲ͏ٕज़બఆ͢Δ͔
    –ະདྷͷ͜ͱΛ༧ଌ͢ΔͨΊʹ͸Ͳ͏͢Δ͔

    View full-size slide

  8. ໰୊ղܾͱٕज़બఆ

    View full-size slide

  9. ະདྷΛ஌Δͱ͸
    –ʮະདྷΛ஌Δʯ
    –কདྷతʹϑϩϯτΤϯυྖҬͷٕज़ελοΫ
    ʹൃੜ͢ΔมԽΛ஌Δ
    –কདྷྲྀߦΔٕज़ɾ͜Ε͔ΒֶͿ΂͖ٕज़Λ஌Δ
    –஌͚ࣝͩͰ͸Ͳ͏ʹ΋ͳΒͳ͍😩
    –೥୅ʹى͖ͨมԽɾྲྀߦٕͬͨज़͕ࢀߟʹͳΔ͔΋ʁ

    View full-size slide

  10. ೥୅ͷߦ·ͱΊ
    –એݴత6*͕ग़͖͕ͯͯࠢ਒͑ͨ
    –5ZQF4DSJQU͕ීٴ
    –8FCඪ४ͷਐԽ͕Ճ଎

    View full-size slide

  11. Q. ৽͍ٕ͠ज़͸ͳͥੜ·ΕΔͷ͔ʁ

    View full-size slide

  12. Q. ৽͍ٕ͠ज़͸ͳͥੜ·ΕΔͷ͔ʁ
    A. ৽͍͠໰୊Λղܾ͢ΔͨΊ
    – ϥΠϒϥϦ΍ϑϨʔϜϫʔΫ͸໰୊ղܾͷखஈͰ͋Δ
    – ৽͍͠໰୊Λղܾ͢ΔͨΊʹ͸৽͍ٕ͠ज़͕ඞཁͰ͋Δ

    View full-size slide

  13. େ৽ٕज़ͷ෼ੳ
    ϑϩϯτΤϯυ։ൃͷେن໛Խ
    એݴత6* ੩తܕγεςϜ
    ໋ྩతͳ%0.ૢ࡞͕ͭΒ͍ ιʔείʔυͷಡղɾߋ৽ίετ
    ͕େ͖ͯͭ͘Β͍
    ໰୊
    ղܾࡦ

    View full-size slide

  14. େ৽ٕज़ͷ෼ੳ
    એݴత6*
    ܾࡦ

    View full-size slide

  15. େ৽ٕज़ͷ෼ੳ
    એݴత6*
    ܾࡦ
    ͍ͭ͜Β͸ ͷҧ͍
    ઃܭ

    View full-size slide

  16. Α͘ฉ͔ΕΔ࣭໰
    Q. Ͳ͏ͯ͠3FBDUΛબΜͩͷʁ

    View full-size slide

  17. Α͘ฉ͔ΕΔ࣭໰
    Q. Ͳ͏ͯ͠3FBDUΛબΜͩͷʁ
    A.
    ޷͖͔ͩΒ

    View full-size slide

  18. ͲͷϥΠϒϥϦΛબͿʁ
    એݴత6*
    ܾࡦ
    ͜ͷ ͕޷͖
    ઃܭ

    View full-size slide

  19. એݴత6*
    ͍ͭ͜Β͸ ͕ҧ͏͚ͩɻ
    ͱ ͸͍͍ͩͨಉ͡ɻ
    ͲͷϥΠϒϥϦΛબͿʁ
    ܾࡦ
    ઃܭ
    ໰୊ ղܾࡦ
    ͷྑ͠ѱ͠΋͋Δ͕ɺ
    ޷ΈͰબΜͰ΋ΘΓͱྑ͍ɻ
    ઃܭ

    View full-size slide

  20. ݁ہະདྷΛ஌Δʹ͸Ͳ͏ͨ͠Β͍͍͔
    ະདྷΛ஌Δʹ͸৽͍͠ Λ஌Ε͹͍͍ʂ
    Ή͠Ζ Λࣗ෼Ͱ࡞Ε͹ະདྷΛ࡞ΕΔ͔΋ʜʜ
    ղܾࡦ
    ໰୊
    ղܾࡦ
    ໰୊

    View full-size slide

  21. ૝ఆ͞ΕΔٙ໰
    Q. Ͳ͏ͨ͠Β৽͍͠ Λ஌Δ͜ͱ͕Ͱ͖Δʁ
    ղܾࡦ
    ໰୊

    View full-size slide

  22. ૝ఆ͞ΕΔٙ໰
    Q. Ͳ͏ͨ͠Β৽͍͠ Λ஌Δ͜ͱ͕Ͱ͖Δʁ
    A.
    ࢥ͍ͭ͘
    ղܾࡦ
    ໰୊

    View full-size slide

  23. ϥΠϒϥϦͷਐԽͱ໰୊ղܾ
    ύϥμΠϜΛม͑ΔϨϕϧͷ ͸ͱͯ΋رɻ
    ೥Ͱͭͱ͔ɻ
    ͔͠͠ϑϩϯτΤϯυͷਐԽ͸଎͍ͱݴΘΕΔɻͳ͔ͥʁ
    ΑΓখ͞ͳ໰୊ղܾαΠΫϧΛճ͍ͯ͠Δ͔Β
    ղܾࡦ

    View full-size slide

  24. 3FBDUͷྫ
    ղܾࡦ
    ໰୊ ໋ྩత%0.ૢ࡞͸
    εέʔϧ͢Δઃܭ͕ࠔ೉
    એݴత6*ɾԾ૝%0.
    ղܾࡦ
    ໰୊ ίϯϙʔωϯτͷઃܭ͕
    ͭΒ͍ʢεςʔτϑϧʹ
    ͳΓ͕ͪʣ
    3FBDU)PPLT
    ղܾࡦ
    ໰୊
    ඇಉظॲཧͷઃܭ͕·ͩͭΒ͍
    ʢ໋ྩతɾεςʔτϑϧʹͳΓ͕ͪʣ
    69ͱͷཱ྆΋೉͍͠
    3FBDU$PODVSSFOU.PEF
    ʢະϦϦʔεʣ
    ղܾࡦ
    ໰୊
    όϯυϧαΠζ࡟ݮͷͨΊʹܭࢉΛ
    αʔόʔଆʹҠ͢ͱΞϓϦͷઃܭ͕
    ΍΍͘͜͠ͳΔ
    3FBDU4FSWFS$PNQPOFOUT
    ʢະϦϦʔεʣ

    View full-size slide

  25. 3FBDUͷਪ͠ϙΠϯτ
    ͞·͟·ͳ Λग़ͯ͘͠Δ͕ɺҰ؏ͨ͠໨తҙࣝΛ
    ͍࣋ͬͯΔɻ ࢦ਑΋Ұ؏͍ͯ͠Δɻ
    ղܾࡦ
    ໰୊
    IUUQTSFBDUKTPSHEPDTDPODVSSFOUNPEFJOUSPIUNM
    IUUQTHJUIVCDPNKPTFQITBWPOBSGDTCMPCTFSWFSDPNQPOFOUTUFYUTFSWFSDPNQPOFOUTNE
    ઃܭ

    View full-size slide

  26. 3FBDU͸·͍͚ͩΔ
    Ұ؏ͨ͠ ͔Β܁Γग़͞ΕΔਐԽΛ͋ͱͭ΋
    ࢒͍ͯ͠Δʂ
    ͜ͷઌͷํ޲ੑ͕༧ଌ͠΍͍͢
    ͷΞοϓσʔτ͕ظ଴Ͱ͖Δ
    ʹ௕ظతͳ࠾༻ɾֶशͷର৅ͱͯ͠৴པੑ͕ߴ͍
    ʢͰ΋$PODVSSFOU.PEFൃද͔Β೥Ҏ্ܦͬͯΔͦ͠ΖͦΖϦϦʔεͯ͠΄͍͠ʣ
    ղܾࡦ
    ໰୊
    ઃܭ
    ղܾࡦ
    ໰୊

    View full-size slide

  27. ೦ͷͨΊ͝஫ҙ
    3FBDUҎ֎ͷϥΠϒϥϦΛඇ೉͢Δҙਤ͸͋Γ·ͤΜɻ
    ࣗ෼ͷ޷͖ͳϥΠϒϥϦͷ໨తҙࣝΛߟ࡯ͯ͠Έ·͠ΐ͏ɻ
    🤫

    View full-size slide

  28. छྨͷٕज़બఆ
    ୹ظతͳٕज़બఆʢ͙͢ʹݱ৔Ͱ࢖͏ͱ͔ʣ
    ͸ࠓͷϕΫτϓϥΫςΟεͰ΋͍͍ɻ
    ࠓͷͨΊͷ Ͱબ΅͏
    –ॻ͖΍͍͢ɾܕ͕͍͍ FUD
    த௕ظతͳٕज़બఆʢ਺೥ޙΛݟਾ͑ͨʣ
    ΑΓ৽͍͠ Λબ΅͏
    ղܾࡦ
    ໰୊
    ઃܭ
    ղܾࡦ
    ໰୊

    View full-size slide

  29. ୺తʹ·ͱΊΔͱ
    த௕ظతͳٕज़બ୒͸৽͍ٕ͠ज़Λ࠾༻͠Ζʂ
    ͳͥͳΒ৽͍ٕ͠ज़͸৽͍͠ Λղܾ͢Δ͔Β
    Λఏى͠ଓ͚ΔϥΠϒϥϦ͸৴པͰ͖Δ
    ໰୊
    ໰୊

    View full-size slide

  30. ཧ૝ͱݱ࣮
    Q. Ͱ΋৽͍ٕ͠ज़͸ރΕͯͳ͍͠ʜʜ৘ใ͕ͳ͍͠ʜʜ

    View full-size slide

  31. ཧ૝ͱݱ࣮
    Q. Ͱ΋৽͍ٕ͠ज़͸ރΕͯͳ͍͠ʜʜ৘ใ͕ͳ͍͠ʜʜ
    A. ͦΕ͸ݱ࣮ͷ࿩Ͱ͢Ͷɻ
    – ඞཁͳ৘ใΛࣗΒௐ΂ͯಘΒΕΔͷ͕ཧ૝తͰ͢ΑͶʁ
    – ׬ᘳͳղܾࡦΛࣗΒ࡞Δͷ͕ཧ૝తͰ͢ΑͶʁ
    – ͱ͍͏͔ࣗࣾͰॻ͍ͨΫϩʔζυͳιʔεΑΓ͸ރΕͯ·͢ΑͶʁ

    View full-size slide

  32. ཧ૝ͱݱ࣮


    ཧ૝

    ࣌ؒతཁҼ
    ਓతཁҼ
    FUD
    ݱ࣮తબ୒
    • ৭ʑͳཁҼʹΑΓཧ૝͔Βԕ͕͞Δͷ͸
    ࢓ํ͕ͳ͍ɻ
    • ͏·͍མͱ͠ॴΛݟ͚ͭΔͷ΋·ٕͨज़ྗɻ
    • ͔͠͠ཧ૝͸ཧ૝ͱͯ͠ଘࡏ͢Δɻ

    View full-size slide

  33. ༨ஊ
    Q. ͳͥཧ૝ΛޠΔͷ͔ʁ
    A1. 理想͸جຊɺ現実͸Ԡ༻ͳͷͰ
    A2. Έͳ͞Μͷࢹ໺Λ޿͛ΔͨΊ

    View full-size slide

  34. ༨ஊ5ZQF4DSJQUͷྫ

    BOZύϥμΠε
    ཧ૝
    TUSJDUUSVF OP*NQMJDJU"OZUSVF
    ˡ͜ͷ΁Μ͕མͱ͠ॴ͔ͳʁ ͘Β͍

    View full-size slide


  35. BOZύϥμΠε
    ཧ૝
    TUSJDUUSVF OP*NQMJDJU"OZUSVF
    ˡ͜͜Ͱ͚͢Ͳʜʜ
    ۃ๺
    BT΋ݪଇ࢖༻ېࢭ ࢖༻͢Δ৔߹͸આ໌ίϝϯτඞਢ

    View full-size slide

  36. 8FCඪ४Λ௥͑ʂ

    View full-size slide

  37. ೥୅ͷߦ·ͱΊ
    –એݴత6*͕ग़͖͕ͯͯࠢ਒͑ͨ
    –5ZQF4DSJQU͕ීٴ
    –8FCඪ४ͷਐԽ͕Ճ଎

    View full-size slide

  38. Q. ͳͥ8FCඪ४Λ௥͏΂͖ͳͷ͔ʁ

    View full-size slide

  39. Q. ͳͥ8FCඪ४Λ௥͏΂͖ͳͷ͔ʁ
    A. 8FCඪ४͸ڀۃͷ ͔ͩΒ
    – ϥΠϒϥϦϨϕϧͰղܾͰ͖ͳ͍͜ͱΛϒϥ΢β͕ղܾͯ͘͠ΕΔ
    – ϥΠϒϥϦ΋݁ہ8FCඪ४ͷ্ʹ৐͍ͬͯΔ
    ղܾࡦ

    View full-size slide

  40. 8FCඪ४͸ະདྷ΁ͷಓඪ
    8FCඪ४͸ ʹର͢Δࠜຊతͳ Λ༩͑Δ͕ɺ
    ϩʔϨϕϧͳ"1*Ͱ͋ΓPQJOJPOBUFEͳ ͸൐Θͳ͍ɻ
    ֤ʑͷ Λ࣋ͬͨϥΠϒϥϦ͕࡞ΒΕΔɻ
    ͱ͍͏͜ͱ͸͋͋͋͋͋͋͋͋
    ৽͍͠8FCඪ४Λ஌Ε͹ະདྷͷ؀ڥ͕༧ଌͰ͖Δʂ
    ղܾࡦ
    ໰୊
    ઃܭ
    ઃܭ

    View full-size slide

  41. ྫ$44ͱ4IBEPX%0.
    ղܾࡦ
    ໰୊ $44͸άϩʔόϧʹొ࿥͞Εɺ
    େن໛ʹͳΔͱ؅ཧ͕೉͍͠
    ඃΒͳ͍Ϋϥε໊ͷࣗಈੜ੒
    ʢϥΠϒϥϦϨϕϧղܾࡦʣ
    ղܾࡦ
    4IBEPX%0.
    ʢ࢓༷Ϩϕϧղܾࡦʣ
    ઃܭ 8FCQBDLͷ$44.PEVMFT
    ֤छ$44JO+4ϥΠϒϥϦ
    ઃܭ 4IBEPX%0.ϕʔεͷ$44JO+4
    ϥΠϒϥϦΛ࡞Γ·ͨ͠ʢએ఻ʣ
    IUUQTHJUIVCDPNVIZPDBTUFMMB
    ղܾࡦ
    ໰୊ 4IBEPX%0.͸443Ͱ͖ͳ͍
    ʢ4IBEPX%0.಺Λੜ੒͢Δͷʹ+4͕ඞਢʣ
    %FDMBSBUJWF4IBEPX%0.

    View full-size slide

  42. ྫ&4.࣌୅ͷϦιʔε഑৴
    Q. &4.PEVMFTωΠςΟϒͷ࣌୅ʹͳΔͱɺ
    ͷΑ͏ͳόϯυϥ͸ෆཁʹͳΔʁ

    View full-size slide

  43. ྫ&4.࣌୅ͷϦιʔε഑৴
    Q. &4.PEVMFTωΠςΟϒͷ࣌୅ʹͳΔͱɺ
    ͷΑ͏ͳόϯυϥ͸ෆཁʹͳΔʁ
    A. ͍͍͑ɺόϯυϥ͸·ͩඞཁͰ͢

    View full-size slide

  44. ྫ&4.࣌୅ͷϦιʔε഑৴
    ղܾࡦ
    ໰୊ &4.PEVMFTͷϞδϡʔϧάϥϑશମΛऔಘ͢Δʹ͸
    αʔόʔͱͷؒΛԿԟ෮΋͢Δඞཁ͕͋Δ
    )5514FSWFS1VTIʢ಴࠳ʣ
    ղܾࡦ
    3FTPVSDF#VOEMFT
    #VOEMFE3FTPOTFT#BUDIFE1SFGFUDIFT

    όϯυϥ͸+BWB4DSJQUͰ͸ͳ͘#VOEMFE3FTQPOTFTΛग़ྗ͠ɺ
    ϒϥ΢βɾαʔόʔ΋#VOEMFE3FTQPOTFTΛωΠςΟϒʹཧղ͢Δ
    ʢએ఻ʣ #VOEMFE3FTQPOTFTΛಡΈॻ͖Ͱ͖Δ$-*ͱ͔Λ࣮૷͠·ͨ͠
    IUUQTHJUIVCDPNVIZPSFTPVSDFCVOEMFT
    🌐📦
    ղܾࡦ
    ໰୊ +4ͷϑΝΠϧ਺͕ଟ͗ͯ͢
    ύϑΥʔϚϯε͕ѱ͍
    .PEVMF'SBHNFOUT
    ʢ4UBHF1SPQPTBMʣ

    View full-size slide

  45. ٕज़બఆ
    ໨తʹ߹Θͤͯ෼͚ͯߟ͑Α͏ɻ
    –͙͢࢖͏
    ޷͖ͳɾखʹೃછΉ ΛબͿͷָ͕ɻݱ৔ͷঢ়گʹ߹Θͤͯ࢖
    ͑ΔΑ͏ʹམͱ͠ࠐΉ͜ͱ΋ॏཁɻ
    –௕͘࢖͍͍ͨɾઌΛݟਾ͑ͨεΩϧ޲্
    ྑ͍ Λબ΅͏ɻྑ͍ ͸௕͍໨ͰݟΔͱൃల͢Δ͸ͣɻ
    ݟΔ໨Λຏ͍ͯΞʔϦʔΞμϓλʔʹɻ
    ઃܭ
    ղܾࡦ ղܾࡦ

    View full-size slide

  46. ྑ͍ղܾࡦͬͯʁ
    ࣗ෼Ͱ Λۛຯ͢Δͷ͕ཧ૝ɻʢ೉͍͠ʣ
    8FCඪ४Λ௥͏ͷ͕ݎ࣮ɻ
    ࣍ͷ࣌୅ʹྲྀߦΔϥΠϒϥϦΛ༧૝ͯ͠ΈΑ͏ɻ
    ղܾࡦ

    View full-size slide

  47. ·ͱΊ
    ໰୊ղܾͱ͍͏ࢹ఺Ͱٕज़બఆΛߟ͑ͯΈ·ͨ͠ɻ
    ཧ૝తͳͷ͸ࣗ෼Ͱ໰୊ɾղܾࡦΛߟ͑Δ͜ͱɻ
    ط੒ͷϥΠϒϥϦΛ࢖͏ࡍ΋ղܾࡦΛҙࣝ͠Α͏ɻ

    View full-size slide